/* Loop TV MGA Tour 2027 (mga/tv/): grafica sullo stile delle leaderboard e dei tee times di pgatour.com.
   Foglio bianco con gli angoli arrotondati su fondo verde, testata con logo, nome del campo, orologio e sponsor,
   categorie a pillole, primi cinque in fila con la foto, tabella a righe sottili che scorre piano.
   Tela fissa 1920x1080 (o 1080x1920) scalata alla finestra da tv.js. */
:root {
  --inchiostro: #16181d;
  --grigio: #5f6368;        /* 6:1 sul bianco */
  --grigio-chiaro: #8a8f95;
  --riga: #e3e5e8;
  --traccia: #d4d7db;
  --verde-scuro: #0c4a2b;   /* etichetta della tappa, pillole */
  --verde: #1a7344;         /* dati che contano, 5.6:1 */
  --verde-tenue: #e6f2ea;
  --font: "Open Sans", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d2a1c; }
body { font-family: var(--font); color: var(--inchiostro); font-variant-numeric: tabular-nums; }

#tela { position: absolute; left: 50%; top: 50%; transform-origin: center; width: 1920px; height: 1080px; overflow: hidden;
  background: #0d2a1c; display: flex; padding: 24px; }
#tela.verticale { width: 1080px; height: 1920px; padding: 20px; }

