/* ============================================================
   CR1 — Grafiche "Basket & Co." (classifica e risultati)
   Stile indicato dalla redazione basket (Cristina Coppola, set 2026):
   fondino col canestro, titolo bianco con riga arancio, pannelli neri
   arrotondati con bordo sottile, accento giallo, Arial.
   Tutto è sotto .stage[data-sport="basket"] (lo impostano i render di
   basket.js); la base .stage (1920×1080, --safe) è in classifica.css.
   Niente box-shadow sui pannelli: html2canvas le disegna sbagliate nel JPG esportato.
   ============================================================ */

.stage[data-sport="basket"]{
  --bk-yellow:#ffc400;
  --bk-orange:#d9701f;
  --bk-panel:#121212;
  --bk-edge:rgba(255,255,255,.14);
  --bk-muted:#8d8d8d;
  /* zone della classifica: il giallo resta all'accento, il playout va sull'arancio */
  --bk-promozione:#36c6f2;
  --bk-playoff:#9ed64a;
  --bk-playin:#b98cff;
  --bk-playout:#ff8a1f;
  --bk-retrocessione:#ff4d4d;
  font-family:Arial,'Helvetica Neue',Helvetica,'Liberation Sans',sans-serif;
  color:#fff;
  background:#0b0b0b url('basket-sfondo.jpg') center/cover no-repeat;
}

/* ---------- INTESTAZIONE: titolo al centro, girone/giornata in giallo a destra, riga arancio ----------
   Parte sotto la filigrana CR1 che in onda copre l'angolo in alto a sinistra (fino a y ~125),
   come chiesto da Simone il 7/10/2026. */
