:root{
  /* Dark base */
  --bg0:#06070b;
  --bg1:#0a0d14;
  --text:#eef3ff;
  --muted:#9aa6c3;
  --line:rgba(255,255,255,.08);
  --shadow: 0 18px 60px rgba(0,0,0,.50);
  --r:18px;

  /* New “wrapped” palette */
  --p1:#8b5cf6;   /* violet */
  --p2:#22c55e;   /* neon green */
  --p3:#f97316;   /* orange */
  --p4:#ec4899;   /* pink */
  --p5:#38bdf8;   /* sky (non dominante) */

  --glass: rgba(255,255,255,.05);
  --glass2: rgba(255,255,255,.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 15% -10%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(1000px 650px at 95% 0%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(900px 700px at 60% 120%, rgba(236,72,153,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* ===== Intro ===== */
.intro{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  z-index:999;
}
.intro.show{display:flex}
.introFx{
  position:absolute; inset:0;
  overflow:hidden;
}
.introFx .grid{
  position:absolute; inset:-40%;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: rotate(10deg);
  opacity:.12;
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 70%);
}
.orb{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(40px);
  opacity:.65;
  animation: floaty 5.5s ease-in-out infinite;
}
.o1{left:-140px; top:-160px; background:rgba(139,92,246,.55)}
.o2{right:-160px; top:-120px; background:rgba(34,197,94,.35); animation-duration:6.8s}
.o3{left:20%; bottom:-220px; background:rgba(236,72,153,.32); animation-duration:7.6s}

@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,18px,0) scale(1.05)}
}

.introCard{
  position:relative;
  width:min(520px, calc(100vw - 36px));
  padding:22px 20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  text-align:center;
  animation: pop 420ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pop{
  from{opacity:0; transform:translateY(14px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.introLogo{
  width:64px; height:64px;
  margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:20px;
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,197,94,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  font-size:26px;
}
.introTitle{font-weight:900; letter-spacing:.2px; font-size:20px}
.introSub{color:var(--muted); font-size:13px; margin-top:6px}
.introHint{color:rgba(255,255,255,.55); font-size:12px; margin-top:12px}

.bar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  margin-top:16px;
  border:1px solid rgba(255,255,255,.08);
}
.barFill{
  height:100%;
  width:18%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p4), var(--p3));
  animation: loadbar 1.2s ease-in-out infinite; 
}
@keyframes loadbar{
  0%{transform:translateX(-10%)}
  50%{transform:translateX(240%)}
  100%{transform:translateX(-10%)}
}
.intro.hide{
  animation: fadeOut 500ms ease forwards;
}
@keyframes fadeOut{
  to{opacity:0; transform:scale(1.02); pointer-events:none}
}

/* ===== Header ===== */
.top{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6,7,11,.90), rgba(6,7,11,.62));
  border-bottom: 1px solid rgba(255,255,255,.08);

  /* più aria sopra/sotto (fix “testo tagliato”) */
  padding: 18px 0 14px;
}

/* header FULL width (logo a sinistra, tag a destra) */
.top .brand,
.top .tabs{
  max-width: none;
  margin: 0;
  padding: 0 18px;
  width: 100%;
}

/* brand: left logo + right tags, titolo centrato sul viewport via absolute */
.brand{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px; /* evita clipping verticale */
}

.brandLeft{ display:flex; align-items:center; justify-content:flex-start; }

.logo{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,197,94,.14));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.52);
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
}

.logo:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(0,0,0,.56);
}
.logo:active{ transform: translateY(0); }

.brandCenter{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  /* evita che “stia in mezzo a logo e tag” */
  width: min(760px, 60vw);
  pointer-events: none;
}

.title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 26px;
  line-height: 1.2;      /* più respiro */
  padding-top: 2px;      /* fix: niente “taglio” sopra */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* via “Aggiornato: …” */
.subtitle{ display: none; }

.season{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.pill{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 850;
}

/* STAGIONE 2026 “come box logo” (no violetto piatto) */
.pill.seasonTag{
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,197,94,.12));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}

.pill.ghost{
  font-weight: 800;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.03);
}

/* accenti migliori + crescendo importanza: BO1 < BO3 < BO5 */
.pill.bo1{
  border-color: rgba(56,189,248,.28);
  background: rgba(56,189,248,.06);
  color: rgba(233,247,255,.88);
}
.pill.bo3{
  border-color: rgba(34,197,94,.34);
  background: rgba(34,197,94,.09);
  color: rgba(235,255,244,.92);
}
.pill.bo5{
  border-color: rgba(249,115,22,.42);
  background: rgba(249,115,22,.14);
  color: rgba(255,244,235,.95);
  box-shadow: 0 10px 28px rgba(249,115,22,.10);
}

