/* ==========================================================================
   Talata fixtures — feature game, month-split rows, ticker, ticket modal.
   Every class is tf- or tk- prefixed so it never collides with a page's own
   CSS, the same rule the shared header follows.

   Structure follows zalgiris.lt/rungtynes (Deng, 26 Aug 2026): a featured next
   game with a live countdown, then fixtures grouped under month headings, each
   row reading competition / venue / crest-score-crest / action. Colours are
   Talata's, not theirs: navy #0B1F3A, baby #7DD3FC, sky #BAE6FD.
   ========================================================================== */

.tf-scope,.tk,.tf-feat,.tf-month,.tf-bar,.tf-tabs,.tf-modal{
  --f-bg:#0B0F17; --f-card:#131A26; --f-card2:#1A2333; --f-line:#26324A;
  --f-text:#E6EDF7; --f-muted:#93A3BA; --f-accent:#7DD3FC; --f-sky:#BAE6FD;
  --f-brand:#2C4FD8; --f-win:#4ADE80; --f-warn:#FBBF24;
  --f-disp:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- shared crest ---------- */

.tf-crest{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:10px;overflow:hidden;
  background:#fff;
}
.tf-crest img{width:100%;height:100%;object-fit:contain;padding:4px;display:block;}
/* Talata's mark is a WORDMARK, not a square crest, so its slot is wide and
   flexible. It has to be free to shrink: pinning it to a minimum width made it
   overflow the panel in the narrower detail dialog and collide with the
   tip-off time. Scales down to fit, never clips, never overflows. */
.tf-crest.is-talata{
  background:transparent;border-radius:0;overflow:visible;
  width:auto;max-width:100%;min-width:0;flex:0 1 auto;
}
.tf-crest.is-talata img{
  width:auto;max-width:100%;height:auto;max-height:30px;
  padding:0;object-fit:contain;
}
.tf-crest.is-mono{
  background:var(--f-card2);color:var(--f-accent);font-family:var(--f-disp);
  font-weight:800;font-size:.8rem;letter-spacing:.03em;
}

/* ---------- feature game ---------- */

.tf-feat{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  background:var(--f-card);border:1px solid var(--f-line);border-radius:16px;
  overflow:hidden;font-family:var(--f-body);
}
.tf-feat-main{
  display:flex;align-items:center;justify-content:space-around;gap:14px;
  padding:34px 22px;
  background:radial-gradient(120% 140% at 50% 0%,#1B2740 0%,#0B0F17 70%);
}
.tf-feat-side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;flex:1 1 0;overflow:hidden;padding:0 6px;}
.tf-feat-side .tf-crest{width:64px;height:64px;border-radius:12px;}
.tf-feat-side .tf-crest.is-talata{width:100%;height:auto;}
.tf-feat-side .tf-crest.is-talata img{max-height:42px;max-width:100%;}
.tf-feat-side span{
  font-size:.86rem;font-weight:700;color:var(--f-text);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tf-feat-mid{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;}
.tf-feat-date{
  font-family:var(--f-disp);font-size:.7rem;font-weight:800;letter-spacing:.14em;
  color:var(--f-muted);margin:0;
}
.tf-feat-time{
  font-family:var(--f-disp);font-weight:900;font-size:2.5rem;line-height:1;
  color:#fff;margin:0;font-variant-numeric:tabular-nums;
}
.tf-feat-badge{
  font-family:var(--f-disp);font-size:.6rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:var(--f-brand);color:#fff;
  padding:3px 10px;border-radius:999px;margin-top:4px;
}

.tf-feat-info{padding:22px 24px;display:flex;flex-direction:column;}
.tf-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--f-line);
}
.tf-row>span{font-size:.85rem;color:var(--f-muted);flex:0 0 auto;}
.tf-row>b{font-size:.9rem;color:var(--f-text);text-align:right;font-weight:600;}
.tf-hl{color:var(--f-accent);}

.tf-cd{display:flex;gap:14px;}
.tf-cd span{display:flex;flex-direction:column;align-items:center;line-height:1;}
.tf-cd b{
  font-family:var(--f-disp);font-weight:900;font-size:1.3rem;color:var(--f-accent);
  font-variant-numeric:tabular-nums;
}
.tf-cd i{font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--f-muted);margin-top:3px;}