.stage[data-sport="basket"] .bk-head{
  position:absolute;top:140px;left:var(--safe);right:var(--safe);z-index:5;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
}
.stage[data-sport="basket"] .bk-title{
  grid-column:2;font-size:46px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.stage[data-sport="basket"] .bk-sub{
  grid-column:3;justify-self:end;font-size:26px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
  color:var(--bk-yellow);text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.stage[data-sport="basket"] .bk-rule{
  position:absolute;top:208px;left:var(--safe);right:var(--safe);height:3px;background:var(--bk-orange);z-index:5;
}

/* etichette gialle sopra le colonne (come "TIRI DA 2", "CASA", "OSPITE" nel riferimento) */
.stage[data-sport="basket"] .bk-labels{
  display:flex;justify-content:space-between;align-items:center;
  font-size:19px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-yellow);
}

/* ---------- CLASSIFICA: due pannelli neri con le squadre ---------- */
/* La fascia bassa (sotto 950px) resta libera per il crawler e il bug «Basket & Co.»: con tante
   squadre le righe si abbassano da sole (--rows = righe della colonna più lunga, impostato da renderClassificaBasket). */
.stage[data-sport="basket"] .bk-body{position:absolute;top:238px;left:var(--safe);right:var(--safe);z-index:5;}
.stage[data-sport="basket"] .bk-table{display:flex;gap:24px;align-items:flex-start;}
.stage[data-sport="basket"] .bk-panel{
  flex:1;min-width:0;padding:10px 30px 14px;
  background:var(--bk-panel);border:1px solid var(--bk-edge);border-radius:26px;
}
.stage[data-sport="basket"] .bk-panel .bk-labels{height:40px;padding-left:56px;}
.stage[data-sport="basket"] .bk-row{
  position:relative;display:flex;align-items:center;
  height:min(56px, calc(560px / var(--rows, 10)));
  border-top:1px solid rgba(255,255,255,.08);
}
/* barretta della zona sul bordo del pannello, come le barre gialle del riferimento */
.stage[data-sport="basket"] .bk-row::before{
  content:'';position:absolute;left:-31px;top:12%;bottom:12%;width:8px;background:transparent;
}
.stage[data-sport="basket"] .bk-row.promozione::before{background:var(--bk-promozione);}
.stage[data-sport="basket"] .bk-row.playoff::before{background:var(--bk-playoff);}
.stage[data-sport="basket"] .bk-row.playin::before{background:var(--bk-playin);}
.stage[data-sport="basket"] .bk-row.playout::before{background:var(--bk-playout);}
.stage[data-sport="basket"] .bk-row.retrocessione::before{background:var(--bk-retrocessione);}
.stage[data-sport="basket"] .bk-pos{flex:0 0 56px;font-size:24px;font-weight:700;color:var(--bk-muted);}
.stage[data-sport="basket"] .bk-name{
  flex:1;min-width:0;overflow:hidden;white-space:nowrap;
  font-size:30px;font-weight:700;text-transform:uppercase;
}
.stage[data-sport="basket"] .bk-pts{flex:0 0 auto;min-width:64px;padding-left:18px;text-align:right;font-size:36px;font-weight:700;}

/* legenda delle zone: pannello nero con bordo giallo, come il box in basso del riferimento.
   Allineata a destra: a sinistra in onda c'è il bug «Basket & Co.».
   flex e non inline-flex: html2canvas non disegna il testo dentro gli inline-flex. */
.stage[data-sport="basket"] .bk-legend{
  display:flex;width:fit-content;gap:36px;margin:18px 0 0 auto;padding:12px 28px;
  background:#000;border:1.5px solid var(--bk-yellow);border-radius:18px;
  font-size:19px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.stage[data-sport="basket"] .bk-legend span{display:flex;align-items:center;gap:10px;}
.stage[data-sport="basket"] .bk-legend i{width:8px;height:22px;}
.stage[data-sport="basket"] .bk-legend .promozione i{background:var(--bk-promozione);}
.stage[data-sport="basket"] .bk-legend .playoff i{background:var(--bk-playoff);}
.stage[data-sport="basket"] .bk-legend .playin i{background:var(--bk-playin);}
.stage[data-sport="basket"] .bk-legend .playout i{background:var(--bk-playout);}
.stage[data-sport="basket"] .bk-legend .retrocessione i{background:var(--bk-retrocessione);}

/* ---------- RISULTATI: una barra per partita, come il pannello del punteggio del riferimento ---------- */
.stage[data-sport="basket"] .bk-matches{display:flex;flex-direction:column;gap:12px;}
.stage[data-sport="basket"] .bk-body > .bk-labels{height:34px;padding:0 36px;}
.stage[data-sport="basket"] .bk-match{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);align-items:center;
  height:min(62px, calc((628px - (var(--rows, 10) - 1) * 12px) / var(--rows, 10)));
  padding:0 36px;background:var(--bk-panel);border:1px solid var(--bk-edge);border-radius:10px;
}
.stage[data-sport="basket"] .bk-match::before,
.stage[data-sport="basket"] .bk-match::after{
  content:'';position:absolute;top:-1px;bottom:-1px;width:10px;background:var(--bk-yellow);
}
.stage[data-sport="basket"] .bk-match::before{left:-1px;}
.stage[data-sport="basket"] .bk-match::after{right:-1px;}
.stage[data-sport="basket"] .bk-casa,
.stage[data-sport="basket"] .bk-ospite{
  min-width:0;overflow:hidden;white-space:nowrap;font-size:30px;font-weight:700;text-transform:uppercase;
}
.stage[data-sport="basket"] .bk-ospite{text-align:right;}
.stage[data-sport="basket"] .bk-center{display:flex;align-items:center;justify-content:center;gap:22px;}
.stage[data-sport="basket"] .bk-score{flex:0 0 100px;font-size:44px;font-weight:700;}
.stage[data-sport="basket"] .bk-score:first-child{text-align:right;}
.stage[data-sport="basket"] .bk-dash{flex:0 0 36px;height:5px;background:var(--bk-yellow);}
.stage[data-sport="basket"] .bk-chip{
  padding:6px 16px;border:2px solid var(--bk-yellow);border-radius:6px;
  font-size:22px;font-weight:700;letter-spacing:.5px;color:var(--bk-yellow);
}
.stage[data-sport="basket"] .bk-chip.live{background:#d11f2e;border-color:#d11f2e;color:#fff;}