/* ===== Tabs ===== */
.tabs{
  margin-top: 14px;      /* più spacing tra le 2 righe */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* RIMOSSA la barretta arcobaleno (underline) */
.tabs::after{ display:none !important; }

.tab{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* hover “gamified clean”: si colora con una wave morbida */
.tab::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(139,92,246,.22),
    rgba(34,197,94,.14),
    rgba(56,189,248,.12)
  );
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .18s ease, transform .22s ease;
  z-index: -1;
}
.tab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
}
.tab:hover::before{
  opacity: 1;
  transform: translateX(0);
}

/* active: evidente ma pulito (senza underline) */
.tab.active{
  border-color: rgba(139,92,246,.50);
  background: linear-gradient(90deg, rgba(139,92,246,.18), rgba(34,197,94,.10));
}

/* mobile: evita sovrapposizioni tra titolo e tag */
@media (max-width: 900px){
  .brandCenter{
    position: static;
    transform: none;
    width: auto;
    pointer-events: auto;
    text-align: left;
  }
  .brand{
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
  }
  .season{
    grid-column: 1 / 3;
    justify-content: center;
    margin-top: 10px;
  }
}


.wrap{
  max-width: none;
  width: min(1200px, calc(100vw - 36px)); /* cambia 1600 */
  margin: 18px auto;
  padding: 0 18px 30px;
}

.panel{display:none}
.panel.show{display:block}

/* ===== Cards ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;
}
.cardHero{
  position:relative;
  overflow:hidden;
}
.cardHero:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 240px at 10% 0%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(520px 260px at 90% 0%, rgba(34,197,94,.14), transparent 60%),
              radial-gradient(520px 260px at 55% 110%, rgba(236,72,153,.12), transparent 60%);
  pointer-events:none;
}
.cardHero > *{position:relative}

.card.danger{border-color: rgba(255,80,80,.35); background: rgba(255,80,80,.08)}
.cardHead{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  margin-bottom:12px;
}
h2{margin:0; font-size:16px}
.muted{color:var(--muted); font-size:12px}

/* ===== Podium ===== */
.podium{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap:12px;
  margin: 8px 0 14px;
}
.pod{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:12px;
  position:relative;
  overflow:hidden;
  transform: translateY(8px);
  opacity:0;
  animation: podIn 520ms cubic-bezier(.2,.9,.2,1) forwards;
}
.pod:nth-child(1){animation-delay: 140ms}
.pod:nth-child(2){animation-delay: 40ms}
.pod:nth-child(3){animation-delay: 220ms}
@keyframes podIn{
  to{transform: translateY(0); opacity:1}
}
.pod:after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(280px 140px at 10% 0%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.podRank{
  font-weight:950;
  font-size:12px;
  color:rgba(255,255,255,.72);
  display:flex; align-items:center; gap:8px;
}
.medal{font-size:16px}
.podName{
  margin-top:6px;
  font-weight:950;
  letter-spacing:.2px;
  font-size:15px;
}
.podPts{
  margin-top:6px;
  color:rgba(255,255,255,.78);
  font-size:12px;
}
.podTag{
  margin-top:10px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
}
.pod.w1 .podTag{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10)}
.pod.w2 .podTag{border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.10)}
.pod.w3 .podTag{border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.10)}

/* ===== Race ===== */
.raceWrap{
  margin: 12px 0 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 18px;
  padding:12px;
}
.raceHead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.raceTitle{font-weight:950}
.race{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lane{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:10px;
  align-items:center;
}
@media (max-width: 680px){
  .lane{grid-template-columns: 1fr}
}

.laneName{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.avatar{
  width:30px; height:30px;
  border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,197,94,.14));
  font-weight:950;
  font-size:12px;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}