.tf-feat-cta{display:flex;gap:10px;margin-top:auto;padding-top:18px;flex-wrap:wrap;}
.tf-btn{
  font-family:var(--f-disp);font-weight:800;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;border-radius:9px;padding:12px 20px;
  border:1px solid var(--f-line);background:transparent;color:var(--f-text);
  text-align:center;flex:1 1 auto;transition:all .15s ease;
}
.tf-btn:hover{border-color:var(--f-accent);color:var(--f-accent);}
.tf-btn.is-primary{background:var(--f-brand);border-color:var(--f-brand);color:#fff;}
.tf-btn.is-primary:hover{background:#3A5FE8;border-color:#3A5FE8;color:#fff;}
.tf-btn:disabled{opacity:.55;cursor:default;}

@media (max-width:880px){
  .tf-feat{grid-template-columns:1fr;}
  .tf-feat-time{font-size:2rem;}
  .tf-feat-side .tf-crest{width:52px;height:52px;}
}

/* The feature card had a hard floor of 310px and .tf-feat sets overflow:hidden,
   so under that width it did not scroll and it did not wrap. It silently cut.
   Measured 26 Aug: 360px viewport fits at exactly 0px spare, 320px loses 40px
   off the card, and a long opponent ("Stevnsgade Div 2", "Helsingborg BBK
   Blue") raises the floor and starts biting at 360 too.
   The floor was .tf-feat-mid at flex:0 0 auto, which could not shrink below the
   106px of "SEPTEMBER 13", plus two fixed crests and 72px of padding and gaps.
   Everything here exists to lower that floor to ~216px. */
@media (max-width:400px){
  .tf-feat-main{padding:26px 12px;gap:8px;min-width:0;}
  .tf-feat-mid{flex:0 1 auto;min-width:0;}
  .tf-feat-date{font-size:.62rem;letter-spacing:.10em;}
  .tf-feat-time{font-size:1.7rem;}
  .tf-feat-side .tf-crest{width:44px;height:44px;}
  .tf-feat-side .tf-crest.is-talata img{max-height:32px;}
  .tf-feat-side span{max-width:96px;}
  .tf-feat-info{padding:18px 16px;}
}

/* ---------- month groups + fixture rows ---------- */

.tf-month{margin:0 0 26px;padding:0;}
.tf-mh{
  font-family:var(--f-disp);font-weight:900;font-size:1.15rem;color:var(--f-text);
  margin:0 0 12px;padding:0;letter-spacing:-.01em;
}
.tf-mh b{color:var(--f-accent);font-weight:900;}

.tf-r{
  display:grid;grid-template-columns:.9fr 1.25fr 2.3fr minmax(124px,.72fr);gap:1px;cursor:pointer;
  background:var(--f-line);border:1px solid var(--f-line);border-radius:12px;
  overflow:hidden;margin-bottom:8px;font-family:var(--f-body);
}
.tf-r>div{background:var(--f-card);padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:84px;}
.tf-r.is-home>div{background:#1A2740;}
.tf-r:hover>div{background:var(--f-card2);}
.tf-r:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px;}
.tf-r.is-tbc .tf-r-comp b{color:var(--f-warn);}

.tf-r-comp span,.tf-r-venue span{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--f-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The competition gets two lines rather than an ellipsis. "U19 1st Division
   East" does not fit one line below about 1200px, and a league name cut to
   "U19 1ST DIVISION ..." tells a parent nothing. */
.tf-r-comp span{
  white-space:normal;text-overflow:clip;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tf-r-comp b,.tf-r-venue b{
  font-size:.86rem;color:var(--f-text);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tf-r-venue b{
  font-weight:500;color:var(--f-muted);
  white-space:normal;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* A FIVE COLUMN GRID, not a flex row (1 Sep 2026). The score pill used to
   wander: both name cells were flex:1, but the Talata lockup is 64-84px against
   a 36px opponent badge, so the centre sat off by half that difference AND
   flipped side with home/away. Nothing lined up down the column. Fixed, equal
   crest cells put the scoreline on the same x on every row. */
.tf-r-match{
  display:grid!important;
  grid-template-columns:1fr 68px auto 68px 1fr;
  align-items:center;column-gap:10px;
}
/* Two lines rather than an ellipsis. "Lucentum Academy" and "International
   Tournament" were both being cut to nothing at one line. */
.tf-r-team{
  font-size:.9rem;font-weight:700;color:var(--f-text);flex:1 1 0;min-width:0;
  line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tf-r-team.is-l{text-align:right;}
.tf-r-team.is-r{text-align:left;}
.tf-r-match .tf-crest{width:36px;height:36px;border-radius:8px;justify-self:center;}
/* The Talata lockup ran 76-110px wide against a 36px opponent badge, so every
   row leaned. Closer to the badge now, and it carries the name on its own since
   the redundant "Talata" text is gone. */
.tf-r-match .tf-crest.is-talata{width:auto;height:auto;min-width:0;max-width:68px;background:none;border:0;justify-self:center;}
.tf-r-match .tf-crest.is-talata img{max-height:22px;}
/* ONE scoreline, not two pills (1 Sep 2026). Two separate boxes read as two
   unrelated numbers; a scoreline reads as a result. And only the side that
   actually won is coloured — `.tf-r.is-won .tf-r-score` used to paint BOTH,
   so a 41-59 win showed the opponent's 41 in the win colour too. */
.tf-r-score{
  display:inline-flex;align-items:baseline;gap:8px;flex:0 0 auto;
  background:var(--f-card2);border-radius:8px;padding:5px 12px;
  font-variant-numeric:tabular-nums;
}
.tf-r-score b{
  font-family:var(--f-disp);font-weight:900;font-size:1.05rem;color:var(--f-text);
  min-width:22px;text-align:center;
}
.tf-r-score i{font-style:normal;font-size:.72rem;color:var(--f-muted);opacity:.7;}
/* An unplayed row is a fixture, not a result. Keep it quiet. */
.tf-r-score:not(.is-done) b{color:var(--f-muted);font-weight:800;}
.tf-r-score b.is-w{color:var(--f-win);}

.tf-r-act{align-items:flex-end!important;gap:6px;}
/* Sits inline with the competition name now, not stacked in the action column
   where it made 12 of 51 rows taller than the other 39. */
.tf-r-tag{
  font-family:var(--f-disp);font-size:.56rem;font-weight:800;letter-spacing:.1em;
  font-style:normal;text-transform:uppercase;color:#0B0F17;background:var(--f-accent);
  padding:2px 7px;border-radius:999px;white-space:nowrap;
}
.tf-r-tix{
  font-family:var(--f-disp);font-size:.66rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  background:transparent;border:1px solid var(--f-brand);color:var(--f-accent);
  padding:7px 13px;border-radius:8px;transition:all .15s ease;
}
.tf-r-tix:hover{background:var(--f-brand);color:#fff;}
.tf-r-tix:disabled{opacity:.5;cursor:default;border-color:var(--f-line);color:var(--f-muted);}
.tf-r-free{
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--f-muted);
  white-space:nowrap;
}

/* Stacks at 1080, not 900. Between 900 and ~1100 the four column row was too
   cramped to hold a competition name or a club name: measured at 960 it clipped
   34 competition labels and 14 opponent names. Two columns reads better than
   four truncated ones. */
@media (max-width:1080px){
  .tf-r{grid-template-columns:1fr 1fr;}
  .tf-r-match{grid-column:1/-1;order:-1;}
  .tf-r-act{align-items:flex-start!important;}
}
@media (max-width:560px){
  .tf-r-team{font-size:.8rem;}
  .tf-r-match .tf-crest{width:30px;height:30px;}
  .tf-r>div{padding:11px 12px;}
  /* 68px crest tracks are a desktop measurement. On a 375px phone they left
     each club name about 40px and clipped 43 of 51. Mobile is 70% of the
     traffic, so the tracks shrink to the badge and the names take the rest. */
  .tf-r-match{grid-template-columns:1fr 34px auto 34px 1fr;column-gap:6px;}
  .tf-r-match .tf-crest.is-talata{max-width:34px;}
  .tf-r-match .tf-crest.is-talata img{max-height:16px;}
  .tf-r-score{padding:4px 8px;gap:5px;}
  .tf-r-score b{font-size:.95rem;min-width:18px;}
  /* Three lines on a phone. "Helsingborg BBK Blue" and "KFUM Kalmar Basket"
     do not fit two lines in 72px, and the stacked row is 256px tall anyway. */
  .tf-r-team{-webkit-line-clamp:3;}
}

/* ---------- tabs + filters ---------- */

.tf-tabs{display:flex;gap:6px;border-bottom:1px solid var(--f-line);margin:0 0 18px;}
.tf-tab{
  font-family:var(--f-disp);font-weight:800;font-size:.92rem;cursor:pointer;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--f-muted);padding:10px 16px;
}
.tf-tab:hover{color:var(--f-text);}
.tf-tab.is-on{color:var(--f-text);border-bottom-color:var(--f-accent);}

.tf-bar{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;}
.tf-chip{
  font-family:var(--f-body);font-size:.8rem;font-weight:600;cursor:pointer;
  background:var(--f-card);color:var(--f-muted);border:1px solid var(--f-line);
  padding:7px 14px;border-radius:999px;transition:all .15s ease;
}
.tf-chip:hover{border-color:var(--f-accent);color:var(--f-text);}
.tf-chip.is-on{background:var(--f-accent);border-color:var(--f-accent);color:#0B0F17;}

.tf-empty,.tf-more{font-family:var(--f-body);color:var(--f-muted);font-size:.92rem;}
.tf-more{margin-top:10px;}
.tf-more a,.tf-empty a{color:var(--f-accent);font-weight:700;}

/* ---------- ticker ---------- */

.tk{
  display:flex;align-items:stretch;background:#080B12;color:var(--f-text);
  font-family:var(--f-body);overflow:hidden;position:relative;
  border-bottom:1px solid var(--f-line);
}
  100%{box-shadow:0 0 0 0 rgba(125,211,252,0);}
}
.tk-viewport{flex:1 1 auto;overflow:hidden;position:relative;}
.tk-viewport::before,.tk-viewport::after{
  content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none;
}
.tk-viewport::before{left:0;background:linear-gradient(90deg,#080B12,transparent);}
.tk-viewport::after{right:0;background:linear-gradient(270deg,#080B12,transparent);}
.tk-set{
  display:flex;align-items:stretch;
}
/* overflow:hidden, not auto. The strip moves only when an arrow is pressed
   (Deng, 26 Aug), and scrollLeft set from script still works on a hidden
   overflow, so the buttons keep full control. */
.tk-viewport{
  scroll-behavior:smooth;
  overflow:hidden;
}

.tk-arw{
  flex:0 0 auto;z-index:3;cursor:pointer;border:0;
  background:#080B12;color:var(--f-muted);
  font-size:1.5rem;line-height:1;padding:0 12px;
}
.tk-arw:hover:not(:disabled){color:var(--f-accent);}
.tk-arw:disabled{opacity:.25;cursor:default;}
.tk-arw:focus-visible{outline:2px solid var(--f-accent);outline-offset:-3px;}

.tkc{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 20px;border-right:1px solid rgba(255,255,255,.06);
  min-width:186px;text-align:center;
}
.tkc-crests{display:flex;align-items:center;gap:7px;}
.tkc-crests .tf-crest{width:26px;height:26px;border-radius:6px;}
.tkc-crests .tf-crest.is-talata{width:auto;height:auto;min-width:48px;max-width:70px;}
.tkc-crests .tf-crest.is-talata img{max-height:16px;}
.tkc-sep{font-size:.62rem;color:var(--f-muted);text-transform:uppercase;letter-spacing:.08em;}
.tkc-opp{
  font-size:.8rem;font-weight:700;color:var(--f-text);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tkc-date{font-family:var(--f-disp);font-size:.72rem;font-weight:800;color:var(--f-accent);}
.tkc-when{font-size:.66rem;color:var(--f-muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.tkc-cd{display:flex;gap:8px;}
.tkc-cd b{font-family:var(--f-disp);font-weight:900;font-size:.82rem;color:var(--f-accent);}
.tkc-cd i{font-style:normal;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--f-muted);margin-left:2px;}
.tkc-cd span{display:flex;align-items:baseline;}
.tkc-tag{
  font-family:var(--f-disp);font-size:.5rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#0B0F17;background:var(--f-accent);
  padding:2px 7px;border-radius:999px;margin-top:2px;
}
.tkc.is-next{background:rgba(44,79,216,.16);}
/* A played game shows its score where an upcoming one shows its date. */
.tkc.is-done{opacity:.72;}
.tkc-score{
  font-family:var(--f-disp);font-weight:900;font-size:1.05rem;color:var(--f-text);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.tkc-score.is-won{color:var(--f-win);}
.tkc-score i{font-style:normal;opacity:.45;margin:0 2px;}

/* A strip of moving text is a genuine accessibility problem for some readers.
   Stop it dead and let them scroll it by hand instead. */
@media (prefers-reduced-motion:reduce){
  .tk-viewport{scroll-behavior:auto;}
}
@media (max-width:640px){
    .tkc{min-width:158px;padding:9px 14px;}
}

/* ---------- ticket modal ---------- */

.tf-modal{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,12,.78);padding:20px;backdrop-filter:blur(3px);
  font-family:var(--f-body);
}
.tf-modal-box{
  position:relative;width:100%;max-width:420px;background:var(--f-card);
  border:1px solid var(--f-line);border-radius:16px;padding:28px;
  max-height:90vh;overflow-y:auto;
}
.tf-x{
  position:absolute;top:12px;right:14px;background:transparent;border:0;
  color:var(--f-muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 8px;
}
.tf-x:hover{color:var(--f-text);}
.tf-k{
  font-family:var(--f-disp);font-size:.62rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--f-accent);margin:0 0 6px;
}
.tf-modal-box h3{font-family:var(--f-disp);font-weight:900;font-size:1.25rem;color:var(--f-text);margin:0 0 8px;line-height:1.2;}
.tf-mwhen{font-size:.86rem;color:var(--f-muted);margin:0 0 18px;line-height:1.5;}
.tf-modal-box label{display:block;font-size:.78rem;font-weight:600;color:var(--f-muted);margin-bottom:12px;}
.tf-modal-box input,.tf-modal-box select{
  display:block;width:100%;margin-top:5px;font-family:var(--f-body);font-size:.95rem;
  padding:11px 13px;border-radius:9px;border:1px solid var(--f-line);
  background:var(--f-card2);color:var(--f-text);
}
.tf-modal-box .tf-btn{width:100%;margin-top:4px;}
.tf-fine{font-size:.74rem;color:var(--f-muted);margin:14px 0 0;line-height:1.55;}
.tf-ok{display:none;font-size:.95rem;color:var(--f-win);margin:8px 0 0;line-height:1.5;}

/* ---------- the row's detail dialog ---------- */

/* Reuses the feature panel wholesale, so a game looks the same at the top of
   the page and inside the dialog a row opens. */
.tf-detail-box{
  position:relative;width:100%;max-width:720px;
  border-radius:16px;overflow:hidden;
}
.tf-detail-box .tf-feat{border:1px solid var(--f-line);}
.tf-detail-box .tf-x{
  position:absolute;top:10px;right:12px;z-index:3;
  background:rgba(8,11,18,.6);border:0;border-radius:8px;
  color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:2px 10px 6px;
}
.tf-detail-box .tf-x:hover{background:rgba(8,11,18,.9);}
@media (max-width:880px){
  .tf-detail-box .tf-feat{grid-template-columns:1fr;}
}

/* "Details ›" is the affordance that says the row is a door. It sits under the
   ticket button and fades in on hover, so it never competes with the price of
   admission being free. */
.tf-r-more{
  font-family:var(--f-disp);font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--f-muted);white-space:nowrap;
  opacity:.55;transition:opacity .15s ease,color .15s ease;
}
.tf-r:hover .tf-r-more{opacity:1;color:var(--f-accent);}

/* ==========================================================================
   COMPETITION COLOUR (Deng, 27 Aug 2026)
   "Regular season can just be the black. Cup a gold or a Denmark. The other
    ones, different places, whatever their colours."

   League is the baseline and carries no bar, so the colour only ever appears
   when a game is NOT an ordinary league fixture. A trip carries the colour of
   where it goes, which is why Malmö is Swedish gold and Spain is its own.
   The bar sits on the row's left edge and the competition label matches it, so
   the same key reads at a glance and up close.

   Kinds come from compKind() in talata-fixtures.js. To add a destination, add
   one test there and one rule here.
   ========================================================================== */
.tf-r{ border-left-width:3px; border-left-style:solid; border-left-color:var(--f-line); }

.tf-r.tf-k-cup{ border-left-color:#E5484D; }   /* Danish Cup, Divisionspokal */
.tf-r.tf-k-inv{ border-left-color:#30A46C; }   /* BMS Herlev and other domestic stævner */
.tf-r.tf-k-se { border-left-color:#FFCD00; }   /* Sweden: Malbas Madness, Malmö */
.tf-r.tf-k-es { border-left-color:#8E4EC6; }   /* Spain: Girona, EYBL Alicante */
.tf-r.tf-k-fr { border-left-color:#8595AD; }   /* friendly, deliberately quiet */

.tf-r.tf-k-cup .tf-r-comp span{ color:#F2777A; }
.tf-r.tf-k-inv .tf-r-comp span{ color:#4CC38A; }
.tf-r.tf-k-se  .tf-r-comp span{ color:#F5D547; }
.tf-r.tf-k-es  .tf-r-comp span{ color:#BF7AF0; }
.tf-r.tf-k-fr  .tf-r-comp span{ color:#9AA8BF; }

/* The feature panel at the top of /games carries the same key, as a top edge
   rather than a left one, because it is a wide card and not a row. */
.tf-feat{ border-top:3px solid transparent; }
.tf-feat.tf-k-cup{ border-top-color:#E5484D; }
.tf-feat.tf-k-inv{ border-top-color:#30A46C; }
.tf-feat.tf-k-se { border-top-color:#FFCD00; }
.tf-feat.tf-k-es { border-top-color:#8E4EC6; }
.tf-feat.tf-k-fr { border-top-color:#8595AD; }

/* Legend under the season tabs. Hidden on phones, where the bars still work
   but a five-item key costs more room than it earns. */
.tf-key{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; font-family:var(--f-body); }
.tf-key span{ display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--f-muted); }
.tf-key i{ width:12px; height:3px; border-radius:2px; background:currentColor; font-style:normal; }
.tf-key .k-cup{ color:#F2777A; } .tf-key .k-inv{ color:#4CC38A; }
.tf-key .k-se { color:#F5D547; } .tf-key .k-es { color:#BF7AF0; }
.tf-key .k-lg { color:var(--f-muted); }
@media (max-width:640px){ .tf-key{ display:none; } }

/* ==========================================================================
   RESERVED SPACE FOR THE JS MOUNTS (27 Aug 2026)

   Cloudflare Core Web Vitals for 28 Jul to 27 Aug showed CLS 0.508 on
   `main.wrap` and 0.459 on `footer.tf`. The good threshold is 0.1, so both were
   about five times over.

   Cause, and it was self-inflicted on 26 Aug: `[data-talata-ticker]` and
   `[data-talata-feature]` ship as EMPTY divs and are filled by JS after two
   network round trips (the static file, then the Worker). Everything below them
   jumped down the page on arrival, which is the whole of that CLS and why the
   footer moved too.

   Heights measured from the rendered strip rather than guessed: ticker 134px at
   1440 and 132px at 375, feature 322px at 1440 and 494px at 375. Mobile is
   taller because the feature panel stacks.

   min-height, not height, so a longer opponent name can still grow the card.
   ========================================================================== */
[data-talata-ticker] { min-height: 134px; }
[data-talata-feature] { min-height: 494px; }
@media (min-width: 768px) {
  [data-talata-feature] { min-height: 322px; }
}

/* ═══ TICKER: squad name, next game, cup game (31 Aug 2026) ═══════════════
   Deng: highlight the next game more, put the age group on, and make a CUP
   game loud. Tournaments deliberately stay plain — he corrected himself on
   that mid-sentence, so only compKind()==='cup' gets this. */

.tkc{position:relative;}

/* The squad, named like the match ticket names it. */
.tkc-squad{
  font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--f-muted);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Two small caps labels, same shape, different jobs. */
.tkc-nx,.tkc-cup{
  font-family:var(--f-disp);font-size:.5rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-bottom:1px;
}
.tkc-nx{color:#0B0F17;background:var(--f-accent);}
/* #F2777A is the red the fixtures key already uses for a cup, and the same one
   the help-page stop callout got on 31 Aug. One red on this site, not three. */
.tkc-cup{color:#0B0F17;background:#F2777A;}

/* NEXT GAME. Was a faint blue wash you had to hunt for. Now it is the card that
   is obviously the point: brighter ground, a full-height accent edge, and it
   sits a touch proud of the strip. */
.tkc.is-next{
  background:linear-gradient(180deg,rgba(44,79,216,.34) 0%,rgba(44,79,216,.14) 100%);
  box-shadow:inset 3px 0 0 var(--f-accent),inset -3px 0 0 var(--f-accent);
}
.tkc.is-next .tkc-opp{color:#fff;}

/* CUP GAME. Beats the next-game styling when a card is both, which is exactly
   what happens on 7 September. */
.tkc.is-cup{
  background:linear-gradient(180deg,rgba(242,119,122,.26) 0%,rgba(242,119,122,.09) 100%);
  box-shadow:inset 3px 0 0 #F2777A,inset -3px 0 0 #F2777A;
}
.tkc.is-cup .tkc-opp{color:#fff;}
.tkc.is-cup .tkc-date{color:#F2777A;}
.tkc.is-cup .tkc-cd b{color:#F2777A;}

/* ═══ CUP POPUP, homepage only ════════════════════════════════════════════
   Bottom-left on desktop so it never covers the hero headline or the trial
   button, which are the things the page is actually for. Full width at the
   bottom on a phone, where a corner card would cover half the screen. */
.cup-pop{
  position:fixed;left:20px;bottom:20px;z-index:80;width:330px;max-width:calc(100vw - 40px);
  background:#0F1626;border:1px solid rgba(242,119,122,.55);border-left:4px solid #F2777A;
  border-radius:14px;padding:18px 20px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);
  transition:opacity .28s ease,transform .28s ease;
}
.cup-pop.is-in{opacity:1;transform:translateY(0);}
.cup-x{
  position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  color:var(--f-muted);font-size:1.35rem;line-height:1;padding:4px 6px;
}
.cup-x:hover{color:#fff;}
.cup-x:focus-visible{outline:2px solid #F2777A;outline-offset:2px;border-radius:6px;}
.cup-kick{
  font-family:var(--f-disp);font-size:.6rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#F2777A;margin:0 0 6px;
}
.cup-h{font-family:var(--f-disp);font-weight:900;font-size:1.08rem;line-height:1.2;color:#fff;margin:0 0 8px;}
.cup-when{font-size:.85rem;color:var(--f-text);margin:0 0 8px;line-height:1.45;}
.cup-when b{color:var(--f-accent);}
.cup-sub{font-size:.8rem;color:var(--f-muted);margin:0 0 14px;line-height:1.45;}
.cup-cta{
  display:block;text-align:center;background:#F2777A;color:#0B0F17;
  font-weight:800;font-size:.88rem;padding:11px;border-radius:9px;text-decoration:none;
}
.cup-cta:hover{background:#fff;}

@media (max-width:600px){
  .cup-pop{left:10px;right:10px;bottom:10px;width:auto;max-width:none;padding:16px;}
}
/* Somebody who asked for less motion still gets the popup, it just arrives. */
@media (prefers-reduced-motion:reduce){
  .cup-pop{transition:none;}
}