/* ============================================================
   CR1 — Grafica "Classifica" (stili condivisi)
   Usata da classifica_template.html e da editor.html
   ============================================================ */

@font-face{font-family:'Oswald';font-weight:400;font-display:block;src:url('../fonts/oswald-400.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-weight:500;font-display:block;src:url('../fonts/oswald-500.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-weight:600;font-display:block;src:url('../fonts/oswald-600.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-weight:700;font-display:block;src:url('../fonts/oswald-700.woff2') format('woff2');}

:root{
  --gold:#f2be1d;
  --gold-soft:#f6cf57;
  --cyan:#36c6f2;
  --green:#9ed64a;
  --pink:#f7707f;
  --white:#ffffff;
}

/* Il "palco" è sempre 1920x1080: è ciò che viene esportato/mandato in onda */
.stage{
  position:relative;width:1920px;height:1080px;overflow:hidden;
  font-family:'Oswald','Arial Narrow',sans-serif;
  background:#2a5220 url('grass.jpg') center/cover no-repeat;
}

/* ---------- HEADER ---------- */
.stage .header{position:absolute;top:50px;left:140px;display:flex;align-items:flex-start;gap:26px;z-index:5;}
.stage .logo{height:80px;display:block;margin-top:4px;filter:drop-shadow(0 3px 9px rgba(0,0,0,.5));}
.stage .titles{display:flex;flex-direction:column;line-height:1.02;text-shadow:0 3px 10px rgba(0,0,0,.6);}
.stage .title-main{font-weight:700;font-size:60px;letter-spacing:.5px;color:var(--white);text-transform:uppercase;}
.stage .title-main .reg{color:var(--gold);font-weight:600;text-transform:none;}
.stage .title-sub{font-weight:600;font-style:italic;font-size:38px;color:var(--white);margin-top:2px;}

/* ---------- ETICHETTA VERTICALE ---------- */
.stage .vlabel{position:absolute;right:0;top:0;bottom:0;width:210px;display:flex;align-items:center;justify-content:center;z-index:4;}
.stage .vlabel span{
  transform:rotate(-90deg);white-space:nowrap;
  font-weight:700;font-size:172px;line-height:1;color:var(--gold);letter-spacing:4px;
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}

/* ---------- TABELLA ---------- */
.stage .table{position:absolute;top:250px;left:140px;width:1470px;display:flex;gap:70px;z-index:5;}
.stage .col{flex:1;display:flex;flex-direction:column;gap:27px;}
.stage .row{display:flex;align-items:center;height:56px;}
.stage .row .name{
  font-weight:600;font-size:37px;letter-spacing:.5px;color:var(--white);text-transform:uppercase;white-space:nowrap;
  text-shadow:0 2px 7px rgba(0,0,0,.75);
}
.stage .row.promozione   .name{color:var(--cyan);}
.stage .row.playoff      .name{color:var(--green);}
.stage .row.playout      .name{color:var(--gold);}
.stage .row.retrocessione .name{color:var(--pink);}

.stage .row .line{flex:1;height:5px;margin:0 14px;background:var(--gold);box-shadow:0 0 8px rgba(242,190,29,.5);border-radius:2px;}
.stage .row .pts{
  min-width:74px;height:56px;padding:0 8px;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--gold);background:rgba(15,30,10,.55);border-radius:4px;
  font-weight:700;font-size:38px;color:var(--white);
}

/* ---------- FOOTER ---------- */
.stage .footer{position:absolute;left:0;bottom:34px;width:100%;height:64px;display:flex;align-items:center;z-index:6;}
.stage .prog{
  display:flex;align-items:center;height:64px;padding:0 46px 0 140px;
  background:linear-gradient(90deg, rgba(10,18,8,.92) 80%, rgba(10,18,8,0) 100%);
  font-weight:700;font-style:italic;font-size:40px;color:var(--white);letter-spacing:1px;text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
}
.stage .note{
  color:var(--gold-soft);font-weight:500;font-size:30px;letter-spacing:.5px;margin-left:26px;white-space:nowrap;
  text-shadow:0 2px 7px rgba(0,0,0,.8);
}
.stage .note b{color:var(--white);font-weight:600;}