.nameTxt{
  font-weight:900;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.metaMini{color:var(--muted); font-size:12px}

.track{
  position:relative;
  height:44px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(380px 120px at 0% 50%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(380px 120px at 100% 50%, rgba(34,197,94,.10), transparent 60%);
  overflow:hidden;
}
.track:before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.14) 0px,
    rgba(255,255,255,.14) 2px,
    transparent 2px,
    transparent 26px
  );
  opacity:.09;
}
.finish{
  position:absolute; top:6px; bottom:6px; right:10px;
  width:10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.runner{
  position:absolute;
  left:10px; top:7px;
  width:30px; height:30px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:950;
  font-size:12px;
  color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(236,72,153,.28), rgba(249,115,22,.14));
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
  transform: translateX(0);
  opacity:0;
}
.runner:after{
  content:"";
  position:absolute; inset:-10px;
  background: radial-gradient(circle, rgba(236,72,153,.28), transparent 60%);
  filter: blur(10px);
  opacity:.8;
  z-index:-1;
}
.runner.go{
  opacity:1;
  transition:
    transform var(--dur, 1200ms) cubic-bezier(.2,.9,.2,1),
    opacity 220ms ease;
}

/* ===== Table ===== */
.tableWrap{overflow:auto}
.table{width:100%; border-collapse:collapse; min-width:780px}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:13px;
}
.table th{color:rgba(255,255,255,.62); font-weight:900; font-size:12px}
.badge{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
  font-weight:850;
}
.badge.accent{
  border-color: rgba(139,92,246,.35);
  background: linear-gradient(90deg, rgba(139,92,246,.14), rgba(34,197,94,.08));
}
.badge.gold{
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.10)
}

/* ===== History ===== */
.list{display:flex; flex-direction:column; gap:10px}
.item{
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  transition:.18s ease;
}
.item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
}
.itemTop{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.itemTitle{font-weight:950}
.itemMeta{color:var(--muted); font-size:12px}
.itemBody{margin-top:6px; font-size:13px}
.kv{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.sep{opacity:.35}

/* ===== Footer ===== */
.foot{
  color:rgba(255,255,255,.55);
  font-size:12px;
  text-align:center;
  padding:20px 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .introCard, .pod, .runner, .tab, .item{animation:none!important; transition:none!important}
  .barFill{animation:none!important}
}

/* Hide page under intro */
.top, .wrap, .foot{
  transition: opacity 650ms ease, transform 650ms ease, filter 650ms ease;
}

body.is-loading{
  overflow: hidden;
}
body.is-loading .top,
body.is-loading .wrap,
body.is-loading .foot{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(12px);
  pointer-events: none;
}

/* Table reveals after race */
#ranking .tableWrap{
  transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
}
body.race-animating #ranking .tableWrap{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  pointer-events: none;
}



/* ===== Match Highlight Toast (WOW) ===== */
.toastHL{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: none;
}

.toastHL .toastCard{
  width: min(560px, calc(100vw - 28px));
  background: rgba(15,27,29,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  overflow: hidden;

  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.9,.2,1);
}

.toastHL.show{ pointer-events: auto; }
.toastHL.show .toastCard{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toastHL.hide .toastCard{
  opacity: 0;
  transform: translateY(14px) scale(.99);
}

.toastTop{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.toastIcon{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,.26), rgba(34,197,94,.14));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  font-size: 18px;
  flex: 0 0 auto;
}

.toastTopText{ min-width: 0; }
.toastTitle{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.15;
}
.toastName{
  font-weight: 950;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toastClose{
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.toastClose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }

.toastBody{ padding: 12px 14px 14px; }
.toastRow{ display:flex; gap:10px; align-items:center; margin-bottom: 10px; }

.toastPill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 900;
}

.toastPill.bo1{ border-color: rgba(56,189,248,.32); background: rgba(56,189,248,.08); }
.toastPill.bo3{ border-color: rgba(34,197,94,.38);  background: rgba(34,197,94,.10); }
.toastPill.bo5{ border-color: rgba(249,115,22,.48); background: rgba(249,115,22,.14); box-shadow: 0 10px 28px rgba(249,115,22,.10); }

.toastLine{
  font-size: 14px;
  line-height: 1.35;
}
.toastLine strong{ font-weight: 950; }

.toastMeta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.toastBar{
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, rgba(139,92,246,.9), rgba(34,197,94,.75), rgba(56,189,248,.7));
  transform-origin: left;
  animation: toastBar var(--toastDur, 2800ms) linear forwards;
}

@keyframes toastBar{
  from{ transform: scaleX(1); opacity: 1; }
  to  { transform: scaleX(0); opacity: .25; }
}


/* ===== Fix: content max width ===== */
:root{ --contentMax: 1360px; } /* <-- prova 1240 / 1280 / 1360 */
.wrap{ max-width: var(--contentMax) !important; }

/* ===== Fix: section title size ===== */
:root{ --secTitle: 17px; }  /* <-- cambia qui */
#ranking .cardHead h2,
#ranking .raceTitle,
#history .cardHead h2,
#schedule .cardHead h2{
  font-size: var(--secTitle) !important;
}