/* il foglio bianco staccato dai bordi, con gli angoli arrotondati */
.foglio { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; background: #fff; border-radius: 18px; padding: 28px 72px 16px; }
.verticale .foglio { padding: 28px 36px 16px; }

/* corpo della schermata: riempie il foglio tra testata e firma */
.corpo, .contenuto { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* testata */
.testata { flex: none; display: flex; align-items: center; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--riga); }
.testata .logo { flex: none; height: 150px; width: auto; }
.titoli { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.stato { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); white-space: nowrap; }
.stato .tappa { background: var(--verde-scuro); color: #fff; font-size: 16px; padding: 3px 10px; border-radius: 4px; }
.stato.parziale { color: #8a5300; }
.titoli h1 { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { display: flex; gap: 28px; font-size: 28px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); white-space: nowrap; overflow: hidden; }

.ora { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 30px; border-right: 1px solid var(--riga); }
.ora b { font-size: 28px; font-weight: 700; line-height: 1; color: var(--inchiostro); }
/* orologio sobrio: cerchio sottile, dodici tacche, lancette scure, secondi in verde */
.orologio { position: relative; width: 76px; height: 76px; border-radius: 50%; flex: none; border: 2px solid var(--riga); }
.orologio .tacca, .orologio .lancetta { position: absolute; left: calc(50% - 1px); width: 2px; transform-origin: bottom center; border-radius: 1px; }
.orologio .tacca { top: 3px; height: 33px; border-top: 5px solid #b9bec4; }
.orologio .tacca.quarto { border-top-color: var(--inchiostro); }
.orologio .lancetta { background: var(--inchiostro); z-index: 2; }
.orologio .lancetta.s { top: 6px; height: 30px; width: 1px; left: calc(50% - .5px); background: var(--verde); z-index: 3; animation: giro 60s linear infinite; }
.orologio .lancetta.m { top: 9px; height: 27px; width: 3px; left: calc(50% - 1.5px); animation: giro 3600s linear infinite; }
.orologio .lancetta.h { top: 16px; height: 20px; width: 4px; left: calc(50% - 2px); animation: giro 43200s linear infinite; }
.orologio .perno { position: absolute; left: calc(50% - 3px); top: 33px; width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro); z-index: 4; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orologio .lancetta { animation-play-state: paused; } }
.sponsor { flex: none; width: 420px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sponsor span { font-size: 16px; color: var(--grigio); }
.sponsor img { width: 400px; height: 90px; }


/* categorie del giro: pillole, quella in onda piena */
.schede { flex: none; display: flex; gap: 12px; }
.schede span { font-size: 24px; font-weight: 600; color: var(--grigio); background: #f0f1f3; padding: 10px 26px; border-radius: 999px; white-space: nowrap; }
.schede span.attiva { color: #fff; font-weight: 700; background: var(--verde-scuro); }
/* barra del giro: a fondo pagina, tutta la larghezza, si riempie fino alla schermata successiva (tv.js) */
.avanzamento { position: absolute; left: 24px; right: 24px; bottom: 8px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.18); }
.verticale .avanzamento { left: 20px; right: 20px; bottom: 6px; }
.avanzamento i { position: absolute; inset: 0; background: #8fe0b4; transform-origin: left; transform: scaleX(0); }

/* titolo della sezione, con l'etichetta grigia a destra */
.sezione { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0 14px; }
.sezione h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.sezione .etichetta { font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); background: #f0f1f3; padding: 6px 16px; border-radius: 4px; white-space: nowrap; }

/* i primi cinque in una riga: foto grande, posto, nome e punti */
.podio { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 0 0 34px 24px; }
.primo { position: relative; display: flex; align-items: center; gap: 12px; height: 108px; border: 1px solid var(--riga); border-radius: 8px; min-width: 0; }
.primo img { width: 80px; height: 108px; object-fit: cover; flex: none; background: #eef0f2; border-radius: 7px 0 0 7px; }
/* il centro del cerchio sull'angolo in basso a sinistra della foto: non copre il giocatore */
.primo .posto { position: absolute; left: -25px; bottom: -25px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: var(--verde-scuro); color: #fff; font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.primo .chi { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* punti MGA su fondo verde, testo bianco */
.primo .mga { flex: none; align-self: stretch; width: 80px; margin: -1px -1px -1px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--verde); border-radius: 0 8px 8px 0; }
.primo .mga b { font-size: 38px; font-weight: 800; color: #fff; display: block; }
.primo .mga small { font-size: 14px; line-height: 1.1; text-align: center; color: #fff; margin-top: 4px; }
/* nelle schede il cognome sulla prima riga e il nome sotto, senza tagli a meta' parola */
.primo b { font-size: 19px; font-weight: 400; line-height: 1.2; min-width: 0; }
.primo b .nome { display: flex; flex-direction: column; min-width: 0; }
.primo b .nome strong, .primo b .nome em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.primo .chi small { font-size: 18px; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* tabella */
.tabella { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.finestra { flex: 1; min-height: 0; overflow: hidden; }
.scorre { will-change: transform; }
.riga { flex: none; display: grid; align-items: center; column-gap: 20px; height: 54px; border-bottom: 1px solid var(--riga); font-size: 26px; }
.riga.testa { height: 40px; border-bottom: 3px solid var(--inchiostro); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); }
.riga.testa .n { font-size: 16px; font-weight: 700; }
.riga .pos { font-weight: 700; }
.riga .n { text-align: center; font-weight: 700; }
.riga .circolo { font-size: 21px; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga .punti { color: var(--verde); font-weight: 800; }
.riga:not(.testa) .n.hcp, .riga:not(.testa) .n.stb { font-weight: 400; }
.riga .tenue { color: var(--grigio-chiaro); font-weight: 400; }
.riga .scartato { color: var(--grigio-chiaro); font-weight: 400; text-decoration: line-through; }
.riga.fg .pos, .riga.fg .nome, .riga.fg .n { color: var(--grigio-chiaro); font-weight: 400; }
.giocatore { display: flex; align-items: center; gap: 14px; min-width: 0; }
.giocatore img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: #eef0f2; }
.giocatore .nome { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.giocatore .nome strong, .primo .chi strong { font-weight: 700; }
.pass { flex: none; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #a3241c; border: 1px solid #e8b4ae; border-radius: 3px; padding: 1px 7px; }
/* colonna attiva, come la pillola del giro in corso */
.pillola { display: inline-block; min-width: 64px; padding: 3px 10px; border-radius: 4px; background: var(--verde-scuro); color: #fff; }
.riga.zona { border-bottom: 3px solid var(--verde); }

.g .riga { grid-template-columns: 80px minmax(0, 1fr) 310px 110px 170px 170px; }
.gen .riga { grid-template-columns: 80px minmax(0, 1fr) 310px repeat(6, 90px) 130px; }
.gen .riga .tot { font-weight: 800; }

/* partenze, come i tee times: orario, buca, i quattro giocatori in fila, stato */
.p .riga { grid-template-columns: 150px 90px minmax(0, 1fr) 190px; height: 76px; }
.p .riga.testa { height: 40px; }
.p .ora-p { font-size: 32px; font-weight: 800; line-height: 1; }
.p .buca { text-align: center; font-size: 30px; font-weight: 700; }
.p .gruppo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; min-width: 0; }
.p .gruppo .giocatore { gap: 12px; }
.p .gruppo .nome { font-size: 22px; font-weight: 400; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p .gruppo img { width: 46px; height: 46px; }
.p .quando { text-align: right; font-size: 22px; font-weight: 700; white-space: nowrap; }
.p .quando.prossima { color: var(--verde); }
.p .quando.prossima::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); margin-right: 10px; vertical-align: 2px; }
.p .riga.prossima { background: var(--verde-tenue); }

/* firma in basso a destra: logo golfnova e "Powered by" Arsnova Studio, piccoli come nella testata di golfnova */
.firma { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 8px; }
.firma .golfnova { height: 22px; width: auto; }
.firma .powered { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 12px; border-left: 1px solid var(--riga); line-height: 1; }
.firma .powered span { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.firma .powered img { height: 12px; width: auto; }

/* verticale */
.verticale .testata { flex-wrap: wrap; row-gap: 20px; }
.verticale .testata .logo { height: 120px; }
.verticale .sponsor { height: 120px; }
.verticale .titoli { order: 5; flex: 0 0 100%; }
.verticale .titoli h1 { font-size: 64px; }
.verticale .primo { flex-direction: column; height: auto; padding: 0; gap: 8px; text-align: center; position: relative; }
.verticale .primo img { width: 100%; height: 150px; border-radius: 7px 7px 0 0; }
.verticale .primo .posto { position: absolute; top: 128px; bottom: auto; left: -22px; width: 44px; height: 44px; font-size: 19px; }
.verticale .primo .chi { padding: 20px 8px 0 24px; align-items: center; }
.verticale .primo b { font-size: 19px; }
.verticale .primo small { font-size: 15px; }
.verticale .ora { margin-left: auto; }
.verticale .sponsor { width: 340px; }
.verticale .sponsor img { width: 320px; height: 72px; }
.verticale .schede { gap: 8px; }
.verticale .schede span { font-size: 19px; padding: 8px 16px; }
.verticale .g .riga { grid-template-columns: 64px minmax(0, 1fr) 90px 150px; }
.verticale .g .circolo, .verticale .g .hcp { display: none; }
.verticale .gen .riga { grid-template-columns: 64px minmax(0, 1fr) repeat(6, 60px) 96px; column-gap: 12px; font-size: 24px; }
.verticale .gen .circolo { display: none; }
.verticale .pillola { min-width: 0; padding: 2px 6px; }
/* in verticale una scheda per gruppo: fascia verde con orario e buca, i quattro nomi sotto; due schede per riga (buca 1 e buca 10) */
.p .buca small { display: none; }
.verticale .p .scorre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 16px; align-content: start; }
.verticale .p .riga.testa { display: none; }
.verticale .p .riga { grid-template-columns: auto 1fr auto; grid-template-areas: "ora quando buca" "gruppo gruppo gruppo"; height: auto; padding: 0; column-gap: 0; border: 1px solid var(--riga); border-radius: 10px; overflow: hidden; }
.verticale .p .ora-p { grid-area: ora; background: var(--verde-scuro); color: #fff; padding: 12px 18px; font-size: 32px; }
.verticale .p .buca { grid-area: buca; background: var(--verde-scuro); color: #fff; text-align: right; padding: 12px 18px; font-size: 26px; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.verticale .p .buca small { display: inline; font-size: 20px; font-weight: 400; color: #cfe9d9; }
.verticale .p .riga.prossima .ora-p, .verticale .p .riga.prossima .buca { background: var(--verde); }
.verticale .p .gruppo { grid-area: gruppo; grid-template-columns: 1fr; row-gap: 6px; padding: 14px 18px 16px; }
.verticale .p .gruppo .nome { font-size: 25px; -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.verticale .p .quando { grid-area: quando; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 0 12px; background: var(--verde-scuro); color: #cfe9d9; font-size: 20px; font-weight: 600; }
.verticale .p .riga.prossima .quando { background: var(--verde); color: #fff; font-weight: 800; }
.verticale .p .quando.prossima::before { background: #8fe0b4; }
.p .riga.testa .buca, .p .riga.testa .quando { font-size: 16px; color: var(--grigio); }
.riga.testa .circolo { font-size: 16px; color: var(--grigio); }

.verticale .primo .mga { width: auto; align-self: stretch; margin: 4px -1px -1px; padding: 8px 0; flex-direction: row; align-items: baseline; gap: 6px; border-radius: 0 0 8px 8px; }
.verticale .primo .mga small { color: #fff; font-size: 15px; }
.verticale .primo .mga b { font-size: 32px; }
.verticale .sezione { flex-wrap: wrap; row-gap: 10px; }

/* schermata di messaggio (nessuna gara, partenze in arrivo, collegamento) */
.messaggio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.messaggio h2 { font-size: 52px; font-weight: 700; color: var(--inchiostro); max-width: 1400px; }
.messaggio p { font-size: 28px; color: var(--grigio); }
.firma .offline { margin-right: auto; font-size: 18px; font-weight: 600; color: #8a5300; }
.verticale .messaggio h2 { font-size: 44px; }
.stato .tappa:empty { display: none; }
.giocatore .nome em { font-style: normal; }