/* Il Garibaldi online, in stile Vice come il libretto: fondo viola notte, schede viola, etichette rosa
   chiaro, scelte color pesca, Helvetica; titoli in Pricedown convertito in tracciati (il font non va
   sul sito), riquadri inclinati e la lastra a sfumatura arancio, rosa, viola e blu. Solo tema scuro,
   come le pagine di prova in stile Vice. Pavimento: comandi da 44 px, testo da 14 px, contrasto AA. */
:root {
  --notte: #140D1E; --fondo: #1E1728; --carta: #30233E; --carta-2: #261D33; --riga: #4B2F54; --riga-tg: #3C2A4E;
  --inchiostro: #FFFFFF; --tenue: #CDBCDB; --rosa: #FFC2D0; --pesca: #FFD4A8; --arancio: #FFAD36; --fucsia: #FF5FA2; --ciano: #36D1DC; --viola: #B04DE0; --blu: #4A6CFF;
  --sprint: #36D1DC; --gpm: #FFAD36; --intergiro: #8B6CFF; --via: #FFFFFF; --arrivo: #FFD4A8; --su-segno: #1E1728;
  --p0: #4A6CFF; --p1: #B04DE0; --p2: #FF5FA2; --p3: #FFAD36;
  --sfumatura: linear-gradient(100deg, #FFB347, #FF5FA2 36%, #B04DE0 70%, #4A6CFF);
  --testo: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --raggio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fondo); color: var(--inchiostro); font-family: var(--testo); font-size: 17px; line-height: 1.5; overflow-x: clip; }
