/* =====================================================
   SchedoneWeb – lo stile (sopra Bootstrap 5)
   I colori principali sono qui in cima: cambiali e cambia tutta l'app
   ===================================================== */
:root {
  --campo: #0b6b4b;          /* verde campo: barra in alto e pulsanti */
  --campo-scuro: #08513a;
  --oro: #f5b800;            /* le monete e il vincitore */
  --sfondo: #f2f5f3;
  --carta: #ffffff;
  --bordo: #dfe6e2;
  --testo-tenue: #5d6b64;
  --bs-primary: var(--campo);
  --bs-primary-rgb: 11, 107, 75;
  --bs-link-color: var(--campo);
  --bs-link-hover-color: var(--campo-scuro);
}
[data-bs-theme="dark"] {
  --sfondo: #0f1714;
  --carta: #17221d;
  --bordo: #2a3a33;
  --testo-tenue: #9fb2a9;
  --bs-body-bg: var(--sfondo);
  --bs-link-color: #4fd3a0;
}

body { background: var(--sfondo); padding-bottom: env(safe-area-inset-bottom); }
.btn-primary { --bs-btn-bg: var(--campo); --bs-btn-border-color: var(--campo); --bs-btn-hover-bg: var(--campo-scuro); --bs-btn-hover-border-color: var(--campo-scuro); --bs-btn-active-bg: var(--campo-scuro); }
.btn-outline-primary { --bs-btn-color: var(--campo); --bs-btn-border-color: var(--campo); --bs-btn-hover-bg: var(--campo); --bs-btn-hover-border-color: var(--campo); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #4fd3a0; --bs-btn-border-color: #4fd3a0; }
.text-tenue { color: var(--testo-tenue) !important; }

/* --- Barra in alto ------------------------------------------- */
.barra-alta { background: var(--campo); color: #fff; padding: .55rem 0; padding-top: max(.55rem, env(safe-area-inset-top)); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.marchio { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; }
.marchio img { border-radius: 9px; }
.menu-alto a { color: rgba(255,255,255,.85); text-decoration: none; padding: .4rem .75rem; border-radius: 8px; font-weight: 500; }
.menu-alto a:hover, .menu-alto a.attiva { background: rgba(255,255,255,.16); color: #fff; }
.moneta { background: rgba(0,0,0,.2); border-radius: 20px; padding: .25rem .7rem; font-weight: 700; white-space: nowrap; }

.btn-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--campo); font-weight: 800; padding: 0; border: 0; }
.area-admin .barra-alta { background: #1f2a26; }

/* --- Menu in basso (telefono) -------------------------------- */
.contenuto { padding-bottom: 90px !important; }
@media (min-width: 992px) { .contenuto { padding-bottom: 2rem !important; } }
.menu-basso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--carta); border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.menu-basso a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; color: var(--testo-tenue); text-decoration: none; font-size: .72rem; font-weight: 600; }
.menu-basso a .bi { font-size: 1.35rem; line-height: 1; }
.menu-basso a.attiva { color: var(--campo); }
[data-bs-theme="dark"] .menu-basso a.attiva { color: #4fd3a0; }

/* --- Schede ---------------------------------------------------- */
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; padding: 1.1rem; }
.scheda + .scheda { margin-top: 1rem; }
.titolo-pagina { font-weight: 800; font-size: 1.45rem; margin: .25rem 0 1rem; }
.etichetta { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); font-weight: 700; }

/* Il montepremi in home */
.montepremi { background: linear-gradient(135deg, var(--campo), #13906a); color: #fff; border-radius: 18px; padding: 1.2rem; position: relative; overflow: hidden; }
.montepremi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border: 18px solid rgba(255,255,255,.08); border-radius: 50%; }
.montepremi .cifra { font-size: 2.4rem; font-weight: 800; line-height: 1.1; }


/* Lo stato della giornata */
.stato { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px; }
.stato-bozza { background: #e9ecef; color: #495057; }
.stato-aperta { background: #d1f2e3; color: #0b6b4b; }
.stato-chiusa { background: #fff1c2; color: #8a6400; }
.stato-conclusa { background: #dde4ff; color: #2b3f9e; }

/* --- La schedina ------------------------------------------------ */
.partita { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--bordo); }
.partita:last-child { border-bottom: 0; }
.partita .num { width: 26px; height: 26px; border-radius: 50%; background: var(--sfondo); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.partita .squadre { flex: 1; min-width: 0; line-height: 1.25; }
.partita .squadre b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serie { font-size: .65rem; font-weight: 800; padding: .05rem .35rem; border-radius: 4px; color: #fff; margin-right: .3rem; vertical-align: 1px; }
.serie-A { background: #1d4ed8; } .serie-B { background: #b45309; } .serie-C { background: #6d28d9; }
.segni { display: flex; gap: .35rem; flex: none; }
.segni input { position: absolute; opacity: 0; pointer-events: none; }
.segni label { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--bordo); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; cursor: pointer; user-select: none; transition: .12s; background: var(--carta); }
.segni input:checked + label { background: var(--campo); border-color: var(--campo); color: #fff; transform: scale(1.05); }
.segni input:focus-visible + label { outline: 3px solid var(--oro); }
.segni input:disabled + label { cursor: default; opacity: .55; }
.segni input:disabled:checked + label { opacity: 1; }
.barra-gioca { position: sticky; bottom: 70px; z-index: 5; }
@media (min-width: 992px) { .barra-gioca { bottom: 1rem; } }

/* Le schedine di tutti: la griglia con i segni */
.griglia { font-size: .85rem; }
.griglia th, .griglia td { text-align: center; vertical-align: middle; white-space: nowrap; }
.griglia .nome { text-align: left; position: sticky; left: 0; background: var(--carta); z-index: 1; }
.segno { display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 7px; font-weight: 800; background: var(--sfondo); }
.segno.giusto { background: #16a34a; color: #fff; }
.segno.sbagliato { background: #fde2e2; color: #b91c1c; }
[data-bs-theme="dark"] .segno.sbagliato { background: #4a1d1d; color: #fca5a5; }

/* Classifica */
.posizione { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--sfondo); }
.posizione.oro { background: var(--oro); color: #3d2e00; }
.vincitore { border: 2px solid var(--oro); background: linear-gradient(135deg, rgba(245,184,0,.18), transparent); }

/* Accesso */
.pagina-accesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--campo), #062e21); padding: 1rem; }
.pagina-accesso .scheda { width: 100%; max-width: 380px; }

/* Demo */
.demo-striscia { background: #fff3cd; color: #664d03; }

/* La moneta virtuale: un cerchio d'oro con la stella */
.mon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: var(--oro); box-shadow: inset 0 0 0 .09em #c48f00;
  vertical-align: -.12em; position: relative; }
.mon::after { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .6em; color: #7a5600; }

/* Il riquadro "Installa sul telefono" */
.installa { border: 2px dashed var(--campo); }
.installa[hidden], .installa [hidden] { display: none !important; }