:root {
  --bg: #fbfdff;
  --card: #fff;
  --text-main: #0f172a;
  --text-sec: #64748b;
  --border: #e6eef6;
  --nav-bg: #fff;
  --muted: #64748b;
  --accent: #4f46e5;
  --dark: #0f172a;
  --green: #10b981;
  --yellow: #fef3c7;
  --yellow-strong: #fde68a;
  --red: #ef4444;
  --pale-1: #f7f8fb;
  --max-width: 1200px;
  --pill: #0b0b0b;
  --sep: rgba(2,6,23,0.12);
  --shadow: 0 6px 18px rgba(2,6,23,0.12);
}

[data-theme="dark"] {
  --bg: #000000;
  --card: #000000;
  --text-main: #f1f5f9;
  --text-sec: #cbd5e1;
  --border: #475569;
  --nav-bg: #1e293b;
  --muted: #94a3b8;
  --accent: #818cf8;
  --dark: #f1f5f9;
  --green: #22c55e;
  --yellow: #fbbf24;
  --yellow-strong: #f59e0b;
  --red: #f87171;
  --pale-1: #334155;
  --pill: #e2e8f0;
  --sep: rgba(255,255,255,0.1);
  --shadow: 0 6px 18px rgba(0,0,0,0.4);
}
    *{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;background:var(--bg);color:var(--text-main)}
    .app{max-width:var(--max-width);margin:0 auto;padding:0 0 24px}
    .topnav{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 16px;position:sticky;top:0;z-index:20;background:var(--card);box-shadow:0 2px 8px rgba(15,23,42,0.08)}
    .brand{font-weight:900;font-size:18px} .card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(15,23,42,0.06)}
    .hambtn{background:var(--card);border:none;border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer} .hambtn:active{transform:scale(.98)}
    .hamburger{width:20px;height:14px;display:inline-grid;grid-template-rows:repeat(3,1fr);gap:3px} .bar{background:#0f172a;border-radius:2px}
    .menu{position:absolute;top:56px;right:12px;background:var(--card);border:1px solid #e6eef6;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;min-width:200px}
    .menu a{display:flex;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;color:inherit;font-weight:700} .menu a:hover{background:#f3f7ff} .ico-img{width:18px;height:18px;display:inline-block}
    .section-title{font-size:28px;font-weight:900;margin:0 0 12px 0;padding-left:12px} .muted{color:var(--muted)} .small{font-size:12px}
    /* Generic table */
    .table{width:100%;border-collapse:collapse;font-size:14px} .table th, .table td{padding:7px 8px;text-align:center;vertical-align:middle;background:var(--card);}
    .table thead th{position:sticky;top:0;background:var(--card);z-index:3;border-bottom:1px solid var(--sep);} .table tbody tr{border-bottom:1px solid var(--sep);}
    .sort-head{cursor:pointer; user-select:none} .sort-ind{font-size:10px;margin-left:4px;opacity:.9}
    .lb-avatar{ width:32px; height:32px; border-radius:6px; object-fit:cover } .clickable{cursor:pointer}
    .table td.col-pts, .table th.col-pts{background:linear-gradient(180deg,#f6e6a7,#f2d98a);font-weight:900;border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,0.6),0 1px 4px rgba(15,23,42,0.16);text-align:center;padding:6px 12px;border-right:1px solid rgba(148,163,184,0.6);}
    .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch; position:relative}
    @media (orientation: portrait) {
      .table :is(th.sticky-1, td.sticky-1){ position: sticky; left: 0; z-index: 2; background:var(--card); }
      .table :is(th.sticky-2, td.sticky-2){ position: sticky; left: var(--col1, 56px); z-index: 2; background:var(--card); }
      .table :is(th.sticky-3, td.sticky-3){ position:sticky; left: calc(var(--col1, 56px) + var(--col2, 28px)); z-index:2; background:var(--card); box-shadow:4px 0 6px -4px rgba(15,23,42,0.35);}
      .table thead th.sticky-1, .table thead th.sticky-2, .table thead th.sticky-3 { z-index: 4; }
      .bleed{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width:100vw; }
      .topnav.bleed{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width:100vw; padding-left:16px; padding-right:16px; }
    }
    .match-detail-scope .match-detail-card{border-radius:0;}
    .navbtn{border-radius:10px} .pill{display:inline-block;background:var(--pill);color:#fff;border-radius:12px;padding:8px 14px;font-weight:900}
    /* Movement indicator */
    .mv-cell{width:24px;text-align:center;font-weight:900;font-size:14px;line-height:1;} .mv-up{color:#10b981} .mv-down{color:#ef4444} .mv-same{color:#64748b}
    /* Player detail */
    .player-hero-top{font-size:34px;font-weight:900;line-height:1.05;margin-bottom:10px;text-align:center}
    .player-hero-row{display:grid;grid-template-columns:auto auto;gap:12px;align-items:center;justify-content:center}
    .avatar-xl{width:168px;height:168px;border-radius:16px;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,0.06)}
    .points-square{width:168px;height:168px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--yellow);border:1px solid var(--yellow-strong);box-shadow:0 4px 12px rgba(0,0,0,0.04)}
    .points-square .title{font-size:12px;font-weight:800;letter-spacing:.4px}
    .points-square .value{font-size:44px;font-weight:900;margin-top:4px;line-height:1}
    .points-square .avg{font-size:12px;color:#334155;margin-top:6px}
    .select{width:100%;padding:10px 12px;border:1px solid #e6eef6;border-radius:10px;background:var(--card);font-weight:600}
    .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px} .kpi{border-radius:14px;padding:14px;background:var(--card);border:1px solid #e6eef6;box-shadow:0 2px 8px rgba(2,6,23,.04)}
    .kpi .k-title{font-weight:800;font-size:13px;margin-bottom:8px} .kpi .k-value{font-weight:900;font-size:20px;text-align:center} .kpi.green{background:#10b981;color:#fff} .kpi.red{background:#ef4444;color:#fff} .kpi.orange{background:#D4AF37;color:#000} .kpi.black{background:#000;color:#fff}
    .trend{margin:18px 0 8px} .trend h3{font-size:20px;font-weight:900;margin:0 0 10px} .trend-dots{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .trend-item{display:flex;flex-direction:column;align-items:center;gap:6px}
    .trend-item button{background:none;border:none;padding:0;margin:0;cursor:pointer}
    .trend-item .lbl{font-weight:800;color:#334155;font-size:11px}
    .dot{width:18px;height:18px;border-radius:999px;border:1px solid rgba(0,0,0,0.08)} .dot.win{background:#10b981} .dot.draw{background:#D4AF37} .dot.lose{background:#ef4444}
    .played-list{display:flex;flex-direction:column;gap:12px;margin:10px 0} .played-card{border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
    .played-card.win{background:#10b981;color:#fff} .played-card.lose{background:#ef4444;color:#fff} .played-card.draw{background:#D4AF37;color:#000} .played-meta{font-weight:900} .score{font-size:40px;font-weight:900}
    /* Home - ultime partite */
    .home-matches { margin-top:14px; display:flex; flex-direction:column; gap:12px; width:100%; }
    .home-card { display:grid; grid-template-columns: 1fr auto; gap:12px; border-radius:12px; cursor:pointer; align-items:stretch; padding:12px; }
    .team-col { display:flex; flex-direction:column; gap:8px; }
    .team-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; width:fit-content; }
    .team-row.black { background:#000; color:#fff; }
    .team-row.white { background:var(--card); color:#000; border:1px solid #e6eef6; }
    .team-avatars { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
    .team-avatars img { width:42px; height:42px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
    .result-col { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:24px; }
    .result-pill { background:var(--pale-1); height:54px; min-width:56px; padding:0 10px; border-radius:10px; font-weight:900; font-size:36px; display:flex; align-items:center; justify-content:center; }
    .match-detail-scope .result-pill{font-size:38px;height:84px;font-weight:900;}

    .caption { font-size:12px; font-weight:800; color:#334155; padding-left:12px; }
    .caption .giornata { font-size:18px; font-weight:900; color:#0f172a; display:block; line-height:1.05; }
    .caption .date { font-size:12px; font-weight:600; color:#64748b; display:block; margin-top:2px; }
    @media (orientation: portrait){
      .home-matches.bleed{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width:100vw; }
      .home-matches.bleed .home-card{ border-radius:0; padding:12px; }
      .home-matches.bleed > div + div{ margin-top:0 }
    }
    .matches-grid { display:grid; gap:14px; grid-template-columns: 1fr; margin-top:12px; }
    .match-card { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:12px; position:relative; min-height:170px; }
    .players-grid { display:grid; gap:12px; margin-top:12px; grid-template-columns: repeat(2, 1fr); }
    .player-tile { background:var(--card); border-radius:10px; padding:10px; text-align:center; cursor:pointer; box-shadow:0 1px 6px rgba(2,6,23,0.04); }
    .player-tile img{width:100px;height:100px;border-radius:12px;object-fit:cover} .player-name{font-weight:800;margin-top:8px; cursor:pointer}
    /* Giornate Dots (Partite) — updated */
    .giornate-wrap{position:sticky; top:56px; z-index:19; padding:0 12px;}
    .giornate-dots{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
    .giornate-dot{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;cursor:pointer;user-select:none;border:1px solid transparent;box-shadow:0 1px 3px rgba(2,6,23,0.08); line-height:1}
    .giornate-dot.white{background:var(--card);color:#000;border:1px solid #e6eef6}
    .giornate-dot.black{background:#000;color:#fff}
    .giornate-dot.draw{background:#D4AF37;color:#000}
    .giornate-dot:active{transform:scale(.97)}
    /* ==========================
       STATS PAGE - SCOPED STYLES + INFO MODAL
       ==========================*/
    
    
    .stats-scope .info-btn{width:34px;height:34px;border-radius:999px;border:1px solid #e6eef6;background:var(--card);display:inline-flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer;box-shadow:0 2px 8px rgba(2,6,23,0.06)}
    .stats-scope .info-btn:active{transform:scale(.97)}
    .stats-scope .stats-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; position:relative}
    .stats-scope .stats-highlights{padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px;}
    .stats-scope .stats-highlights-bottom{margin-top:8px;margin-bottom:8px;}
    .stats-scope .stat-pill{flex:1 1 calc(33.333% - 8px);min-width:90px;border-radius:12px;background:#0f172a;color:#f9fafb;padding:8px 10px;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 3px rgba(15,23,42,0.18);}
    .stats-scope .stat-pill-label{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;opacity:.8;}
    .stats-scope .stat-pill-main{margin:0;padding:0;display:flex;align-items:baseline;justify-content:space-between;gap:6px;background:none;border:none;color:inherit;font:inherit;cursor:pointer;text-align:left;}
    .stats-scope .stat-pill-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .stats-scope .stat-pill-metric{font-size:13px;font-weight:800;}

    .stats-scope .stats-table{width:100%;border-collapse:collapse;font-size:14px}
    .stats-scope .stats-table th,
    .stats-scope .stats-table td{padding:6px 8px;text-align:center;vertical-align:middle;background:var(--card);}
    .stats-scope .stats-table thead th{position:sticky;top:0;background:var(--card);z-index:3;border-bottom:1px solid var(--sep);}
    .stats-scope .stats-table tbody tr{border-bottom:1px solid var(--sep);}
    .stats-scope .stats-sort{cursor:pointer; user-select:none}
    .stats-scope .stats-sort .sort-ind{font-size:10px;margin-left:4px;opacity:.7}
    .stats-scope .col-pts{ background: linear-gradient(180deg, #FFF4C1 0%, #FFE08A 55%, #FFD24D 100%); color:#2b2b00; font-weight:900; border-radius:8px; box-shadow: inset 0 -0.5px 0 rgba(0,0,0,0.06), inset 0 0.5px 0 rgba(255,255,255,0.45) }
    @media (orientation: portrait){
      .stats-scope .stats-table :is(th.s-sticky-1, td.s-sticky-1){ position: sticky; left: 0; z-index: 2; background:var(--card); }
      .stats-scope .stats-table :is(th.s-sticky-2, td.s-sticky-2){ position: sticky; left: var(--scol1, 56px); z-index: 2; background:var(--card); }
      .stats-scope .stats-table thead th.s-sticky-1, .stats-scope .stats-table thead th.s-sticky-2 { z-index: 4; }
    }
    /* modal */
    .modal-back{position:fixed;inset:0;background:rgba(2,6,23,0.46);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:60}
    .modal-card{background:var(--card);border-radius:16px;max-width:680px;width:100%;box-shadow:0 12px 40px rgba(2,6,23,0.24)}
    .modal-card header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7}
    .modal-card h3{margin:0;font-size:18px;font-weight:900}
    .modal-body{padding:12px 16px;max-height:60vh;overflow:auto}
    .legend{display:grid;grid-template-columns: 100px 1fr;gap:10px;align-items:start}
    .legend .k{font-weight:900}
    .close-x{width:32px;height:32px;border-radius:9px;border:1px solid #e6eef6;background:var(--card);color:#fff;font-weight:900;cursor:pointer}
  

/* ========================================
   MODIFICHE v1.7.4 - LANDSCAPE ONLY
   NON modificare MAI portrait!
   ======================================== */

/* v1.7.4 LANDSCAPE - ALLINEAMENTO PERFETTO RESPONSIVE */
@media (orientation: portrait) {
  .classifica-trend-item:nth-child(n+6) { display: none !important; }
  .match-events-landscape { display: none !important; }
}
@media (orientation: landscape) {
  .app { padding-left: 0 !important; padding-right: 0 !important; }
  section { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; padding-left: clamp(12px, 2vw, 16px) !important; padding-right: clamp(12px, 2vw, 16px) !important; box-sizing: border-box !important; }
  .topnav { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; padding-left: clamp(12px, 2vw, 16px) !important; padding-right: clamp(12px, 2vw, 16px) !important; box-sizing: border-box !important; }

  /* Dettaglio giocatore */
  .card:has(.player-hero-top) { display: grid !important; grid-template-columns: auto auto 1fr !important; grid-template-rows: auto auto auto !important; gap: clamp(24px, 3vw, 32px) !important; align-items: start !important; }
  .card:has(.player-hero-top) .player-hero-top { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  .card:has(.player-hero-top) .player-hero-row { grid-column: 1 / 3 !important; grid-row: 2 !important; display: flex !important; flex-direction: row !important; gap: clamp(24px, 3vw, 32px) !important; align-items: flex-start !important; }
  .card:has(.player-hero-top) .player-hero-row > .avatar-xl { flex-shrink: 0 !important; }
  .card:has(.player-hero-top) .player-hero-row > .points-square { flex-shrink: 0 !important; }
  .card:has(.player-hero-top) > div:has(select) { grid-column: 3 !important; grid-row: 2 !important; margin-top: 0 !important; }

  /* KPI "Ho giocato con" - RESPONSIVE */
  .card:has(.player-hero-top) > div:has(select) .kpi-grid { display: flex !important; flex-direction: row !important; gap: clamp(4px, 0.8vw, 6px) !important; margin-top: clamp(6px, 1vw, 8px) !important; flex-wrap: wrap !important; }
  .card:has(.player-hero-top) > div:has(select) .kpi { 
    flex: 1 1 auto !important;
    min-width: clamp(45px, 8vw, 60px) !important;
    max-width: 70px !important;
    padding: clamp(8px, 1.5vw, 10px) clamp(4px, 0.8vw, 6px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .card:has(.player-hero-top) > div:has(select) .kpi .k-title { font-size: clamp(9px, 1.2vw, 10px) !important; margin-bottom: clamp(4px, 0.8vw, 6px) !important; line-height: 1.2 !important; word-break: break-word !important; }
  .card:has(.player-hero-top) > div:has(select) .kpi .k-value { font-size: clamp(16px, 2.5vw, 18px) !important; font-weight: 900 !important; }

  .card:has(.player-hero-top) .kpi-grid { grid-column: 1 / -1 !important; grid-row: 3 !important; grid-template-columns: repeat(5, 1fr) !important; gap: clamp(8px, 1.2vw, 10px) !important; margin-top: 0 !important; }
  .card:has(.player-hero-top) .trend { grid-column: 1 / -1 !important; grid-row: 4 !important; }

  .match-events-portrait { display: none !important; }

  /* EVENTI LANDSCAPE - HEIGHT FISSO RESPONSIVE */
  .match-events-landscape { display: grid !important; grid-template-columns: 1fr auto 1fr !important; gap: clamp(24px, 3vw, 32px) !important; align-items: start !important; margin-top: clamp(10px, 1.5vw, 12px) !important; }
  .event-black-col { grid-column: 1 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important; }
  .event-minute-col { grid-column: 2 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: center !important; min-width: clamp(50px, 8vw, 60px) !important; }
  .event-white-col { grid-column: 3 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important; }

  /* Box evento - HEIGHT FISSO RESPONSIVE (non min-height!) */
  .event-item { 
    display: grid !important; 
    grid-template-columns: auto 1fr auto !important; 
    grid-template-rows: auto auto auto !important; 
    gap: clamp(5px, 0.8vw, 6px) clamp(6px, 1vw, 8px) !important; 
    padding: clamp(6px, 1vw, 8px) !important; 
    border-radius: clamp(8px, 1.2vw, 10px) !important; 
    align-items: start !important; 
    width: 100% !important; 
    height: clamp(60px, 10vh, 70px) !important; 
    box-sizing: border-box !important; 
    overflow: hidden !important; 
  }
  .event-item.black { background: #000 !important; color: #fff !important; }
  .event-item.white { background: #fff !important; color: #000 !important; border: 1px solid #e6eef6 !important; }
  .event-item.palo { background: #f6e6a7 !important; color: #111827 !important; }

  /* BLACK layout */
  .event-item.black .event-photo { grid-column: 1 !important; grid-row: 1 / 4 !important; }
  .event-item.black .event-name { grid-column: 2 !important; grid-row: 1 !important; font-weight: 800 !important; font-size: clamp(12px, 1.8vw, 13px) !important; line-height: 1.2 !important; }
  .event-item.black .event-assist { grid-column: 2 !important; grid-row: 2 !important; font-size: clamp(9px, 1.3vw, 10px) !important; opacity: 0.8 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .event-item.black .event-conceded { grid-column: 2 !important; grid-row: 3 !important; font-size: clamp(9px, 1.3vw, 10px) !important; opacity: 0.8 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .event-item.black .event-label { grid-column: 3 !important; grid-row: 1 / 4 !important; font-weight: 900 !important; font-size: clamp(18px, 3vw, 22px) !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; }

  /* WHITE layout */
  .event-item.white .event-label { grid-column: 1 !important; grid-row: 1 / 4 !important; font-weight: 900 !important; font-size: clamp(18px, 3vw, 22px) !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; }
  .event-item.white .event-name { grid-column: 2 !important; grid-row: 1 !important; font-weight: 800 !important; font-size: clamp(12px, 1.8vw, 13px) !important; text-align: right !important; line-height: 1.2 !important; }
  .event-item.white .event-assist { grid-column: 2 !important; grid-row: 2 !important; font-size: clamp(9px, 1.3vw, 10px) !important; opacity: 0.8 !important; text-align: right !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .event-item.white .event-conceded { grid-column: 2 !important; grid-row: 3 !important; font-size: clamp(9px, 1.3vw, 10px) !important; opacity: 0.8 !important; text-align: right !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .event-item.white .event-photo { grid-column: 3 !important; grid-row: 1 / 4 !important; }

  /* PALO layout */
  .event-item.palo .event-photo { grid-column: 1 !important; grid-row: 1 / 4 !important; }
  .event-item.palo .event-name { grid-column: 2 !important; grid-row: 1 !important; font-weight: 800 !important; font-size: clamp(12px, 1.8vw, 13px) !important; line-height: 1.2 !important; }
  .event-item.palo .event-label { grid-column: 3 !important; grid-row: 1 / 4 !important; font-weight: 900 !important; font-size: clamp(18px, 3vw, 22px) !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; }

  /* COLORI LABEL - RESPONSIVE */
  .event-label.goal { color: #16a34a !important; }
  .event-label.autogoal { color: #ef4444 !important; }
  .event-label.palo { color: #b45309 !important; }

  /* FOTO - RESPONSIVE */
  .event-item img { width: min(45px, 7vw) !important; height: min(45px, 7vw) !important; border-radius: clamp(6px, 1vw, 8px) !important; object-fit: cover !important; flex-shrink: 0 !important; }

  /* MINUTI - HEIGHT FISSO IDENTICO (non min-height!) */
  .minute-marker { font-weight: 800 !important; font-size: clamp(13px, 1.8vw, 14px) !important; color: #64748b !important; padding: clamp(6px, 1vw, 8px) clamp(8px, 1.2vw, 10px) !important; background: #f1f5f9 !important; border-radius: clamp(6px, 1vw, 8px) !important; height: clamp(60px, 10vh, 70px) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; }

  /* SPACER - HEIGHT FISSO IDENTICO (non min-height!) */
  .event-spacer { height: clamp(60px, 10vh, 70px) !important; }

  .table-wrap { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .table { width: 100% !important; }
  .home-matches { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; }
  .players-grid { grid-template-columns: repeat(4, 1fr) !important; gap: clamp(24px, 3vw, 32px) !important; }
  .trend-dots { gap: clamp(6px, 1vw, 8px); max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .trend-item { display: flex !important; }
  .dot { width: 20px; height: 20px; flex-shrink: 0; }
  .home-card { position: relative !important; display: flex !important; flex-direction: column !important; padding: clamp(16px, 2.5vw, 20px) clamp(20px, 3vw, 24px) !important; min-height: clamp(70px, 12vh, 80px) !important; }
  .home-card .team-col { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 0 !important; z-index: 1 !important; }
  .home-card .result-col { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: clamp(24px, 3vw, 32px) !important; z-index: 2 !important; background: transparent !important; padding: clamp(6px, 1vw, 8px) !important; border-radius: clamp(10px, 1.5vw, 12px) !important; }
  .home-card .result-pill { min-width: clamp(56px, 9vw, 64px) !important; height: clamp(56px, 9vw, 64px) !important; font-size: clamp(36px, 5.5vw, 42px) !important; }
  .team-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(6px, 1vw, 8px) !important; max-width: 40% !important; }
  .team-avatars { display: flex !important; flex-wrap: wrap !important; gap: clamp(4px, 0.8vw, 6px) !important; justify-content: center !important; }
  .matches-grid { grid-template-columns: 1fr 1fr !important; gap: clamp(12px, 2vw, 16px) !important; }
  .match-card { min-height: clamp(140px, 20vh, 160px) !important; }
}

/* ========================================
   UX IMPROVEMENTS v1.3.13
   ======================================== */

/* Transizioni globali */
* {
  transition: background-color 0.2s ease, 
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

button, .clickable, img[style*="cursor"], select,
.player-tile, .match-card, .kpi, .giornate-dot,
.trend-item button {
  transition: all 0.2s ease;
}

/* Hover states */
.player-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(2,6,23,0.14); cursor: pointer; }
.match-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2,6,23,0.14); cursor: pointer; }
.kpi:hover { box-shadow: 0 4px 12px rgba(2,6,23,0.08); }
.trend-item button:hover { transform: scale(1.05); }
.trend-item button:hover .dot { transform: scale(1.15); }
.giornate-dot:hover { transform: scale(1.1); opacity: 1 !important; }
.clickable:hover { color: var(--accent); text-decoration: underline; }
img[style*="cursor:pointer"]:hover, img[style*="cursor: pointer"]:hover, img[onClick]:hover { opacity: 0.85; transform: scale(1.05); }

/* Dropdown select styling */
select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f46e5' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
select:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }

/* Focus states */
button:focus-visible, .clickable:focus-visible, select:focus-visible, a:focus-visible,
.player-tile:focus-visible, .match-card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

/* Cursor pointer */
button, select, .player-tile, .match-card, .clickable, [onClick],
.trend-item button, .giornate-dot { cursor: pointer; }
button:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: 0.5; }


/* TOUCH FEEDBACK v1.3.14 */
* { -webkit-tap-highlight-color: rgba(79,70,229,0.1); -webkit-touch-callout: none; }
.player-tile:active { transform: scale(0.97) translateY(-1px); background: rgba(0,0,0,0.02); }
.match-card:active { transform: scale(0.98); background: rgba(0,0,0,0.02); }
button:active:not(:disabled) { transform: scale(0.96); opacity: 0.85; }
.clickable:active { opacity: 0.7; }
.giornate-dot:active { transform: scale(0.95); }
.trend-item button:active { transform: scale(0.98); }
img[onClick]:active, img[style*="cursor:pointer"]:active { transform: scale(0.98); opacity: 0.7; }
select:active { background-color: rgba(79,70,229,0.05); }


/* ========================================
   LOADING SKELETON v1.7.4
   ======================================== */

/* Skeleton base */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f2f5 0%,
    #e4e6e9 50%,
    #f0f2f5 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton player tile */
.skeleton-player-tile {
  width: 100%;
  height: 140px;
  margin-bottom: 12px;
}

/* Skeleton match card */
.skeleton-match-card {
  width: 100%;
  height: 100px;
  margin-bottom: 12px;
}

/* Skeleton KPI box */
.skeleton-kpi {
  width: 100%;
  height: 60px;
  border-radius: 12px;
}

/* Skeleton avatar */
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* Skeleton text lines */
.skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-text.title {
  height: 20px;
  width: 60%;
}

.skeleton-text.subtitle {
  height: 14px;
  width: 40%;
}

/* Container skeleton grids */
.skeleton-grid {
  display: grid;
  gap: 12px;
}

.skeleton-grid.players {
  grid-template-columns: repeat(2, 1fr);
}

@media (orientation: landscape) {
  .skeleton-grid.players {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Fade in animation quando appaiono dati reali */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   END LOADING SKELETON
   ======================================== */



/* Theme Toggle Button */
#theme-toggle {
  position: fixed;
  top: 12px;
  right: 60px;
  width: 40px;
  height: 40px;
  background: var(--card);
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  font-size: 20px;
  transition: all 0.2s;
}

#theme-toggle:hover {
  transform: scale(1.1);
}

/* ===== DARK MODE CONTRAST FIXES ===== */

/* 1. Giornate Dots */
[data-theme="dark"] .giornate-dot {
  border: 2px solid var(--border);
}

[data-theme="dark"] .giornate-dot.draw,
[data-theme="dark"] .giornate-dot[style*="background:#fef3c7"] {
  background: #fbbf24 !important;
  color: #0f172a !important;
  font-weight: 700;
}

[data-theme="dark"] .giornate-dot.white {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1;
}

[data-theme="dark"] .giornate-dot.black {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border-color: #64748b;
}

/* 2. Team Labels nelle card */
[data-theme="dark"] .team-white {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700;
}

[data-theme="dark"] .team-black {
  background: #334155 !important;
  color: #f1f5f9 !important;
  font-weight: 700;
  border: 1px solid #64748b;
}

[data-theme="dark"] .team-row.white {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] .caption {
  color: var(--text-sec) !important;
}

/* 3. Colonna PTS - MENO BRILLANTE (MODIFICA 1) */
[data-theme="dark"] .col-pts {
  background: #F0C808 !important;
  color: #0f172a !important;
  font-weight: 900;
}

[data-theme="dark"] .stats-scope .col-pts {
  background: #F0C808 !important;
  color: #0f172a !important;
}

/* 4. Cards generiche */
[data-theme="dark"] .kpi {
  background: var(--card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border);
}

/* 5. Select e Input */
[data-theme="dark"] select,
[data-theme="dark"] input {
  background: var(--card) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] option {
  background: var(--card);
  color: var(--text-main);
}

/* 6. Result Pills */
/* Result-pill: NO override - usa stili JavaScript inline */
[data-theme="dark"] .result-pill {
  /* Rimosso !important per permettere stili inline */
}

/* 7. Trend Dots (win/draw/lose) */
[data-theme="dark"] .dot.win {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .dot.draw {
  background: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

[data-theme="dark"] .dot.lose {
  background: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

/* 8. Score e testi generici */
[data-theme="dark"] .score {
  color: var(--text-main) !important;
}

[data-theme="dark"] .brand-sub {
  color: var(--text-sec) !important;
}

/* 9. Label G+numero sopra trend dots (MODIFICA 2) */
[data-theme="dark"] .trend-caption,
[data-theme="dark"] .giornata-label,
[data-theme="dark"] .giornate-wrap,
[data-theme="dark"] .giornate-wrap > div {
  color: var(--text-main) !important;
}

[data-theme="dark"] .trend-dots-caption {
  color: var(--text-sec) !important;
}


/* ========== v1.7.4 - OGNI MALEDETTO GIOVEDÌ ========== */

.home-scope { }
.matches-scope { }
.players-scope { }

[data-theme="dark"] .bar {
  background: #ffffff !important;
}

[data-theme="dark"] .menu {
  background: #000000 !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .menu a {
  color: #ffffff !important;
}

[data-theme="dark"] .ico-img {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] .trend-item .lbl {
  color: #ffffff !important;
}

[data-theme="dark"] .caption .giornata {
  color: #ffffff !important;
}

[data-theme="dark"] .caption .date {
  color: #94a3b8 !important;
}

[data-theme="dark"] .giornate-dot.draw {
  background: #D4AF37 !important;
}

[data-theme="dark"] .info-btn {
  color: #ffffff !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .kpi.green {
  background: #10b981 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .kpi.orange {
  background: #D4AF37 !important;
  color: #000000 !important;
}

[data-theme="dark"] .kpi.red {
  background: #ef4444 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .kpi.black {
  background: #000000 !important;
  color: #ffffff !important;
}

.kpi.white {
  background: #ffffff;
  color: #000000;
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] .kpi.white {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
}

.kpi .k-title {
  text-align: center;
}

[data-theme="dark"] .played-card.win {
  background: #10b981 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .played-card.lose {
  background: #ef4444 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .played-card.draw {
  background: #D4AF37 !important;
  color: #000000 !important;
}

[data-theme="dark"] .played-meta {
  color: inherit !important;
}

[data-theme="dark"] .score {
  color: inherit !important;
}

.home-card .home-result-pill {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  min-width: auto !important;
  border-radius: 0 !important;
}

[data-theme="dark"] .home-card .home-result-pill {
  background: transparent !important;
  border: none !important;
}

@media (orientation: landscape) {
  .home-card .home-result-pill {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
}

/* Logo style per futuro uso */
.app-logo {
  font-size: 18px;
  font-weight: 400;
}

.app-logo strong {
  font-weight: 900;
}