:root{
    /* Palette A.S.D. Barberino Calcio (rosso / blu navy / oro / crema),
       applicata sulle forme in stile Apple (curvature, pillole, ombre). */
    --red-deep:#7a1015;
    --red:#a3181d;
    --red-light:#c72a2a;
    --navy-deep:#0b1533;
    --navy:#141f47;
    --navy-light:#243468;
    --gold:#c9a24b;
    --gold-light:#e8cf8b;
    --cream:#f5efe0;
    --blue:#2f7de0;
    --blue-dark:#1c4f96;

    --bg-grad: radial-gradient(circle at 15% 8%, rgba(199,42,42,0.35), transparent 45%),
               radial-gradient(circle at 85% 92%, rgba(36,52,104,0.5), transparent 50%),
               linear-gradient(160deg, var(--red-deep) 0%, var(--red) 22%, var(--navy) 55%, var(--navy-deep) 100%);

    --surface: rgba(17,26,58,0.68);
    --surface-2: rgba(0,0,0,0.28);
    --text: var(--cream);
    --text-secondary: #cfc3a8;
    --text-tertiary: #a9a08a;
    --border: rgba(201,162,75,0.28);
    --border-light: rgba(201,162,75,0.16);

    --radius-xl:22px;
    --radius-lg:16px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.25), 0 1px 8px rgba(0,0,0,0.18);
    --shadow-md:0 6px 20px rgba(0,0,0,0.32);
    --shadow-lg:0 12px 34px rgba(0,0,0,0.4);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "SF Mono", "Menlo", ui-monospace, Consolas, monospace;
    --grass-a:#2e8b4f;
    --grass-b:#2a7d47;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    font-family: var(--font);
    color:var(--text);
    background:var(--bg-grad);
    background-attachment:fixed;
    padding: 20px 16px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{ width:100%; max-width:820px; }

  h1,h2,h3{ font-family:var(--font); }

  /* ============================================================
     PANNELLO GARA: squadre + tempo + risultato, tutto compatto
     ============================================================ */
  .match-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
    padding:18px 20px 16px;
    margin-bottom:16px;
    text-align:center;
  }

  .competition-row{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border-light);
  }
  .competition-text{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-secondary);
  }
  .competition-select{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--gold-light);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:6px 10px;
    max-width:100%;
  }
  .competition-select:focus{ border-color:var(--gold); outline:none; }

  .match-panel-teams{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .crest-mini{
    width:44px; height:44px;
    object-fit:contain;
    flex-shrink:0;
    margin-bottom:8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  }

  .swap-teams-btn{
    all:unset;
    cursor:pointer;
    flex-shrink:0;
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
    color:var(--gold-light);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:50%;
    transition: background .12s ease, transform .12s ease;
  }
  .swap-teams-btn:hover{ background:rgba(201,162,75,0.18); }
  .swap-teams-btn:active{ transform:rotate(180deg); }

  .teams-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .teams-row.hidden{ display:none; }
  .team-input{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-family:var(--font);
    font-weight:600;
    font-size:14px;
    padding:8px 12px;
    outline:none;
    width:150px;
    text-align:center;
  }
  .team-input::placeholder{ color:var(--text-tertiary); }
  .team-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,0.2); }
  .vs-mark{ font-weight:600; color:var(--text-tertiary); font-size:13px; }
  .save-btn{
    all:unset; cursor:pointer;
    font-size:13px; font-weight:600;
    color:var(--navy-deep);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    padding:8px 16px; border-radius:20px;
  }
  .save-btn:hover{ filter:brightness(1.08); }
  .save-note{ font-size:11px; color:var(--text-tertiary); margin-top:4px; min-height:14px; }

  .match-title{
    display:none;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:19px;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .match-title.show{ display:flex; }
  .match-title .mt-vs{
    color:var(--text-tertiary);
    font-weight:400;
    font-size:0.7em;
    margin:0 2px;
  }
  .edit-teams-btn{
    all:unset; cursor:pointer;
    font-size:11px; font-weight:600;
    color:var(--gold-light);
    margin-left:6px;
  }
  .edit-teams-btn:hover{ color:var(--gold); text-decoration:underline; }

  .match-panel-center{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border-light);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
  }
  .half-label{
    font-size:11px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold-light);
  }
  .timer-display{
    font-variant-numeric:tabular-nums;
    font-weight:700;
    font-size:clamp(34px,7vw,44px);
    letter-spacing:-0.02em;
    color:var(--cream);
    line-height:1;
    text-shadow:0 2px 8px rgba(0,0,0,0.35);
  }
  .score-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:8px 0 4px;
  }
  .score-stepper{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .score-step-btn{
    all:unset;
    cursor:pointer;
    width:30px; height:30px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    font-weight:700;
    line-height:1;
    color:var(--gold-light);
    background:rgba(255,255,255,0.06);
    border-radius:50%;
    transition: background .12s ease, transform .1s ease;
  }
  .score-step-btn:hover{ background:rgba(201,162,75,0.18); }
  .score-step-btn:active{ transform:scale(0.9); background:rgba(201,162,75,0.28); }
  .score-input{
    width:56px;
    text-align:center;
    background:transparent;
    border:none;
    color:var(--cream);
    font-weight:800;
    font-size:44px;
    padding:4px 0;
    line-height:1.1;
    /* Nasconde le frecce native del browser: al loro posto i pulsanti +/- */
    -moz-appearance:textfield;
    appearance:textfield;
  }
  .score-input::-webkit-outer-spin-button,
  .score-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .score-input:focus{ outline:none; }
  .score-sep{ color:var(--text-tertiary); font-weight:700; font-size:38px; }

  .timer-controls{ display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .timer-controls-secondary{ margin-top:8px; }
  .timer-controls button{
    all:unset; cursor:pointer;
    font-size:13px; font-weight:600;
    padding:9px 18px; border-radius:20px;
    color:#fff;
    transition: filter .12s ease, background .12s ease, opacity .12s ease;
  }
  /* Pulsanti gestione tempo: colori piatti in stile Apple (nessun gradiente) */
  #startPause{ background:#2fb350; }
  #startPause:hover{ background:#29a047; }
  #startPause:active{ opacity:0.85; }
  #nextHalf{ background:#3d7fd9; }
  #nextHalf:hover{ background:#356fbd; }
  #nextHalf:active{ opacity:0.85; }
  #resetTimer{ background:rgba(142,142,147,0.22); color:var(--text-secondary); }
  #resetTimer:hover{ background:rgba(142,142,147,0.32); }
  .end-match-btn{ background:#d92c22 !important; }
  .end-match-btn:hover{ background:#c02419 !important; }
  .end-match-btn:active{ opacity:0.85; }

  .start-warning{
    margin-top:10px;
    font-size:12px;
    color:#f0b3ae;
    background:rgba(199,42,42,0.16);
    border:1px solid rgba(199,42,42,0.4);
    border-radius:var(--radius-sm);
    padding:8px 12px;
    display:none;
  }
  .start-warning.show{ display:block; }

  button:disabled{ opacity:0.4; cursor:not-allowed !important; }

  /* ============================================================
     BLOCCO INIZIALE: timer e pulsanti statistiche restano inibiti
     finché non sono impostate squadre + formazione (11 titolari).
     ============================================================ */
  .lock-hint{
    display:none;
    margin-top:10px;
    font-size:12px;
    font-weight:600;
    color:var(--gold-light);
    background:rgba(201,162,75,0.12);
    border:1px solid rgba(201,162,75,0.35);
    border-radius:var(--radius-sm);
    padding:8px 12px;
  }
  body.app-locked .lock-hint{ display:block; }
  body.app-locked .timer-controls,
  body.app-locked .timer-controls-secondary,
  body.app-locked .zone-buttons,
  body.app-locked .general-stats-grid,
  body.app-locked .score-stepper{
    pointer-events:none;
    opacity:0.4;
    filter:grayscale(0.4);
  }

  /* ============================================================
     TIMER FLOTTANTE (sempre visibile durante lo scroll a partita avviata)
     ============================================================ */
  .floating-timer{
    position:fixed;
    top:14px;
    left:50%;
    transform:translate(-50%, -140%);
    z-index:900;
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:8px 18px;
    border-radius:24px;
    background:rgba(11,21,51,0.6);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border:1px solid rgba(201,162,75,0.35);
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
    pointer-events:none;
    opacity:0;
    transition: opacity .25s ease, transform .25s ease;
  }
  .floating-timer.show{
    opacity:1;
    transform:translate(-50%, 0);
  }
  .floating-timer-half{
    font-size:10px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold-light);
    opacity:0.9;
  }
  .floating-timer-time{
    font-variant-numeric:tabular-nums;
    font-weight:700;
    font-size:19px;
    color:var(--cream);
    letter-spacing:-0.01em;
  }
  @media print{ .floating-timer{ display:none !important; } }

  /* ============================================================
     CAMPO A ZONE + STATISTICHE PER ZONA
     ============================================================ */
  .pitch-section{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    padding:16px;
    margin-bottom:16px;
  }

  /* Pulsante schermo intero: dentro il campo verde, in basso a destra */
  .fullscreen-btn{
    all:unset;
    cursor:pointer;
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:3;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px;
    color:#fff;
    background:rgba(11,21,51,0.55);
    backdrop-filter: blur(4px);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:var(--radius-sm);
    transition: background .12s ease;
  }
  .fullscreen-btn:hover{ background:rgba(11,21,51,0.8); }

  /* Quando la sezione è a schermo intero: la si riempie di sfondo pieno e
     si dà più respiro al campo (nessuna scrollbar orizzontale necessaria). */
  .pitch-section:fullscreen{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    background:var(--bg-grad);
  }
  .pitch-section:fullscreen .pitch{ height:min(70vh, 620px); }
  /* Safari/iPadOS usa ancora il prefisso -webkit- per la Fullscreen API */
  .pitch-section:-webkit-full-screen{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
    background:var(--bg-grad);
  }
  .pitch-section:-webkit-full-screen .pitch{ height:min(70vh, 620px); }

  .pitch-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
  }
  .pitch-toolbar h2{
    font-size:15px;
    font-weight:700;
    color:var(--gold-light);
    margin:0;
    letter-spacing:-0.01em;
  }
  .rotate-btn{
    all:unset; cursor:pointer;
    display:flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600;
    color:var(--navy-deep);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    padding:7px 14px; border-radius:20px;
  }
  .rotate-btn:hover{ filter:brightness(1.08); }
  .rotate-btn .arrow{ font-size:13px; transition: transform .3s ease; }
  .attack-indicator{
    font-size:11.5px;
    color:var(--text-secondary);
    background:var(--surface-2);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:7px 12px;
    margin-bottom:10px;
  }

  .pitch-outer{
    border-radius:var(--radius-lg);
    padding:10px;
    background:var(--surface-2);
  }

  .pitch{
    position:relative;
    width:100%;
    height:380px;
    border-radius:var(--radius-md);
    background:
      repeating-linear-gradient(90deg,
        var(--grass-a) 0px, var(--grass-a) 60px,
        var(--grass-b) 60px, var(--grass-b) 120px);
    overflow:hidden;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,0.85);
  }

  .pitch-markings{
    position:absolute; top:0; left:50%;
    transform:translateX(-50%);
    height:100%; width:0;
    pointer-events:none;
  }
  .halfway-line{ position:absolute; top:0; bottom:0; left:0; width:2px; background:rgba(255,255,255,0.8); }
  .center-circle{
    position:absolute; top:50%; left:0;
    width:90px; height:90px;
    margin-left:-45px; margin-top:-45px;
    border:2px solid rgba(255,255,255,0.8);
    border-radius:50%;
  }
  .center-dot{
    position:absolute; top:50%; left:0;
    width:6px; height:6px; margin-left:-3px; margin-top:-3px;
    background:rgba(255,255,255,0.9); border-radius:50%;
  }

  .pitch-row{ position:relative; display:flex; flex-direction:row-reverse; height:100%; }
  .pitch-row.flipped{ flex-direction:row; }

  .goal-box{ flex:0 0 42px; display:flex; align-items:center; justify-content:center; position:relative; }
  .goal-box::before{
    content:""; position:absolute; top:20%; bottom:20%; width:24px;
    border:2px solid rgba(255,255,255,0.7);
  }
  .own-goal::before{ right:5px; border-right:none; }
  .opp-goal::before{ left:5px; border-left:none; }
  .pitch-row.flipped .own-goal::before{ left:5px; right:auto; border-left:none; border-right:2px solid rgba(255,255,255,0.7); }
  .pitch-row.flipped .opp-goal::before{ right:5px; left:auto; border-right:none; border-left:2px solid rgba(255,255,255,0.7); }

  .pitch-logo{
    width:30px; height:30px;
    object-fit:contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
    position:relative; z-index:2;
  }

  .zone-col{
    flex:1 1 0;
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 5px;
    border-left:1px dashed rgba(255,255,255,0.4);
    border-right:1px dashed rgba(255,255,255,0.4);
  }
  .zone-col + .zone-col{ border-left:none; }

  .zone-label{
    font-size:10.5px;
    font-weight:700;
    text-align:center;
    color:#fff;
    background:rgba(11,21,51,0.55);
    backdrop-filter: blur(4px);
    border-radius:var(--radius-sm);
    padding:4px 4px;
    margin-bottom:8px;
    line-height:1.25;
    width:100%;
    flex-shrink:0;
  }
  .zone-label .num{
    display:block;
    font-size:8px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold-light);
    opacity:0.95;
  }

  /* I pulsanti riempiono tutta l'altezza residua della colonna (sempre
     con un po' di margine fra loro) per essere più facili da toccare. */
  .zone-buttons{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:9px;
    width:100%;
    min-height:0;
  }

  button.zbtn{
    all:unset;
    cursor:pointer;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    color:#fff;
    padding:4px;
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-sm);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition: transform .08s ease, filter .15s ease, background .15s ease;
  }
  button.zbtn:active{ transform: scale(0.96); }
  button.zbtn:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }
  button.zbtn.neg{ background: linear-gradient(155deg, var(--red-light), var(--red-deep)); }
  button.zbtn.neg:hover{ filter:brightness(1.15); }
  button.zbtn.pos{ background: linear-gradient(155deg, var(--navy-light), var(--navy-deep)); }
  button.zbtn.pos:hover{ filter:brightness(1.2); }

  /* ============================================================
     STATISTICHE GENERALI (angoli e tiri) — compatte, testo per esteso
     ============================================================ */
  .section-heading{
    font-size:15px;
    font-weight:700;
    color:var(--gold-light);
    margin:0 0 10px;
    letter-spacing:-0.01em;
  }

  .general-stats-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    padding:14px 16px;
    margin-bottom:16px;
  }
  .general-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:8px;
  }
  @media (max-width:520px){
    .general-stats-grid{ grid-template-columns:1fr; grid-auto-flow:row; }
  }

  button.gbtn{
    all:unset;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 14px;
    border-radius:var(--radius-md);
    min-height:42px;
    white-space:nowrap;
    transition: transform .08s ease, filter .15s ease;
  }
  button.gbtn:active{ transform: scale(0.98); }
  button.gbtn:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }
  button.gbtn.pos{ background: linear-gradient(155deg, var(--navy-light) 0%, var(--navy-deep) 100%); border:1px solid #0a1230; }
  button.gbtn.pos:hover{ filter:brightness(1.18); }
  button.gbtn.pos .gbtn-label{ color:var(--cream); }
  button.gbtn.pos .gbtn-count{ color:var(--gold-light); }
  button.gbtn.neg{ background: linear-gradient(155deg, var(--red-light) 0%, var(--red-deep) 100%); border:1px solid #5a0d10; }
  button.gbtn.neg:hover{ filter:brightness(1.12); }
  button.gbtn.neg .gbtn-label{ color:var(--cream); }
  button.gbtn.neg .gbtn-count{ color:#ffd9d5; }
  button.gbtn.blue{ background: linear-gradient(155deg, var(--blue) 0%, var(--blue-dark) 100%); border:1px solid #12376b; }
  button.gbtn.blue:hover{ filter:brightness(1.15); }
  button.gbtn.blue .gbtn-label{ color:var(--cream); }
  button.gbtn.blue .gbtn-count{ color:#cfe3ff; }
  .gbtn-label{ font-size:12.5px; font-weight:600; }
  .gbtn-count{ font-size:19px; font-weight:700; min-width:22px; text-align:right; }

  /* ============================================================
     REPORT / TABELLE
     ============================================================ */
  #reportArea{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    padding:18px 18px 20px;
  }
  .report-head{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:10px; flex-wrap:wrap; gap:6px;
  }
  .report-title{ font-size:15px; font-weight:700; color:var(--gold-light); letter-spacing:-0.01em; }
  .report-sub{ font-size:12px; color:var(--text-tertiary); }

  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

  table.score{
    width:100%;
    min-width:620px;
    border-collapse:collapse;
    background:var(--surface-2);
    border-radius:var(--radius-md);
    overflow:hidden;
  }
  table.score thead th{
    text-align:center;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--gold-light);
    padding:10px 8px;
    border-bottom:1px solid var(--border-light);
    background:rgba(0,0,0,0.18);
  }
  table.score thead th:first-child{ text-align:left; }
  table.score tbody td{
    padding:11px 8px;
    border-bottom:1px solid var(--border-light);
    font-size:13px;
    text-align:center;
    color:var(--cream);
  }
  table.score tbody tr:last-child td{ border-bottom:none; }
  table.score td.name{ color:var(--cream); text-align:left; font-weight:500; }
  table.score td.count{ font-weight:700; font-size:15px; }
  table.score td.total{ font-weight:700; font-size:15px; color:var(--gold-light); }

  /* Elemento presente nel DOM solo per compatibilità con lo script
     (traccia l'ultimo evento), non più mostrato in pagina su richiesta. */
  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .footer-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:18px;
    gap:12px;
    flex-wrap:wrap;
  }

  .btn-outline{
    all:unset; cursor:pointer; font-size:13px; font-weight:600;
    color:var(--text-secondary); border:1px solid var(--border); padding:9px 16px; border-radius:20px;
  }
  .btn-outline:hover{ background:rgba(255,255,255,0.06); color:var(--gold-light); }

  .btn-export{
    all:unset; cursor:pointer; font-size:13px; font-weight:600;
    color:var(--navy-deep);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    padding:9px 18px; border-radius:20px;
  }
  .btn-export:hover{ filter:brightness(1.08); }

  /* Pulsanti di esportazione: PDF (rosso Adobe) ed Excel (verde Microsoft) */
  .export-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
  .export-icon{ width:18px; height:18px; flex-shrink:0; }

  .btn-export-pdf, .btn-export-xls{
    all:unset;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    font-weight:600;
    color:#fff;
    padding:8px 16px 8px 10px;
    border-radius:20px;
    transition: filter .12s ease, transform .1s ease;
  }
  .btn-export-pdf{ background:#E5382B; }
  .btn-export-pdf:hover{ filter:brightness(1.1); }
  .btn-export-xls{ background:#1D6F42; }
  .btn-export-xls:hover{ filter:brightness(1.1); }
  .btn-export-pdf:active, .btn-export-xls:active{ transform:scale(0.97); }

  .flash{ animation: flashbg .4s ease; }
  @keyframes flashbg{
    0%{ background:rgba(201,162,75,0.4); }
    100%{ background:transparent; }
  }
  .zone-flash{ animation: zoneflash .35s ease; }
  @keyframes zoneflash{
    0%{ filter:brightness(1.35); }
    100%{ filter:brightness(1); }
  }

  /* ---------- STAMPA / PDF ---------- */
  @media print{
    body{ background:#fff !important; color:#000; padding:0; }
    .match-panel, .pitch-section, .general-stats-panel,
    .no-print, .export-buttons,
    .site-footer, .modal-overlay, .reset-all-wrap{ display:none !important; }
    #reportArea{ box-shadow:none; border:none; padding:0; background:#fff; }
    .report-title{ color:#000; font-size:18px; }
    .report-sub{ color:#333; }
    table.score{ background:#fff; }
    table.score thead th{ color:#000; background:#fff; border-bottom:2px solid #999; }
    table.score tbody td{ color:#000; border-bottom:1px solid #ccc; }
    .print-header{ display:block !important; margin-bottom:16px; }
    .card-panel-title{ color:#000; }
    .formation-pitch-outer{ box-shadow:none; }
    .match-info-summary{ display:block !important; color:#000; margin-bottom:14px; font-size:13px; }
    .print-formation-block{ display:block !important; }
    .formation-report-block{
      page-break-inside: avoid;
      break-inside: avoid;
      page-break-before: always;
    }
  }
  .print-header{ display:none; }
  .print-header-row{ display:flex; align-items:center; gap:14px; }
  .print-logo{ width:52px; height:52px; object-fit:contain; }
  .print-header .pt{ font-size:19px; font-weight:700; }
  .match-info-summary{ display:none; }
  .print-formation-block{ display:none; }

  /* ============================================================
     FORMAZIONE (rosa, moduli, titolari, campo, sostituzioni)
     ============================================================ */
  .formation-section{ margin-bottom:16px; }

  .card-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
    padding:16px 18px;
    margin-bottom:14px;
  }
  .card-panel-title{ font-size:14px; font-weight:700; color:var(--gold-light); margin-bottom:12px; letter-spacing:-0.01em; }

  /* --- Pannelli richiudibili (Rosa, Modulo & Titolari) --- */
  .roster-details{ padding:0; overflow:hidden; }
  .roster-summary{
    cursor:pointer;
    list-style:none;
    padding:14px 18px;
    margin-bottom:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .roster-summary::-webkit-details-marker{ display:none; }
  .roster-summary::after{
    content:"⌄";
    color:var(--gold-light);
    font-size:14px;
    font-weight:700;
    transition: transform .2s ease;
  }
  .roster-details[open] .roster-summary::after{ transform:rotate(180deg); }
  .roster-details .module-row,
  .roster-details .formation-select-pitch-outer,
  .roster-details .formation-actions{ padding-left:18px; padding-right:18px; }
  .roster-details .formation-select-pitch-outer{ padding-bottom:2px; }
  .roster-details .formation-actions{ padding-bottom:16px; padding-top:10px; }
  .roster-details .formation-pitch-outer-wide{
    padding-left:18px; padding-right:18px; padding-bottom:18px; padding-top:2px;
  }

  /* --- Modulo & titolari --- */
  .module-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  .module-row label{ font-size:11px; font-weight:600; color:var(--text-secondary); }
  .module-row select{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--cream);
    font-weight:600;
    font-size:13px;
    padding:7px 12px;
    min-height:34px;
    min-width:110px;
  }

  /* --- Campo di selezione titolari: stessa forma del campo "Formazione Attuale",
       con le dropdown giocatore/numero posizionate secondo il modulo scelto --- */
  .formation-select-pitch-outer{
    border-radius:var(--radius-lg);
    padding:8px;
    background:var(--surface-2);
  }
  .formation-select-pitch{
    position:relative;
    width:100%;
    max-width:600px;
    height:600px;
    margin:0 auto;
    border-radius:var(--radius-md);
    background:
      repeating-linear-gradient(0deg,
        var(--grass-a) 0px, var(--grass-a) 34px,
        var(--grass-b) 34px, var(--grass-b) 68px);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85);
  }

  .starter-slot-pitch{
    position:absolute;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    width:100%;
    max-width:100px;
  }
  .starter-slot-pitch .slot-label{
    font-size:8px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold-light);
    background:rgba(11,21,51,0.6);
    border-radius:4px;
    padding:1px 5px;
    transition: color .15s ease, background .15s ease;
  }
  /* Un giocatore è stato assegnato a questa posizione: label evidenziata */
  .starter-slot-pitch .slot-label.slot-filled{
    color:var(--navy-deep);
    background:var(--gold-light);
  }
  .starter-slot-pitch .slot-player{
    width:100%;
    max-width:100px;
    background:rgba(11,21,51,0.88);
    border:1px solid rgba(201,162,75,0.5);
    border-radius:6px;
    color:var(--cream);
    font-size:10px;
    font-weight:600;
    padding:5px 3px;
    min-height:30px;
    text-align:center;
  }
  .starter-slot-pitch .slot-number{
    width:38px;
    background:rgba(11,21,51,0.88);
    border:1px solid rgba(201,162,75,0.5);
    border-radius:6px;
    color:var(--cream);
    font-size:10px;
    font-weight:600;
    padding:5px 2px;
    min-height:28px;
    text-align:center;
  }

  .formation-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

  /* --- Campo formazione: compatto, nomi ben leggibili --- */
  .formation-pitch-outer{
    border-radius:var(--radius-lg);
    padding:8px;
    background:var(--surface-2);
  }
  .formation-pitch{
    position:relative;
    width:100%;
    max-width:340px;
    margin:0 auto;
    aspect-ratio: 3 / 4;
    border-radius:var(--radius-md);
    background:
      repeating-linear-gradient(0deg,
        var(--grass-a) 0px, var(--grass-a) 34px,
        var(--grass-b) 34px, var(--grass-b) 68px);
    overflow:hidden;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.85);
  }
  /* "Campo — Formazione Attuale": 600×600 */
  .formation-pitch-outer-wide{ padding:12px; }
  .formation-pitch-wide{
    width:600px;
    max-width:100%;
    aspect-ratio:auto;
    height:600px;
  }

  /* Markings del campo (linea di metà campo, cerchio, aree di rigore):
     elementi statici, indipendenti dal contenuto generato via JS, sempre
     SOTTO il layer dei giocatori (z-index inferiore). Righe in bianco velato. */
  .pitch-marking{
    position:absolute;
    pointer-events:none;
    z-index:1;
  }
  .pitch-halfway{
    left:0; right:0; top:50%; height:2px;
    background:rgba(255,255,255,0.38);
  }
  .pitch-center-circle{
    left:50%; top:50%;
    width:70px; height:70px;
    margin-left:-35px; margin-top:-35px;
    border:2px solid rgba(255,255,255,0.38);
    border-radius:50%;
  }
  .pitch-box{
    left:22%; right:22%;
    height:14%;
    border:2px solid rgba(255,255,255,0.38);
  }
  .pitch-box-top{ top:0; border-top:none; }
  .pitch-box-bottom{ bottom:0; border-bottom:none; }

  /* Layer dei giocatori (gestito via JS con innerHTML): sempre sopra i markings */
  .pitch-tokens-layer{
    position:absolute;
    inset:0;
    z-index:2;
  }

  .player-token{
    position:absolute;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    width:auto;
    max-width:110px;
  }
  /* Indicatore di sostituzione: mostrato sopra il nome del giocatore entrato,
     con il cognome di chi è stato sostituito in stile più trasparente. */
  .player-token .pt-sub-tag{
    font-size:8px;
    font-weight:600;
    color:rgba(232,207,139,0.65);
    background:rgba(11,21,51,0.4);
    border:1px solid rgba(201,162,75,0.22);
    padding:1px 6px;
    border-radius:6px;
    white-space:nowrap;
  }
  .player-token .pt-name{
    font-size:10.5px;
    font-weight:700;
    text-align:center;
    color:#fff;
    background:rgba(11,21,51,0.72);
    border:1px solid rgba(201,162,75,0.4);
    padding:3px 7px;
    border-radius:8px;
    white-space:nowrap;
    box-shadow:0 2px 5px rgba(0,0,0,0.3);
  }
  .player-token .pt-icons{ display:flex; gap:2px; }
  .player-token .pt-icons button{
    all:unset; cursor:pointer;
    font-size:11px; line-height:1;
    background:rgba(0,0,0,0.5);
    border-radius:5px;
    padding:3px 4px;
    min-width:22px; min-height:22px;
    text-align:center;
  }
  .player-token .pt-icons button:hover{ background:rgba(0,0,0,0.75); }
  .player-token .pt-icons button:disabled{ opacity:0.3; cursor:not-allowed; }
  /* Pulsante "✕" di correzione rapida: più piccolo e distinto dagli altri tre */
  .player-token .pt-icons .pt-reset{
    font-size:9px;
    padding:2px 3px;
    min-width:16px; min-height:16px;
    color:#ffb3ac;
    background:rgba(163,24,29,0.35);
    align-self:center;
  }
  .player-token .pt-icons .pt-reset:hover{ background:rgba(163,24,29,0.6); }
  .player-token .pt-stats{ font-size:7.5px; color:var(--gold-light); text-shadow:0 1px 2px rgba(0,0,0,0.6); text-align:center; }

  /* Blocco formazione dedicato in fondo al report (ultimo dato) */
  .print-formation-block .formation-pitch{ max-width:420px; }

  /* --- Sostituzioni --- */
  .sub-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .sub-row select{
    flex:1 1 150px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--cream);
    font-size:13px;
    padding:9px 11px;
  }
  .sub-arrow{ color:var(--gold-light); font-size:15px; }
  .subs-log{ display:flex; flex-direction:column; gap:5px; }
  .subs-log-item{
    font-size:12px; color:var(--text-secondary);
    background:var(--surface-2);
    border-radius:var(--radius-sm);
    padding:7px 10px;
  }

  /* Sessione live chiusa: blocca visivamente e funzionalmente l'inserimento dati */
  body.match-ended .zone-buttons button,
  body.match-ended .general-stats-grid button,
  body.match-ended .pt-icons button,
  body.match-ended #subsCard button,
  body.match-ended #subsCard select,
  body.match-ended .formation-actions button,
  body.match-ended #formationSelectPitch select,
  body.match-ended #moduleSelect{
    pointer-events:none;
    opacity:0.4;
  }

  /* ============================================================
     FOOTER + POPUP CONTATTI
     ============================================================ */
  .site-footer{
    width:100%;
    max-width:820px;
    text-align:center;
    padding:22px 16px 26px;
  }
  .footer-credit{
    all:unset;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--text-tertiary);
    padding:6px 10px;
    border-radius:20px;
    transition: color .15s ease, background .15s ease;
  }
  .footer-credit:hover{ color:var(--gold-light); background:rgba(201,162,75,0.1); }

  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(5,9,24,0.6);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1000;
  }
  .modal-overlay.show{ display:flex; }
  .modal-box{
    background:linear-gradient(180deg, rgba(23,34,74,0.98), rgba(11,21,51,0.98));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    max-width:340px;
    width:100%;
    padding:26px 24px 22px;
    text-align:center;
  }
  .modal-title{
    font-size:17px;
    font-weight:700;
    color:var(--gold-light);
    margin:0 0 10px;
  }
  .modal-text{
    font-size:13.5px;
    color:var(--text-secondary);
    line-height:1.5;
    margin:0 0 18px;
  }
  .modal-text a{
    color:var(--gold-light);
    font-weight:600;
    text-decoration:none;
  }
  .modal-text a:hover{ text-decoration:underline; }
  .modal-close{
    all:unset;
    cursor:pointer;
    display:inline-block;
    font-size:13px;
    font-weight:600;
    color:var(--navy-deep);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    padding:9px 22px;
    border-radius:20px;
  }
  .modal-close:hover{ filter:brightness(1.08); }
  .modal-close-secondary{
    margin-top:10px;
    color:var(--text-secondary) !important;
    background:transparent !important;
  }
  .modal-close-secondary:hover{ color:var(--gold-light) !important; }

  #addPlayerForm{ text-align:left; }
  #addPlayerForm select.login-input{
    -webkit-appearance:none;
    appearance:none;
  }

  /* ============================================================
     RESET ALL
     ============================================================ */
  .reset-all-wrap{
    width:100%;
    text-align:center;
    margin-top:6px;
  }
  .reset-all-btn{
    all:unset;
    cursor:pointer;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--text-tertiary);
    padding:6px 10px;
    border-radius:10px;
    opacity:0.6;
  }
  .reset-all-btn:hover{ opacity:1; color:#f0b3ae; background:rgba(199,42,42,0.1); }

  /* ============================================================
     LOGIN (opzionale, Blocco 6 di config.js)
     ============================================================ */
  /* Finché il body ha questa classe, tutto il contenuto dell'app resta
     sfocato e non interagibile: solo l'overlay di login è utilizzabile. */
  body.gate-active .wrap,
  body.gate-active .site-footer,
  body.gate-active .reset-all-wrap{
    filter: blur(16px);
    pointer-events: none;
    user-select: none;
  }
  .login-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:3000;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:
      radial-gradient(circle at 15% 8%, rgba(199,42,42,0.35), transparent 45%),
      radial-gradient(circle at 85% 92%, rgba(36,52,104,0.5), transparent 50%),
      linear-gradient(160deg, rgba(10,17,40,0.72) 0%, rgba(10,17,40,0.72) 100%),
      rgba(5,9,24,0.55);
  }
  body.gate-active .login-overlay{ display:flex; }

  .login-box{
    background:linear-gradient(180deg, rgba(23,34,74,0.98), rgba(11,21,51,0.98));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    max-width:340px;
    width:100%;
    padding:30px 26px 26px;
    text-align:center;
  }
  .login-logo{
    width:64px; height:64px;
    object-fit:contain;
    margin:0 auto 14px;
    display:block;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  }
  .login-title{
    font-size:17px;
    font-weight:700;
    color:var(--gold-light);
    margin-bottom:4px;
    letter-spacing:-0.01em;
  }
  .login-sub{
    font-size:12.5px;
    color:var(--text-secondary);
    margin-bottom:20px;
    line-height:1.4;
  }
  .login-input{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--cream);
    font-size:14px;
    padding:11px 13px;
    margin-bottom:10px;
    outline:none;
    text-align:center;
  }
  .login-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,0.2); }
  .login-input::placeholder{ color:var(--text-tertiary); }
  .login-error{
    min-height:16px;
    font-size:12px;
    color:#f0b3ae;
    margin-bottom:12px;
  }
  .login-submit{
    all:unset;
    cursor:pointer;
    display:block;
    width:100%;
    text-align:center;
    box-sizing:border-box;
    font-size:14px;
    font-weight:700;
    color:var(--navy-deep);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    padding:11px 0;
    border-radius:20px;
  }
  .login-submit:hover{ filter:brightness(1.08); }
  .login-submit:active{ opacity:0.85; }

  @media print{
    .login-overlay{ display:none !important; }
  }