a { color: var(--pesca); }
img { max-width: 100%; height: auto; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; }
small { font-size: 14px; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 4px; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--pesca); color: #1E1728; padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.salta:focus { top: 12px; }
.tenue { color: var(--tenue); }
.nota { color: var(--tenue); font-size: 15px; margin-top: 12px; }
.fascia { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main { display: block; min-height: 60vh; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- barra in alto e HUD */
.barra { position: sticky; top: 0; z-index: 20; background: var(--notte); border-bottom: 1px solid #2A1F38; }
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--sfumatura); }
.barra-dentro { max-width: 1120px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; min-height: 44px; min-width: 0; }
.marchio img { height: 34px; width: auto; display: block; }
.marchio .divisore { width: 1px; align-self: stretch; background: #4B3A5C; }
.marchio-titolo { height: 30px; width: auto; display: block; }
/* il logo porta al sito di GoOff, il nome del campionato all'inizio di questo sito */
.marchio a { display: flex; align-items: center; min-height: 44px; min-width: 44px; color: #fff; text-decoration: none; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .marchio a:hover { opacity: .85; } }
@media (max-width: 560px) { .marchio-casa { display: none !important; } }
.hud { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hud-cento { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.hud-cento svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.anello-fondo { fill: none; stroke: #3A2C4A; stroke-width: 4; }
.anello { fill: none; stroke: var(--pesca); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.hud-p { position: relative; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hud-p [data-cento] { font-size: 14px; }
.hud-stelle .difficolta { display: inline-flex; gap: 2px; }
.difficolta svg { width: 18px; height: 18px; }
.difficolta .pieno path { fill: var(--pesca); }
.difficolta .vuoto path { fill: none; stroke: var(--rosa); stroke-width: 1.6; opacity: .55; }
.hud-stelle .difficolta svg { width: 16px; height: 16px; }
.hud-stelle.lampeggia .pieno path { animation: lampo .5s steps(2) 6; }
@keyframes lampo { 50% { fill: #FF2A4A; } }
.bottone-menu { appearance: none; border: 0; background: var(--pesca); color: #1E1728; font: 700 16px/1 var(--testo); min-height: 44px; padding: 0 14px; border-radius: 22px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hamburger { display: grid; gap: 3px; width: 16px; } .hamburger i { display: block; height: 2px; background: currentColor; border-radius: 1px; }
@media (max-width: 560px) {
  .marchio .divisore, .marchio-titolo { display: none; }
  .marchio img { height: 30px; }
  .hud-stelle .difficolta svg { width: 13px; height: 13px; }
  .bottone-menu { padding: 0 12px; }
  .bottone-menu > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bottone-menu { width: 44px; justify-content: center; padding: 0; }
}

/* ---------------------------------------------------------------- il menu */
.menu { position: fixed; inset: 0; z-index: 50; }
.menu[hidden] { display: none; }
.menu-fondo { position: absolute; inset: 0; background: rgba(10, 6, 16, .72); }
.menu-foglio { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--notte); overflow-y: auto; overscroll-behavior: contain; padding: 0 max(18px, env(safe-area-inset-right, 0px)) 40px 18px; box-shadow: -10px 0 40px rgba(0,0,0,.5); }
.menu-foglio::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #FFB347, #FF5FA2 36%, #B04DE0 70%, #4A6CFF); }
.js .menu-foglio { animation: entra .25s ease-out; }
@keyframes entra { from { transform: translateX(30px); } }
.menu-testa { position: sticky; top: 0; background: var(--notte); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; z-index: 1; }
.menu-titolo { height: 34px; width: auto; }
.chiudi { appearance: none; border: 2px solid var(--rosa); background: transparent; color: var(--rosa); font: 700 16px var(--testo); min-height: 44px; padding: 0 16px; border-radius: 22px; cursor: pointer; }
.menu-gruppo { margin-top: 18px; }
.menu-gruppo h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--rosa); margin: 0 0 6px; }
.menu-gruppo ul { list-style: none; margin: 0; padding: 0; }
.menu-gruppo a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 17px; }
.menu-gruppo a[aria-current="page"] { background: var(--carta); box-shadow: inset 4px 0 0 var(--pesca); }
.menu-num { min-width: 36px; height: 30px; border-radius: 15px; background: var(--carta); color: var(--pesca); display: grid; place-items: center; font-weight: 700; font-size: 14px; padding: 0 6px; }
.menu-num .segno { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .menu-gruppo a:hover { background: var(--carta); } }
.visto { margin-left: auto; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid #4B3A5C; }
.visto-si .visto, .visto-si > .visto { border-color: var(--pesca); background: var(--pesca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231E1728' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.telefono p { color: var(--tenue); font-size: 15px; }
.tastiera { display: flex; gap: 8px; }
.tastiera input { flex: 1; min-width: 0; min-height: 48px; border-radius: 12px; border: 2px solid #4B3A5C; background: var(--fondo); color: #fff; font: 700 18px var(--testo); letter-spacing: .12em; text-transform: uppercase; padding: 0 14px; }
.tastiera button, .bottone { appearance: none; border: 0; background: var(--pesca); color: #1E1728; font: 700 17px/1.2 var(--testo); min-height: 48px; padding: 12px 20px; border-radius: 24px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.bottone.secondario { background: transparent; color: var(--pesca); box-shadow: inset 0 0 0 2px var(--pesca); }
.bottone.piccolo { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.bottone:active, .tastiera button:active, .bottone-menu:active, .scheda:active, .carta:active, .cal:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .bottone:hover { filter: brightness(1.06); } .bottone.secondario:hover { background: rgba(255,212,168,.1); } }

/* ---------------------------------------------------------------- testate e blocchi */
.chip { display: inline-block; background: var(--rosa); color: #1E1728; border-radius: 4px; padding: 3px 9px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.testata { padding: 28px 0 8px; }
.testata .titolo { margin-top: 10px; line-height: 0; }
svg.titolo-svg { display: block; height: clamp(40px, 7vw, 68px); width: auto; max-width: 100%; }
h2 svg.titolo-svg { height: clamp(32px, 5vw, 46px); }
svg.titolo-svg.grande { height: clamp(48px, 9vw, 92px); }
.blocco { padding-top: 24px; }
.blocco + .blocco { margin-top: 12px; }
.sotto { font-size: 22px; font-weight: 700; margin: 28px 0 12px; letter-spacing: -.01em; }
.sotto small { font-weight: 400; font-size: 15px; margin-left: 8px; }
.attacco { font-size: 19px; line-height: 1.5; max-width: 70ch; }
.testo-lungo { max-width: 70ch; }
.testo-lungo p { font-size: 18px; }
.firma { font-style: italic; color: var(--rosa); }
.etichetta { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--rosa); }
.dato { background: var(--carta); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.dato .valore { display: block; font-size: 21px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dati-tappa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
@media (max-width: 640px) { .dati-tappa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.riquadro-voce { background: var(--carta); border-radius: var(--raggio); padding: 16px 18px; margin-top: 14px; }
.riquadro-voce p { margin: 6px 0 0; }
.riquadro-voce.media .bottone { margin-top: 12px; }
.riquadro { background: var(--carta); border-radius: var(--raggio); padding: 10px; }
.torna { margin-top: 28px; }
.torna a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------------------------------------------------------------- l'eroe */
.eroe { position: relative; background: var(--notte); }
.eroe-arte { line-height: 0; }
.arte-svg { display: block; width: 100%; height: clamp(300px, 44vw, 540px); }
.eroe-missione .arte-svg { height: clamp(200px, 34vw, 420px); }
.eroe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sfumatura); }
.p-inizio .eroe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,30,0) 25%, rgba(20,13,30,.9)); pointer-events: none; }
.eroe-titolo { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.lastra { display: block; width: fit-content; margin-top: 12px; padding: 10px 26px 14px; background: var(--sfumatura); transform: skew(-6deg); border: 4px solid var(--notte); box-shadow: 0 8px 0 rgba(0,0,0,.35); max-width: 100%; }
.lastra h1 { transform: skew(6deg); line-height: 0; }
.lastra svg { display: block; width: auto; max-width: 100%; }
.eroe-garibaldi { margin-top: 12px; line-height: 0; }
.eroe-il { height: clamp(30px, 4.6vw, 54px); width: auto; max-width: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.eroe-nome { height: clamp(48px, 9vw, 112px); }
.eroe-camp { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.eroe-camp p { margin: 0; color: var(--rosa); font-weight: 700; font-size: 17px; text-shadow: 0 2px 0 #140D1E; }
.bottone.scarica { gap: 10px; text-align: left; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.bottone.scarica small { display: block; font-weight: 400; font-size: 14px; }
.icona-scarica { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .p-inizio .arte-svg { height: 430px; } }

.apertura { padding: 22px 0 8px; }
.apertura .titolo { margin: 10px 0 8px; line-height: 0; }
.mondo { color: var(--rosa); font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.stato { display: inline-block; border-radius: 13px; padding: 2px 10px; font-size: 14px; font-weight: 700; background: #3A2C4A; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.stato.st-compiuta { background: var(--pesca); color: #1E1728; }
.stato.st-prossima { background: var(--rosa); color: #1E1728; }
.stato.st-in-corso { background: #FF5F7A; color: #1E1728; animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.06); } }
.hud-missione { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hud-missione .largo { grid-column: 1 / -1; }
.hud-missione .valore { font-size: 18px; }
.premi { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; }
.premi a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.premi .segno { width: 26px; height: 26px; }
.premi p { flex-basis: 100%; margin: 0; font-weight: 400; color: var(--tenue); }
@media (max-width: 640px) { .hud-missione { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hud-missione > .dato:nth-child(3) { grid-column: 1 / -1; } }

/* il conto alla rovescia */
.conto { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.conto:empty { display: none; }
.conto .c { background: var(--notte); border: 2px solid #4B3A5C; border-radius: 12px; padding: 6px 10px; min-width: 64px; text-align: center; }
.conto .c b { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--pesca); }
.conto .c span { font-size: 14px; color: var(--tenue); }
.conto .in-corso { color: #FF8FA2; font-weight: 700; font-size: 18px; }

/* la prossima missione in apertura */
.prossima { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; margin-top: 26px; background: var(--carta); border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; }
.prossima-arte { line-height: 0; }
.prossima-arte .arte-svg { height: 100%; min-height: 240px; }
.prossima-testo { padding: 20px 22px; }
.prossima-nome { font-size: 24px; margin: 10px 0 4px; line-height: 1.2; }
.prossima-quando { color: var(--tenue); font-size: 16px; }
.prossima .bottone { margin-top: 16px; }
@media (max-width: 760px) { .prossima { grid-template-columns: 1fr; } .prossima-arte .arte-svg { min-height: 0; height: 180px; } }
@media (hover: hover) and (pointer: fine) { .prossima:hover, .carta:hover, .cal:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); } }
.prossima, .carta, .cal { transition: transform .2s ease, box-shadow .2s ease; }

/* chi porta le maglie */
.portatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.portatore { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: var(--carta); border-radius: var(--raggio); padding: 12px 14px; }
.portatore b { display: block; font-size: 17px; }
.portatore .tenue { font-size: 15px; }

/* iscrizioni */
.iscrizioni { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.iscr { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: var(--carta); border-radius: var(--raggio); padding: 8px 12px 8px 8px; }
.iscr.aperta { box-shadow: inset 4px 0 0 var(--pesca); }
.iscr-missione { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-height: 44px; min-width: 0; flex: 1 1 260px; }
.iscr-missione b { display: block; font-size: 18px; line-height: 1.25; }
.iscr-missione .tenue { display: block; font-size: 14px; }
.iscr-num { flex: none; width: 44px; height: 44px; border-radius: 22px; background: var(--notte); color: var(--pesca); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.iscr-num .segno { width: 26px; height: 26px; }
.iscr-attesa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px dashed #6A5480; color: var(--tenue); font-size: 15px; font-weight: 700; }
.iscr-dato .bottone { margin-top: 6px; }
.iscr-dato .iscr-attesa { margin-top: 6px; }
.sommario { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sommario-voce { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; background: var(--carta); border-radius: var(--raggio); padding: 14px 16px; text-decoration: none; color: #fff; min-height: 72px; height: 100%; }
.sv-titolo { font-weight: 700; font-size: 18px; }
.sv-testo { grid-column: 1; color: var(--tenue); font-size: 15px; }
.sommario-voce .visto { grid-row: 1 / 3; grid-column: 2; }

/* ---------------------------------------------------------------- calendario */
.calendario { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cal { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 150px; gap: 14px; align-items: center; background: var(--carta); border-radius: var(--raggio); padding: 12px 14px; text-decoration: none; color: #fff; }
.cal .visto { position: absolute; right: 10px; top: 10px; }
.cal-numero { text-align: center; }
.cal-numero small { display: block; font-size: 14px; text-transform: uppercase; color: var(--rosa); font-weight: 700; }
.num-missione { display: block; line-height: 0; }
.num-svg { height: 48px; width: auto; max-width: 100%; margin: 4px auto 0; display: block; }
.num-missione.bandiera .segno { width: 44px; height: 44px; margin: 6px auto 0; display: block; }
.cal-data { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.cal-percorso { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.cal-dettagli { font-size: 15px; color: var(--tenue); }
.cal-stato { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cal-stelle .difficolta svg { width: 16px; height: 16px; }
.cal-mappa { border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #16244F, #2A1A4F); line-height: 0; }
.cal-mappa svg { width: 100%; height: auto; display: block; }
.cal-pausa { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 2px dashed #4B3A5C; border-radius: var(--raggio); }
.cal-pausa .cal-percorso { font-size: 19px; }
.cal-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.cal-totale { text-align: right; margin-top: 14px; font-size: 18px; font-weight: 700; }
.cal-totale .etichetta { display: inline; margin-right: 8px; }
.cento { font-size: 26px; margin: 8px 0 12px; color: var(--pesca); }
@media (max-width: 640px) {
  .cal { grid-template-columns: 60px minmax(0, 1fr); }
  .cal-mappa { grid-column: 1 / -1; max-height: 140px; }
  .cal-mappa svg.mappa { height: 140px; }
  .num-svg { height: 40px; }
  .cal-pausa { grid-template-columns: 60px minmax(0, 1fr); }
  .cal-pausa .cal-link { grid-column: 2; }
}

/* ---------------------------------------------------------------- disegni del libretto: segni, maglie */
.segno { display: inline-block; width: 28px; height: 28px; flex: none; vertical-align: middle; }
.segno svg { width: 100%; height: 100%; display: block; }
.segno text { fill: var(--su-segno); font-size: 12.5px; font-weight: 800; text-anchor: middle; font-family: var(--testo); }
.segno-sprint .sg-fondo { fill: var(--sprint); }
.segno-gpm .sg-fondo { fill: var(--gpm); }
.segno-intergiro .sg-fondo { fill: var(--intergiro); }
.segno-via .sg-fondo { fill: var(--via); }
.segno-via .sg-segno { fill: var(--su-segno); }
.segno-arrivo .sg-bordo { fill: #1E1728; }
.segno-arrivo .sg-scacco { fill: var(--arrivo); }
.segno-arrivo .sg-cornice { stroke: var(--arrivo); stroke-width: 1.5; }
.maglia-svg { display: block; height: auto; max-width: 100%; }

/* ---------------------------------------------------------------- profili e mappe (profiloSvg, mappaSvg) */
svg.profilo, svg.mappa { display: block; width: 100%; height: auto; overflow: visible; }
.profilo text { font-size: 24px; font-family: var(--testo); }
.profilo .pf-nome { font-size: 20px; font-weight: 700; fill: #fff; }
.profilo .pf-nome-km { font-weight: 400; fill: var(--tenue); }
.profilo .pf-sigla { font-size: 20px; font-weight: 700; fill: var(--su-segno); }
.pf-linea, .pf-cresta, .pf-griglia, .pf-asse, .pf-tacca, .pf-segno { fill: none; }
.pf-cresta { stroke: none; }
.pf-griglia { stroke: var(--riga); stroke-width: 1.5; }
.pf-quota, .pf-km { fill: var(--tenue); }
.pf-asse, .pf-tacca { stroke: #8D7AA3; stroke-width: 2; }
.pf-linea { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.pf-blocco.p0 { fill: var(--p0); } .pf-blocco.p1 { fill: var(--p1); } .pf-blocco.p2 { fill: var(--p2); } .pf-blocco.p3 { fill: var(--p3); }
.pf-fascia { opacity: .18; }
.pf-fascia.tg-sprint, .pf-pallino.tg-sprint { fill: var(--sprint); }
.pf-fascia.tg-gpm, .pf-pallino.tg-gpm { fill: var(--gpm); }
.pf-fascia.tg-intergiro, .pf-pallino.tg-intergiro { fill: var(--intergiro); }
.pf-segno { stroke-width: 3; }
.pf-segno.tg-sprint { stroke: var(--sprint); } .pf-segno.tg-gpm { stroke: var(--gpm); } .pf-segno.tg-intergiro { stroke: var(--intergiro); }
.pr-stretto .profilo text { font-size: 26px; }
.pr-stretto .profilo .pf-nome { font-size: 24px; }
.mp-strada, .mp-ombra { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mp-ombra { stroke: rgba(255,95,162,.25); stroke-width: 30; }
.mp-strada { stroke: var(--fucsia); stroke-width: 10; }
.mp-km circle { fill: #fff; }
.mp-km text { fill: #1E1728; font-size: 17px; font-weight: 800; font-family: var(--testo); }
.mp-tg circle { stroke: #18224A; stroke-width: 4; }
.mp-tg.tg-sprint circle { fill: var(--sprint); } .mp-tg.tg-gpm circle { fill: var(--gpm); } .mp-tg.tg-intergiro circle { fill: var(--intergiro); }
.mp-tg text { fill: var(--su-segno); font-size: 22px; font-weight: 800; font-family: var(--testo); }
.mp-arrivo rect { fill: var(--arrivo); stroke: #18224A; stroke-width: 4; }
.mp-arrivo path { fill: #1E1728; }
.mp-via circle { fill: var(--via); stroke: #18224A; stroke-width: 5; }
.mappa.piccola .mp-km, .mappa.piccola .mp-tg { display: none; }
.mappa.piccola .mp-strada { stroke-width: 14; } .mappa.piccola .mp-ombra { stroke-width: 36; }

/* il profilo vivo: cursore, lettura e mappa insieme */
.vivo-profilo { background: var(--carta); border-radius: var(--raggio); padding: 10px 10px 4px; touch-action: pan-y; cursor: crosshair; }
.pr-stretto { display: none; }
@media (max-width: 700px) { .pr-largo { display: none; } .pr-stretto { display: block; } }
.cur-linea { stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; }
.cur-punto { fill: var(--pesca); stroke: #140D1E; stroke-width: 4; }
.mappa .cur-punto { stroke-width: 6; }
.mappa .cur-alone { fill: rgba(255,212,168,.25); }
.vivo-lettura { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; min-height: 44px; }
.vivo-lettura span { background: var(--notte); border: 1px solid #4B3A5C; border-radius: 18px; padding: 6px 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.vivo-lettura span:empty { display: none; }
.vivo-lettura .lt-km { background: var(--pesca); color: #1E1728; border-color: var(--pesca); font-weight: 700; }
.vivo-mappa { margin-top: 12px; background: linear-gradient(135deg, #16244F, #2A1A4F); border-radius: var(--raggio); padding: 12px; line-height: 0; }
.vivo-mappa svg.mappa { max-height: 640px; }
.vivo-mappa svg.mappa.stretta { max-height: 520px; }
.vivo-mappa .pr-largo { display: block; } .vivo-mappa .pr-stretto { display: none; }
@media (max-width: 900px) { .vivo-mappa .pr-largo { display: none; } .vivo-mappa .pr-stretto { display: block; } }
.mappa.stretta .mp-strada { stroke-width: 6; } .mappa.stretta .mp-ombra { stroke-width: 16; }
.mappa.stretta .mp-km text { font-size: 20px; } .mappa.stretta .mp-tg text { font-size: 22px; }
.mappa.stretta .cur-punto { stroke-width: 3; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--tenue); font-size: 14px; margin: 10px 0 0; align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-titolo { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.legenda i.lp { width: 22px; border-radius: 3px; }
.lp.p0 { background: var(--p0); } .lp.p1 { background: var(--p1); } .lp.p2 { background: var(--p2); } .lp.p3 { background: var(--p3); }
.ls.via { background: var(--via); } .ls.arrivo { background: var(--arrivo); border-radius: 2px; } .ls.km { background: #fff; }
.ls.tg-sprint { background: var(--sprint); } .ls.tg-gpm { background: var(--gpm); } .ls.tg-intergiro { background: var(--intergiro); }
svg.ultimi { margin-top: 4px; }

/* ---------------------------------------------------------------- tabelle */
.tabella { overflow-x: auto; background: var(--carta-2); border-radius: var(--raggio); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 16px; }
th { text-align: left; font-size: 14px; font-weight: 700; color: var(--rosa); padding: 10px; border-bottom: 2px solid var(--riga); white-space: nowrap; vertical-align: bottom; }
th small { display: block; font-weight: 400; color: var(--tenue); }
td { padding: 8px 10px; border-bottom: 1px solid var(--riga); vertical-align: middle; height: 44px; }
tbody tr:last-child td { border-bottom: 0; }
th.n, td.n, th.num, td.num { text-align: right; white-space: nowrap; }
td.pos, th.pos { width: 3.2em; text-align: right; font-weight: 700; }
.forte { font-weight: 700; color: var(--pesca); }
.cognome { font-weight: 700; }
.sq { display: block; color: var(--tenue); font-size: 14px; }
tr.mio td { background: rgba(255,212,168,.14); }
tr.mio td:first-child { box-shadow: inset 4px 0 0 var(--pesca); }
tr.ritirato td { color: var(--tenue); }
.marcia td.q { color: var(--tenue); width: 4em; text-align: right; }
.marcia td.luogo { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.marcia td.luogo small { display: block; color: var(--tenue); font-weight: 400; }
.marcia td.luogo .segno { width: 28px; height: 28px; }
.marcia tr.r-via td, .marcia tr.r-arrivo td, .marcia tr.r-traguardo td { background: var(--riga-tg); font-weight: 700; }
.marcia tr.r-km td { color: var(--tenue); }
.marcia td.tua, .marcia th.tua { color: var(--pesca); font-weight: 700; background: rgba(255,212,168,.07); }
.marcia tr.attuale td { box-shadow: inset 0 2px 0 var(--pesca); }
@media (max-width: 640px) { .marcia .o, .marcia .q, .marcia .fare { display: none; } .marcia td.luogo { min-width: 0; } }
.tua-media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.tua-media label { font-weight: 700; }
.tua-media input[type=range] { flex: 1; min-width: 160px; max-width: 420px; height: 44px; accent-color: var(--pesca); background: transparent; }
.tua-media output { min-width: 7em; font-weight: 700; color: var(--pesca); font-variant-numeric: tabular-nums; font-size: 18px; }

/* obiettivi */
.obiettivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; margin-top: 8px; }
.scheda-tg { background: var(--carta); border-radius: var(--raggio); padding: 16px; border-top: 5px solid var(--sprint); }
.scheda-tg.tg-gpm { border-top-color: var(--gpm); } .scheda-tg.tg-intergiro { border-top-color: var(--intergiro); }
.scheda-tg:target { box-shadow: 0 0 0 3px var(--pesca); }
.tg-testa { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tg-testa .segno { width: 44px; height: 44px; }
.tg-testa h3 { font-size: 22px; line-height: 1.2; }
.scheda-tg .riquadro { background: var(--carta-2); }
.scheda-tg .dato { background: var(--carta-2); }
.palio { font-weight: 700; }
.palio .etichetta { display: inline; margin-right: 6px; }

/* risultati */
.vinti { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.vinto { background: var(--carta); border-radius: var(--raggio); padding: 14px; }
.vinto-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.vinto ol { margin: 0; padding-left: 22px; }
.vinto li { padding: 3px 0; }
.vinto li { display: list-item; }
.vinto li > span:first-child { display: inline; }
.vinto .pt { float: right; color: var(--pesca); font-weight: 700; }
.vinto li.mio { background: rgba(255,212,168,.14); border-radius: 6px; }

.vicine { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 36px 0 12px; }
.vicine a { display: block; background: var(--carta); border-radius: var(--raggio); padding: 14px 16px; text-decoration: none; color: #fff; min-height: 44px; }
.vicine a.dopo { text-align: right; }
.vicine b { display: block; font-size: 18px; margin-top: 2px; }

.carte { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.carta { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--carta); border-radius: var(--raggio); overflow: hidden; color: #fff; text-decoration: none; }
.carta .visto { position: absolute; right: 10px; top: 10px; background-color: rgba(20,13,30,.6); }
.carta-arte { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #3B2A7A, #FF5FA2 60%, #FFB347); overflow: hidden; }
.carta-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta-maglia, .carta-icona { display: grid; place-items: center; height: 100%; color: #1E1728; }
.carta-maglia svg { width: 110px !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.carta-icona svg { width: 80px; height: 80px; }
.carta-icona .segno { width: 72px; height: 72px; }
.carta-testo { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 16px; }
.carta-testo b { font-size: 19px; line-height: 1.25; }
.carta-testo .tenue { font-size: 15px; }

/* ricompense e regole */
.ricompense { display: grid; gap: 12px; margin-top: 12px; }
.ricompensa { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; background: var(--carta); border-radius: 18px; padding: 18px 22px; }
.ricompensa h3 { font-size: 26px; margin: 2px 0 6px; }
.ricompensa-maglia svg { filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
@media (max-width: 560px) { .ricompensa { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 14px; } .ricompensa-maglia svg { width: 90px !important; } }
.mz-maglie { display: flex; gap: 22px; margin: 10px 0 4px; flex-wrap: wrap; }
.mz-maglia { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mz-maglia span { color: var(--rosa); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; font-weight: 700; }
.regole { margin: 10px 0 0; padding-left: 26px; max-width: 75ch; }
.regole li { margin-bottom: 10px; font-size: 18px; }
.regole li::marker { color: var(--pesca); font-weight: 700; }
.griglia-punti { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.riga-punti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cella { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 8px; background: var(--carta); }
.cella .p { font-size: 14px; color: var(--tenue); }
.cella .v { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.cella.ultima { outline: 2px dashed var(--tenue); }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .due { grid-template-columns: 1fr; } }
.gpm-riga { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--riga); }
.gpm-cat { font-weight: 700; white-space: nowrap; }
.gpm-punti { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }

/* WADA */
.busted-banda { position: relative; background: #222; line-height: 0; }
.busted-banda img { display: block; width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; cursor: pointer; }
.busted-scritta { padding: 60px 16px; display: grid; place-items: center; cursor: pointer; }

/* classifiche */
.cl-comandi { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 14px 0; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: min(100%, 260px); }
.campo label { font-weight: 700; font-size: 15px; color: var(--rosa); }
.campo input:not([type=checkbox]), .tendina select { appearance: none; -webkit-appearance: none; min-height: 48px; border-radius: 12px; border: 2px solid #4B3A5C; background: var(--carta); color: #fff; font: 17px var(--testo); padding: 0 14px; width: 100%; }
.tendina { position: relative; display: block; }
.tendina select { padding-right: 44px; }
.tendina::after { content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; border-right: 3px solid var(--pesca); border-bottom: 3px solid var(--pesca); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.schede { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px; }
.scheda { appearance: none; border: 0; background: var(--carta); color: #fff; font: 700 15px/1 var(--testo); min-height: 72px; min-width: 104px; padding: 6px 16px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.scheda[aria-selected="true"] { background: var(--pesca); color: #1E1728; }
@media (hover: hover) and (pointer: fine) { .scheda:not([aria-selected="true"]):hover { background: #3C2A4E; } }
.cl-vuota { background: var(--carta); border-radius: 18px; padding: 8px 20px 20px; margin-top: 16px; }
.albo th svg { width: 28px !important; }

/* guide e pagine in più */
.foto-banda { position: relative; height: clamp(280px, 52vw, 600px); overflow: hidden; background: linear-gradient(135deg, #3B2A7A, #FF5FA2 60%, #FFB347); }
.foto-banda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-banda::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(30,23,40,0), var(--fondo)); }
.foto-banda.con-maglia { display: grid; place-items: center; }
.foto-maglia { position: relative; z-index: 1; }
.foto-maglia svg { width: min(260px, 60vw) !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.foto-banda + .fascia .testata { margin-top: -70px; position: relative; z-index: 1; }
.ins-sotto { color: var(--pesca); font-weight: 700; font-size: 19px; }
.voci { display: grid; gap: 12px; margin-top: 8px; }
.voce { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.voce h3 { font-size: 21px; margin: 2px 0 4px; line-height: 1.25; }
.voce-icona { width: 56px; flex: none; color: var(--pesca); }
.voce-icona svg { width: 56px; height: 56px; display: block; }
.voce-tempo { width: 84px; flex: none; font-size: 24px; font-weight: 700; color: var(--pesca); line-height: 1.1; white-space: nowrap; }
.voce-stelle { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 6px; }
.voce-stelle small { color: var(--rosa); text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }
.barre { margin: 8px 0 16px; }
.barra-voce { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 70px; gap: 10px; align-items: center; margin-bottom: 8px; }
.b-et { color: var(--tenue); font-size: 15px; }
.b-fondo { height: 16px; border-radius: 8px; background: var(--carta); overflow: hidden; display: block; }
.b-pieno { display: block; height: 100%; width: var(--v); border-radius: 8px; background: linear-gradient(90deg, #FFB347, #FF5FA2 50%, #B04DE0); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.js .barre:not(.vista) .b-pieno { width: 0; }
.b-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.passo-tempo { font-size: 22px; font-weight: 700; color: var(--pesca); margin: 4px 0 0; min-height: 1.5em; }
.riepilogo td.nome a, .scheda-stampa td.nome a { color: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.riepilogo td.nome small { display: block; color: var(--tenue); }
.riepilogo td.seg .segno { width: 26px; height: 26px; }
.riepilogo th button { appearance: none; background: none; border: 0; color: inherit; font: inherit; min-height: 44px; min-width: 44px; padding: 0 2px; cursor: pointer; text-transform: inherit; }
.riepilogo th button[aria-sort]::after { content: " ↓"; }
.riepilogo th button[aria-sort="ascending"]::after { content: " ↑"; }
.scheda-stampa td.casella { width: 76px; text-align: center; }
.scheda-stampa td.casella span { display: grid; place-items: center; min-height: 36px; border-radius: 8px; background: #F4EEF8; color: #1E1728; font-weight: 700; }
.scheda-stampa tr.totale td { font-weight: 700; }
.scheda-stampa td.nome a { color: #fff; }
.scheda-stampa td.data { color: var(--tenue); white-space: nowrap; }

/* ---------------------------------------------------------------- piede, avvisi e sorprese */
.piede { margin-top: 56px; background: var(--notte); border-top: 1px solid #2A1F38; padding: 28px 0 40px; color: var(--tenue); font-size: 15px; }
.piede-dentro { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.piede img { height: 34px; width: auto; margin-bottom: 12px; display: block; }
.avviso { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 60; background: var(--notte); border: 2px solid var(--pesca); color: #fff; border-radius: 14px; padding: 12px 18px; max-width: min(520px, calc(100% - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,.5); transition: transform .3s ease; font-size: 16px; text-align: center; }
.avviso:not(.su) { visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
.avviso.su { transform: translate(-50%, 0); }
.avviso b { display: block; color: var(--pesca); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.sovra { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 16, .82); }
.sovra-dentro { width: min(560px, 100%); text-align: center; }
.sovra-banda { background: rgba(0,0,0,.78); padding: 18px 0; margin: 0 -16px 18px; }
.sovra-banda svg { height: clamp(56px, 14vw, 110px); width: auto; max-width: 92%; display: block; margin: 0 auto; }
.sovra p { font-size: 19px; }
.sovra .azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
html.grigio main, html.grigio .barra, html.grigio .piede { filter: grayscale(1) brightness(.75); transition: filter .6s; }
.fallita-banda { background: #000; padding: 70px 16px 60px; display: grid; place-items: center; filter: none; }
.fallita-banda svg { height: clamp(56px, 12vw, 120px); width: auto; max-width: 100%; }
.p-fallita main { min-height: 50vh; }
.p-fallita .fallita .attacco { margin-top: 28px; }
.pioggia { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.pioggia > * { position: absolute; top: -90px; animation: cade linear forwards; }
@keyframes cade { to { transform: translateY(calc(100vh + 140px)) rotate(var(--giro, 360deg)); } }
.corteo { position: fixed; left: 0; bottom: 90px; z-index: 70; pointer-events: none; display: flex; gap: 6px; color: var(--pesca); animation: passa 5s linear forwards; }
.corteo svg { width: 70px; height: 70px; }
.corteo.solo svg { width: 90px; height: 90px; color: var(--ciano); }
@keyframes passa { from { transform: translateX(-110%); } to { transform: translateX(110vw); } }
html.tron main, html.tron .barra { filter: hue-rotate(150deg) saturate(1.6) contrast(1.1); }
html.tron body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 65; background: repeating-linear-gradient(0deg, rgba(54,209,220,.07) 0 2px, transparent 2px 4px); }
.trucco { cursor: pointer; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pioggia, .corteo { display: none; }
  .js .barre:not(.vista) .b-pieno { width: var(--v); }
}

/* stampa: «Il tuo campionato» e ogni pagina, chiari per non consumare inchiostro */
@media print {
  :root { --fondo: #fff; --carta: #fff; --carta-2: #fff; --riga: #bbb; --inchiostro: #000; --tenue: #444; --rosa: #8a2050; --pesca: #8a4a00; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .barra, .menu, .piede, .salta, .avviso, .stampa-no, .eroe, .vicine, .tua-media { display: none !important; }
  .tabella { background: none; overflow: visible; }
  th, td { color: #000; }
  .scheda-stampa td.casella span { background: #fff; border: 1px solid #666; }
  .scheda-stampa td.nome a { color: #000; text-decoration: none; }
  svg.titolo-svg path { fill: #000; stroke: none; }
}
@media (max-width: 560px) {
  .scheda-stampa th:nth-child(2), .scheda-stampa td.data { display: none; }
  .scheda-stampa td.casella { width: 52px; padding: 6px 4px; }
  .scheda-stampa th, .scheda-stampa td { padding-inline: 5px; }
}

/* ---------------------------------------------------------------- la casa di Don't Drop Me */
/* il banner resta attaccato sotto la barra: sparisce quando si scorre in giù e torna quando si scorre in
   su (garibaldi.js, classe .via). Il bordo in basso è inclinato come i riquadri del Garibaldi e l'arte
   dell'eroe ci passa sotto, con l'ombra: niente taglio dritto */
.banner-posto { --obliquo: 22px; position: relative; z-index: 15; margin-bottom: calc(-1 * var(--obliquo) - 6px); }
.banner-tappa { display: block; position: relative; color: #1E1728; text-decoration: none; filter: drop-shadow(0 10px 14px rgba(10, 6, 16, .55)); }
.banner-tappa.attaccato { position: fixed; left: 0; right: 0; top: var(--sotto-barra, 65px); transition: transform .35s ease; }
.banner-tappa.ferma { transition: none; }
.banner-tappa::before, .banner-tappa::after { content: ""; position: absolute; left: 0; right: 0; top: 0; }
.banner-tappa::before { bottom: -6px; background: var(--sfumatura); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--obliquo)), 0 100%); }
.banner-tappa::after { bottom: 0; background: var(--pesca); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--obliquo)), 0 100%); }
.banner-tappa.attaccato.via { transform: translateY(calc(-100% - 30px)); }
.bt-dentro { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + var(--obliquo)) max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
/* quando è attaccato in alto sul telefono resta corto: nome, conto e bottone */
@media (max-width: 760px) { .banner-tappa.attaccato .bt-quando { display: none; } .banner-tappa.attaccato .bt-chip { display: none; } }
@media (max-width: 560px) { .banner-tappa.attaccato .bt-conto { display: none; } .banner-tappa.attaccato .bt-nome { font-size: 19px; margin: 0; } .banner-tappa.attaccato .bt-azione { min-height: 46px; } .banner-posto { --obliquo: 14px; } }
.bt-testo { flex: 1 1 320px; min-width: 0; }
.bt-chip { display: inline-block; background: #1E1728; color: var(--pesca); border-radius: 4px; padding: 3px 9px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.bt-nome { display: block; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; margin: 6px 0 2px; }
.bt-quando { display: block; font-size: 16px; font-weight: 700; color: #3A2350; }
.bt-conto .c { background: #1E1728; border-color: #1E1728; min-width: 58px; padding: 4px 8px; }
.bt-conto .c b { font-size: 22px; }
.bt-conto .c span { color: var(--rosa); }
.bt-conto .in-corso { color: #8A1030; }
.bt-azione { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 22px; border-radius: 26px; background: #1E1728; color: var(--pesca); font-weight: 700; font-size: 18px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .banner-tappa:hover .bt-azione { background: #000; } }
.banner-tappa:active .bt-azione { transform: scale(.97); }
@media (max-width: 560px) { .bt-azione { width: 100%; justify-content: center; } .bt-conto { margin-top: 0; } }
.p-casa .eroe .arte-svg { height: clamp(280px, 38vw, 460px); }
.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.tre a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; background: var(--carta); border-radius: var(--raggio); color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.tre-freccia { margin-left: auto; color: var(--pesca); font-size: 20px; }
.tre .visto { position: absolute; right: 10px; top: 8px; width: 16px; height: 16px; }
.tre a .tre-freccia { margin-right: 6px; }
.iscr .visto { margin-right: 6px; }
.tre-n { width: 32px; height: 32px; flex: none; border-radius: 16px; background: var(--pesca); color: #1E1728; display: grid; place-items: center; font-size: 16px; }
@media (max-width: 560px) { .tre { grid-template-columns: 1fr; } }
.casa-blocco { scroll-margin-top: 76px; }
.garibaldi-carta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--carta); border-radius: 18px; overflow: hidden; margin-top: 8px; }
.gc-arte { line-height: 0; }
.gc-arte .arte-svg { height: 100%; min-height: 260px; }
.gc-testo { padding: 20px 22px; }
.gc-testo > p { font-size: 18px; }
.gc-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.gc-veloci { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.gc-veloci a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (max-width: 760px) { .garibaldi-carta { grid-template-columns: 1fr; } .gc-arte .arte-svg { min-height: 0; height: 170px; } }

/* il modulo */
.modulo { display: grid; gap: 14px; max-width: 560px; margin-top: 8px; }
.modulo .campo { min-width: 0; }
.aiuto { color: var(--tenue); font-size: 14px; }
.errore { color: #FF9AAE; font-weight: 700; font-size: 15px; margin: 6px 0 0; }
.campo input[aria-invalid="true"] { border-color: #FF6F8E; }
.campo input:focus-visible { outline: 3px solid var(--rosa); outline-offset: 1px; }
.spunta { display: flex !important; align-items: center; gap: 12px; min-height: 44px; font-weight: 400 !important; font-size: 17px !important; color: #fff !important; cursor: pointer; }
.spunta input { width: 26px; height: 26px; flex: none; accent-color: var(--pesca); margin: 0; }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.invia { justify-self: start; min-width: 180px; }
.invia[aria-busy="true"] { opacity: .75; cursor: progress; }
.fatto { background: var(--carta); border-radius: 18px; padding: 20px 22px; max-width: 640px; margin-top: 8px; box-shadow: inset 4px 0 0 var(--pesca); }
.fatto:focus { outline: none; }
.fatto h3 { font-size: 26px; color: var(--pesca); margin-bottom: 6px; }
.fatto-passi { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; }
.fatto-passi .bottone { width: 100%; justify-content: flex-start; }
.privacy p { font-size: 17px; }
.piede-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--pesca); font-weight: 700; }

/* la gestione delle iscrizioni */
.gestione-chiave { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.gestione-chiave .campo { margin: 0; }
table.iscritti td { white-space: nowrap; }
table.iscritti td a { display: inline-flex; align-items: center; min-height: 44px; }
table.iscritti tr.doppione td { color: var(--tenue); }
table.iscritti .segna { display: inline-block; margin-left: 8px; border-radius: 10px; padding: 1px 8px; background: #3A2C4A; color: var(--tenue); font-size: 14px; }
.leggi { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; margin-left: 38px; }

/* i tre tasti in cima alle pagine: compatti, quello della sezione acceso */
.testa-tre { padding-top: 36px; }
.banner-posto + .testa-tre { padding-top: 40px; }
main > .testa-tre:first-child { padding-top: 16px; }
.tre-pagine { margin-top: 0; gap: 8px; }
.tre-pagine a { min-height: 48px; padding: 6px 12px; font-size: 16px; justify-content: center; }
.tre-pagine .tre-freccia, .tre-pagine .visto { display: none; }
.tre-pagine .tre-n { width: 26px; height: 26px; font-size: 14px; }
.tre-pagine a[aria-current="true"] { background: var(--pesca); color: #1E1728; }
.tre-pagine a[aria-current="true"] .tre-n { background: #1E1728; color: var(--pesca); }
@media (hover: hover) and (pointer: fine) { .tre-pagine a:not([aria-current="true"]):hover { background: #3C2A4E; } }
@media (max-width: 560px) {
  .tre.tre-pagine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tre-pagine a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 14px; text-align: center; line-height: 1.15; min-height: 56px; }
  .tre-pagine .tre-n { width: 22px; height: 22px; font-size: 14px; }
}
.testa-tre + .eroe, .testa-tre + .foto-banda, .testa-tre + .busted-banda, .testa-tre + .fallita { margin-top: 16px; }