:root{
  --navy:#02042f;
  --navy2:#11164b;
  --red:#ff1515;
  --pink:#ff0b61;
  --yellow:#ffd32a;
  --bg:#f3f5fa;
  --card:#fff;
  --text:#111425;
  --muted:#6d7485;
  --line:#e2e6ef;
  --green:#16894b;
  --softgreen:#eaf7ef;
  --softred:#fff0f1;
  --shadow:0 10px 28px rgba(8,14,45,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(rgba(243,245,250,.74),rgba(243,245,250,.84)),
    url("assets/napoli-opening-bg.jpg") center top / cover fixed no-repeat;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif
}
button,select{font:inherit}

.site-header{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;
  border-bottom:6px solid var(--red)
}
.site-header:before,.site-header:after{
  content:"";position:absolute;background:var(--red);transform:rotate(-45deg)
}
.site-header:before{width:430px;height:105px;right:2%;top:18px}
.site-header:after{width:520px;height:120px;right:30%;bottom:-45px}
.header-inner{
  max-width:1180px;margin:auto;padding:26px 18px 30px;
  display:flex;align-items:center;gap:20px;position:relative;z-index:2
}
.logo{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.header-copy h1{margin:0;font-size:clamp(2rem,5vw,3.4rem);line-height:1}
.header-copy p{margin:6px 0 0;font-size:clamp(1.1rem,2.4vw,1.55rem);font-weight:800}
.event-line{margin-top:10px;color:#dce0ff;font-size:.92rem}

main{max-width:1180px;margin:auto;padding:18px 16px 42px}
.main-nav{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin
}
.nav-btn{
  flex:0 0 auto;border:1px solid #dfe3ed;background:#fff;color:var(--navy);
  padding:11px 14px;border-radius:12px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(5,12,45,.05)
}
.nav-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.statusbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--muted);font-size:.82rem;margin:0 0 14px
}
.refresh-btn{border:0;background:transparent;color:var(--navy);font-weight:800;cursor:pointer;padding:4px 0}

.view{display:none}
.active-view{display:block}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin:4px 0 12px
}
.section-head h2{margin:0;font-size:1.45rem}
.live-head>div{display:flex;align-items:center;gap:9px}
.live-dot{width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,21,21,.55);animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,21,21,0)}100%{box-shadow:0 0 0 0 rgba(255,21,21,0)}}