/* ===== Fix: ranking card spacing ===== */
#ranking .cardHero{ display:flex; flex-direction:column; gap: 24px; } /* <-- aumenta qui */
#ranking .cardHead{ margin-bottom: 0 !important; }
#ranking .podium{ margin: 0 !important; }
#ranking .raceWrap{ margin: 0 !important; }

/* ===== Fix: scrollbar shift ===== */
/* evita shift quando la scrollbar compare/scompare */
html{ scrollbar-gutter: stable; }
body{ overflow-y: scroll; } /* fallback */

/* ===== Fix: header spacing ===== */
.top{ display:flex; flex-direction:column; gap: 12px; }  /* <-- aumenta qui */
.tabs{ margin-top: 0 !important; }

/* ===== Fix: background full-page + sticky footer ===== */
html, body{
  height: auto !important;
  min-height: 100% !important;
}

body{
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
}

.wrap{
  flex: 1 0 auto;
}

.foot{
  margin-top: auto;
}



/* ===== Mobile cleanup ===== */
body{ overflow-x: hidden; } /* evita sforamenti pagina */

@media (max-width: 560px){
  /* header più compatto */
  .top{ padding: 14px 0 10px; gap: 10px; }
  .top .brand, .top .tabs{ padding: 0 12px; }
  .title{ font-size: 20px; }

  /* tag più piccoli */
  .pill{ font-size: 11px; padding: 6px 9px; }
  .tabs{ gap: 8px; }
  .tab{ padding: 9px 12px; }

  /* contenuto full-width (senza “sforare”) */
  .wrap{ width: 100%; max-width: none; padding: 0 12px 24px; }
  .card{ padding: 14px; }

  /* podio: 1 colonna */
  .podium{ grid-template-columns: 1fr; gap: 10px; margin: 6px 0 12px; }

  /* tabella: nascondi colonne pesanti su mobile */
  .table{ min-width: 0; }
  #rankingTable th:nth-child(4),
  #rankingTable td:nth-child(4),
  #rankingTable th:nth-child(5),
  #rankingTable td:nth-child(5),
  #rankingTable th:nth-child(6),
  #rankingTable td:nth-child(6){
    display: none;
  }
}

/* ===== Mobile hardening ===== */
body{ overflow-x: hidden; }
.top, .wrap, .card{ overflow-x: clip; }

@media (max-width: 560px){
  /* contenuto più largo e respirabile */
  .wrap{
    max-width: none !important;
    width: 100% !important;
    margin: 12px auto !important;
    padding: 0 12px 22px !important;
  }

  .card{ padding: 14px !important; }

  /* header card: titolo + frase su 2 righe */
  .cardHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* podio 1 colonna */
  .podium{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 8px 0 12px !important;
  }

  /* race: header su 2 righe */
  .raceHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* tabella: non “rompe” la pagina */
  .table{ min-width: 0 !important; }
  .tableWrap{ -webkit-overflow-scrolling: touch; }

  /* su mobile nascondi colonne pesanti */
  #rankingTable th:nth-child(4),
  #rankingTable td:nth-child(4),
  #rankingTable th:nth-child(5),
  #rankingTable td:nth-child(5),
  #rankingTable th:nth-child(6),
  #rankingTable td:nth-child(6){
    display: none;
  }

  /* storico / programma: header item in colonna (evita overflow) */
  .itemTop{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


/* ===== iOS/Safari viewport fix: footer sempre giù “bene” ===== */
body{ min-height: 100svh; }
@supports (height: 100dvh){
  body{ min-height: 100dvh; }
}
.foot{
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
}



/* ===== Mobile header: row1 logo+tags, row2 tabs, hide title ===== */
@media (max-width: 560px){
  /* header in 2 righe */
  .top{ gap: 10px !important; }

  /* riga 1: brand come riga unica */
  .brand{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: unset !important;
  }

  /* niente titolo su mobile */
  .brandCenter{ display: none !important; }

  /* logo a sinistra, tag a destra */
  .brandLeft{ flex: 0 0 auto; }
  .season{
    flex: 1 1 auto;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* pill più compatte per stare su 1 riga */
  .pill{ font-size: 11px !important; padding: 6px 8px !important; }
  .logo{ width: 42px !important; height: 42px !important; border-radius: 14px !important; }

  /* riga 2: tabs sotto */
  .tabs{
    margin-top: 0 !important;
    justify-content: center !important;
  }
}