.today-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.today-card,.match-card,.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)
}
.today-card{
  padding:14px;display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center
}
.today-card.played{background:var(--softgreen)}
.today-meta{display:flex;flex-direction:column;gap:3px;text-align:center}
.today-meta b{color:var(--navy);font-size:1rem}
.today-meta span{color:var(--muted);font-size:.78rem}
.today-teams{min-width:0}
.today-teams strong{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-teams small{display:block;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-score{font-size:1.2rem;font-weight:950;color:var(--navy);white-space:normal}
.ok{color:var(--green)}

.pool-hero{
  background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;border-radius:18px;
  padding:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;overflow:hidden;position:relative
}
.pool-hero:after{content:"";position:absolute;width:260px;height:70px;background:var(--red);right:-40px;top:20px;transform:rotate(-42deg)}
.pool-hero>div{position:relative;z-index:1}
.pool-hero h2{margin:2px 0 2px;font-size:1.7rem}
.pool-hero p{margin:0;color:#dce0ff}
.eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:950;color:var(--yellow)}
.pool-switch{display:flex;gap:7px}
.pool-mini{
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  width:40px;height:40px;border-radius:10px;font-weight:950;cursor:pointer
}
.pool-mini.active{background:#fff;color:var(--navy)}

.pool-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:14px;align-items:start}
.card{overflow:hidden}
.card-title{padding:13px 15px;background:var(--navy);color:#fff;font-weight:950}
.match-list{padding:10px}
.match-card{
  box-shadow:none;border-radius:12px;padding:11px 12px;margin-bottom:8px;
  display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center
}
.match-card.played{background:var(--softgreen)}
.match-date{font-size:.78rem;color:var(--muted)}
.match-date b{display:block;color:var(--navy);font-size:.9rem}
.match-main{min-width:0}
.match-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-main small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.match-score{font-weight:950;font-size:1.05rem;white-space:normal}

.standings-table{padding:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.standing-row{
  display:grid;grid-template-columns:28px 28px minmax(120px,1fr) 32px 38px 32px 34px 34px 58px 46px 46px 58px;gap:4px;min-width:690px;
  align-items:center;padding:8px;border-radius:8px;font-size:.9rem
}
.standing-row.qual{background:var(--softgreen)}
.standing-row.out{background:var(--softred)}
.standing-head{background:#eef2f8!important;color:var(--muted);font-size:.74rem;font-weight:950}
.standing-row span:not(.team){text-align:center}
.standing-row .team{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend{padding:0 14px 13px;color:var(--muted);font-size:.74rem}

.knockout-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ko-col{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.ko-col h3{margin:0;background:#2c66a8;color:#fff;padding:13px;text-align:center}
.ko-col.sofia h3{background:#ca1717}
.ko-row{display:grid;grid-template-columns:52px 1fr 28px 1fr 78px;gap:6px;align-items:center;padding:10px;border-bottom:1px solid var(--line);font-size:.86rem}
.ko-sep{padding:8px 10px;background:#f2f4f8;font-weight:900;color:var(--navy);font-size:.78rem}
.ko-note{margin-top:10px;color:var(--muted);font-size:.82rem}

.producer{
  margin-top:28px;padding:22px;border-radius:18px;background:var(--navy);color:#fff;
  text-align:center;border-bottom:6px solid var(--pink);box-shadow:var(--shadow)
}
.producer-kicker{font-size:.74rem;letter-spacing:.16em;font-weight:900;color:#cbd0ff}
.producer-name{font-size:clamp(1.55rem,4vw,2.3rem);font-weight:950;margin:4px 0 2px}
.producer-sub{font-size:.82rem;color:#d9ddf7}

.loader{text-align:center;padding:20px;color:var(--muted)}
.error{background:#fff1f1;border:1px solid #ffd2d2;color:#981b1b;padding:14px;border-radius:12px}
.muted{color:var(--muted)}

@media(max-width:820px){
  .today-grid{grid-template-columns:1fr}
  .pool-layout{grid-template-columns:1fr}
  .knockout-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .header-inner{padding:18px 12px 22px}
  .logo{width:68px;height:68px}
  main{padding:12px 10px 28px}
  .nav-btn{padding:10px 12px;font-size:.86rem}
  .today-card{grid-template-columns:48px 1fr auto;padding:11px 10px}
  .today-teams strong{font-size:.92rem}
  .pool-hero{padding:14px;align-items:flex-start}
  .pool-switch{gap:4px}
  .pool-mini{width:34px;height:34px}
  .match-card{grid-template-columns:64px 1fr auto;padding:10px 9px}
  .match-main small{font-size:.72rem}
  .ko-row{grid-template-columns:44px 1fr 22px 1fr 68px;font-size:.77rem}
}

.mobile-date{display:none}
.warning{background:#fff8dc;border:1px solid #f2d97b;color:#6c5700;padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:.84rem}
@media(max-width:560px){
  .desktop-date{display:none}
  .mobile-date{display:inline}
  .match-card{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "date score"
      "main score";
    gap:4px 10px;
    align-items:center;
  }
  .match-date{grid-area:date;display:flex;gap:8px;align-items:center;font-size:.76rem}
  .match-date b{display:inline;font-size:.82rem}
  .match-main{grid-area:main}
  .match-main strong{font-size:.92rem;white-space:normal;overflow:visible;text-overflow:clip}
  .match-main small{font-size:.70rem}
  .match-score{grid-area:score;align-self:center}
}

@media(max-width:560px){
  .standings-table{
    margin:0 -2px;
    padding:8px 6px 10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .standing-row{
    font-size:.76rem;
    padding:7px 5px;
    min-width:500px;
    grid-template-columns:
      24px 24px 118px
      28px 34px 28px 30px 30px
      48px 38px 38px 48px;
    gap:3px;
  }
  .standing-head{
    font-size:.64rem;
    white-space:nowrap;
  }
  .standing-row .team{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .legend{font-size:.68rem;line-height:1.4}
}

.score-sets{font-weight:750;font-size:.88em}

.sets-under{
  margin-top:4px;
  font-weight:900;
  font-size:.92rem;
  line-height:1.2;
  white-space:normal;
}
.today-score,.match-score{
  font-weight:950;
  white-space:nowrap;
}

/* v1.4.7 — mobile readability: risultato + parziali uniti */
.mobile-scoreline{display:none}
.card-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-top:4px;box-shadow:0 0 0 4px rgba(0,0,0,.035)}
.status-dot.done{background:#14945e}
.status-dot.live{background:#ff1c28}
.status-dot.scheduled{background:#ffd12e}
.hl-btn{display:inline-flex;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;background:#fff;border:1px solid #ffd0d4;text-decoration:none;box-shadow:0 2px 7px rgba(0,0,0,.05)}
.yt-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:18px;border-radius:6px;background:#ff0000;color:#fff;font-size:10px;padding-left:1px}

@media(max-width:560px){
  .desktop-only{display:none!important}
  .mobile-scoreline{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:7px;color:var(--navy);line-height:1.28}
  .mobile-scoreline b{font-size:1.12rem;font-weight:950;flex:0 0 auto}
  .mobile-scoreline span:not(.score-divider){font-size:.91rem;font-weight:850;overflow-wrap:normal;word-break:normal}
  .score-divider{font-weight:900;color:var(--muted)}

  .today-card{
    grid-template-columns:62px minmax(0,1fr) auto;
    grid-template-areas:"meta teams actions";
    align-items:start;
    gap:10px;
    padding:14px 12px;
  }
  .today-meta{grid-area:meta;text-align:left;align-items:flex-start;gap:4px;padding-top:1px}
  .today-meta b{font-size:1.02rem}
  .today-meta span:not(.status-dot){font-size:.79rem}
  .today-teams{grid-area:teams;min-width:0}
  .today-teams strong{font-size:1.02rem;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .today-teams small{font-size:.78rem;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;margin-top:7px}
  .today-card .card-actions{grid-area:actions;align-self:end;flex-direction:column;justify-content:flex-end;height:100%}

  .match-card{
    grid-template-columns:76px minmax(0,1fr) auto;
    grid-template-areas:"date main actions";
    align-items:start;
    gap:10px;
    padding:12px 10px;
  }
  .match-date{grid-area:date;display:flex;flex-direction:column;gap:3px;align-items:flex-start;font-size:.76rem;padding-top:1px}
  .match-date b{font-size:.86rem}
  .match-main{grid-area:main;min-width:0}
  .match-main strong{font-size:.96rem;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .match-main small{font-size:.72rem;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;margin-top:6px}
  .match-card .card-actions{grid-area:actions;align-self:end;flex-direction:column;height:100%;justify-content:flex-end}
  .hl-btn{width:40px;height:40px}
}

@media(max-width:390px){
  .today-card{grid-template-columns:56px minmax(0,1fr) auto}
  .match-card{grid-template-columns:68px minmax(0,1fr) auto}
  .mobile-scoreline span:not(.score-divider){font-size:.86rem}
  .today-teams strong,.match-main strong{font-size:.94rem}
}


/* v1.4.8 — sfondo scenico Napoli + fase eliminazione dinamica */
.knockout-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.ko-col.milano{grid-column:1/-1}
.ko-col.torino h3{background:#2c66a8}
.ko-col.sofia h3{background:#ca1717}
.ko-col.milano h3{background:linear-gradient(100deg,#02042f,#262b66)}
.ko-match-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 82px;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
}
.ko-code{font-weight:950;color:var(--navy)}
.ko-main{min-width:0}
.ko-main strong{display:block;font-size:.9rem;line-height:1.25}
.ko-main small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}
.ko-main .ko-sets{font-weight:800;color:#444d64}
.ko-vs{font-weight:700;color:var(--muted);font-size:.78em}
.ko-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:var(--navy)}
.ko-status .status-dot{margin:0}
.ko-status b{font-size:1rem}
.ko-note{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(4px);
  border:1px solid rgba(226,230,239,.9);
  border-radius:12px;
  padding:10px 12px;
}
.today-card,.match-card,.card,.ko-col{
  backdrop-filter:saturate(.98);
}

@media(max-width:820px){
  body{
    background:
      linear-gradient(rgba(243,245,250,.93),rgba(243,245,250,.97)),
      url("assets/napoli-opening-bg.jpg") center top / cover scroll no-repeat;
  }
  .knockout-grid{grid-template-columns:1fr}
  .ko-col.milano{grid-column:auto}
}
@media(max-width:560px){
  .ko-match-row{grid-template-columns:54px minmax(0,1fr) 62px;padding:10px 9px;gap:8px}
  .ko-main strong{font-size:.84rem}
  .ko-main small{font-size:.69rem}
  .ko-status b{font-size:.92rem}
}


/* v1.4.9 — knockout robusto e pronto fino alle finali */
#knockoutContent{min-height:180px}
.ko-code span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:5px 7px;
  border-radius:8px;
  background:#eef2f8;
  font-size:.76rem;
  letter-spacing:.02em;
}
.ko-col{background:rgba(255,255,255,.94)}
.ko-sep{
  position:sticky;
  top:0;
  z-index:1;
  background:#f2f5fa;
  border-top:1px solid #e1e6ef;
  border-bottom:1px solid #e1e6ef;
}
@media(max-width:560px){
  .ko-code span{min-width:50px;padding:4px 5px;font-size:.69rem}
}


/* v1.4.11 — Qualified badge */
.q-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#138a52;
  color:#fff;
  font-size:.69rem;
  font-weight:950;
  line-height:1;
  box-shadow:0 0 0 2px rgba(19,138,82,.12);
}
.q-badge-legend{
  vertical-align:middle;
  margin-right:3px;
}


/* v1.4.12 — public clean visual layer */
main{
  position:relative;
}
main::before{
  content:"";
  position:absolute;
  inset:8px 4px 24px;
  z-index:-1;
  border-radius:24px;
  background:rgba(248,249,252,.58);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.today-card,.match-card,.card,.ko-col{
  background:rgba(255,255,255,.96);
  border-color:rgba(222,227,238,.96);
  backdrop-filter:blur(7px) saturate(.96);
  -webkit-backdrop-filter:blur(7px) saturate(.96);
}
.today-card.played,.match-card.played{
  background:rgba(234,247,239,.96);
}
.standing-row.qual{
  background:rgba(234,247,239,.96);
}
.standing-row.out{
  background:rgba(255,240,241,.96);
}
.nav-btn{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.statusbar,.section-head{
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.ko-note{
  background:rgba(255,255,255,.94);
}

@media(max-width:820px){
  body{
    background:
      linear-gradient(rgba(243,245,250,.80),rgba(243,245,250,.90)),
      url("assets/napoli-opening-bg.jpg") center top / cover scroll no-repeat;
  }
  main::before{
    background:rgba(248,249,252,.64);
  }
}


/* v1.4.17 — mobile standings alignment fix */
.standing-row > span{min-width:0;white-space:nowrap}
.standing-row .team{white-space:nowrap}


/* v1.4.18 — mobile standings compact */
@media(max-width:560px){
  .standings-table{
    scrollbar-width:thin;
  }
  .standing-row > span{
    min-width:0;
  }
}


/* v1.4.19 — social links footer */
.producer-socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:14px;
}
.producer-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.producer-socials a:hover,
.producer-socials a:focus-visible{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.72);
  transform:translateY(-1px);
  outline:none;
}
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:.76rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.02em;
}
.social-facebook{font-family:Arial,sans-serif;font-size:1rem}
.social-instagram{font-size:1.05rem}
.social-x{font-size:.98rem}
.social-linkedin{font-size:.72rem;letter-spacing:-.05em}
@media(max-width:560px){
  .producer-socials{gap:8px;margin-top:12px}
  .producer-socials a{width:32px;height:32px}
}