/* Pagine del sito oltre alla vetrina (gioca, privacy, termini, cookie): stessa grafica a fumetto di index.src.html */
:root {
  --ink: #121014;
  --paper: #FFF6E2;
  --yellow: #FFE135;
  --red: #FF3B30;
  --blue: #1E7FE0;
  --cyan: #00C8F0;
  --green: #2BD96B;
  --orange: #FF8A00;
  --pink: #FF3EA5;
  --muted: #5B5560;
  --display: 'Bangers', 'Barlow Condensed', Impact, sans-serif;
  --body: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1 }
a { color: inherit }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.stretto { max-width: 520px }
.medio { max-width: 820px }

.comic { font-family: var(--display); font-weight: 400; letter-spacing: .03em; line-height: .92; color: var(--yellow); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .02em .02em 0 var(--ink), .04em .04em 0 var(--ink), .06em .06em 0 var(--ink), .08em .08em 0 var(--ink) }
.panel { background: #fff; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 6px }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--display); font-size: 20px; letter-spacing: .06em; transform: rotate(-2deg); white-space: nowrap }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); border-radius: 999px; font-family: var(--display); font-size: 22px; letter-spacing: .06em; text-decoration: none; color: var(--ink); transition: transform .15s var(--spring), box-shadow .15s }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink) }
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink) }
.btn[disabled] { background: #E4DDD0; color: #8A8390; box-shadow: 3px 3px 0 #8A8390; border-color: #8A8390; cursor: not-allowed; transform: none }
.btn.white { background: #fff }
.btn.red { background: var(--red); color: #fff }
.btn.green { background: var(--green) }
.btn.full { width: 100% }
.btn.sm { font-size: 18px; padding: 7px 16px; box-shadow: 4px 4px 0 var(--ink) }
.linkbtn { background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 600; color: var(--blue) }
.rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.13) 0deg 9deg, rgba(255,255,255,0) 9deg 18deg); animation: spin 90s linear infinite; pointer-events: none }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) rotate(-1deg) } to { opacity: 1; transform: none } }

/* Logo: scritta gialla sopra l'esplosione rossa */
.logo { position: relative; display: inline-grid; place-items: center; width: 132px; height: 58px; text-decoration: none; flex: none }
.logo svg { position: absolute; width: 88px; height: 88px; left: 50%; top: 50%; margin: -44px 0 0 -44px; animation: spin 30s linear infinite; overflow: visible }
.logo .comic { position: relative; font-size: 34px; transform: rotate(-7deg) }

header { position: sticky; top: 0; z-index: 50; background: var(--ink) }
.bar { display: flex; align-items: center; gap: 16px; padding-block: 8px }
.bar nav { margin-left: auto; display: flex; gap: 18px; align-items: center }
.bar nav a { color: #fff; text-decoration: none; font-family: var(--label); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase }
.bar nav a:not(.btn):hover { color: var(--yellow) }
.bar nav .btn { color: var(--ink); font-family: var(--display); font-size: 18px; padding: 6px 16px; box-shadow: 3px 3px 0 #000; text-transform: none; letter-spacing: .06em }
.burger { display: none; margin-left: auto; background: var(--yellow); border: 3px solid #000; border-radius: 10px; font-family: var(--display); font-size: 18px; letter-spacing: .06em; padding: 4px 12px }
@media (max-width: 860px) {
  header .bar { position: relative }
  header nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch !important; gap: 0 !important; background: var(--ink); border-top: 3px solid var(--yellow); padding-bottom: 12px }
  header nav.open { display: flex !important }
  header nav a { padding: 14px max(16px, env(safe-area-inset-left, 0px)); font-size: 22px; border-bottom: 1px solid rgba(255,255,255,.12) }
  header nav .btn { margin: 12px 16px 0; justify-content: center; font-size: 22px }
  .burger { display: block }
}

.testata { position: relative; overflow: hidden; background: var(--blue); padding-block: 40px 56px; text-align: center }
.testata h1 { font-size: clamp(44px, 11vw, 76px); margin: 0 }
.testata p { color: #fff; font-weight: 600; margin: 14px auto 0; max-width: 34ch }
.testata.rossa { background: var(--red) }
.testata.rosa { background: var(--pink) }
.testata.verde { background: var(--green) }
.testata.verde p { color: var(--ink) }

.scheda { margin: -28px auto 40px; position: relative; padding: 22px; animation: rise .5s var(--spring) both }
.scheda h2 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .04em; margin: 0 0 6px }
.scheda > p:first-of-type { margin-top: 0 }

label.campo { display: block; margin-bottom: 14px }
label.campo span { display: block; font-family: var(--label); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px }
label.campo input { width: 100%; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-size: 18px; font-weight: 600 }
label.campo input:focus { outline: none; box-shadow: 0 0 0 3px var(--yellow) }
.spunta { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 15px; line-height: 1.4 }
.spunta input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink) }
.avviso { background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 15px; margin-bottom: 14px }
.avviso.ok { background: var(--green) }
.avviso[hidden] { display: none }
.nota { color: var(--muted); font-size: 14px }
.oppure { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--label); font-weight: 800; letter-spacing: .1em; color: var(--muted) }
.oppure::before, .oppure::after { content: ''; flex: 1; height: 2px; background: #D9D0C0 }
.social { display: grid; gap: 10px }
.social a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); background: #fff; font-weight: 700; text-decoration: none; font-size: 17px }
.social a:hover { transform: translate(-1px, -1px) }
.social svg { width: 22px; height: 22px; flex: none }
.schede-tab { display: flex; gap: 8px; margin-bottom: 18px }
.schede-tab button { flex: 1; padding: 8px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font-family: var(--display); font-size: 20px; letter-spacing: .05em }
.schede-tab button[aria-pressed="true"] { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink) }

.serata { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px; margin-bottom: 14px }
.serata .ora { grid-row: span 2; font-family: var(--display); font-size: 30px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 8px; padding: 2px 8px; transform: rotate(-2deg) }
.serata h3 { margin: 0; font-size: 20px; line-height: 1.15 }
.serata p { margin: 0; color: var(--muted); font-weight: 600 }
.serata .btn { grid-column: 1 / -1; margin-top: 6px }

/* Pagina della squadra (/gioca): a fumetto, stella col posto in classifica, vignette colorate coi numeri */
.squadra { margin-top: 26px }
.squadra .testa { margin: 0 0 12px; text-align: center }
.squadra .testa .comic { font-size: 40px }
.hero { position: relative; overflow: hidden; background: var(--blue); display: flex; align-items: center; gap: 16px; padding: 18px 16px }
.hero .rays { inset: -120% }
.hero-testo { position: relative; color: #fff }
.hero-testo .tag { font-size: 16px; color: var(--ink) }
.hero-testo .grande { font-size: 34px; margin: 10px 0 2px }
.hero-testo .su { margin: 0; font-weight: 700 }
.stella { position: relative; flex: none; width: 112px; height: 112px; display: grid; place-items: center; background: var(--ink); clip-path: polygon(50.0% 0.0%, 57.4% 12.7%, 69.1% 3.8%, 71.1% 18.4%, 85.4% 14.6%, 81.6% 28.9%, 96.2% 30.9%, 87.3% 42.6%, 100.0% 50.0%, 87.3% 57.4%, 96.2% 69.1%, 81.6% 71.1%, 85.4% 85.4%, 71.1% 81.6%, 69.1% 96.2%, 57.4% 87.3%, 50.0% 100.0%, 42.6% 87.3%, 30.9% 96.2%, 28.9% 81.6%, 14.6% 85.4%, 18.4% 71.1%, 3.8% 69.1%, 12.7% 57.4%, 0.0% 50.0%, 12.7% 42.6%, 3.8% 30.9%, 18.4% 28.9%, 14.6% 14.6%, 28.9% 18.4%, 30.9% 3.8%, 42.6% 12.7%) }
.stella::before { content: ''; position: absolute; inset: 5px; background: var(--red) radial-gradient(rgba(0,0,0,.18) 22%, transparent 24%) 0 0 / 7px 7px; clip-path: polygon(50.0% 0.0%, 57.4% 12.7%, 69.1% 3.8%, 71.1% 18.4%, 85.4% 14.6%, 81.6% 28.9%, 96.2% 30.9%, 87.3% 42.6%, 100.0% 50.0%, 87.3% 57.4%, 96.2% 69.1%, 81.6% 71.1%, 85.4% 85.4%, 71.1% 81.6%, 69.1% 96.2%, 57.4% 87.3%, 50.0% 100.0%, 42.6% 87.3%, 30.9% 96.2%, 28.9% 81.6%, 14.6% 85.4%, 18.4% 71.1%, 3.8% 69.1%, 12.7% 57.4%, 0.0% 50.0%, 12.7% 42.6%, 3.8% 30.9%, 18.4% 28.9%, 14.6% 14.6%, 28.9% 18.4%, 30.9% 3.8%, 42.6% 12.7%) }
.stella b { position: relative; font-size: 46px; transform: rotate(-8deg) }
.numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 }
.num { position: relative; overflow: hidden; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); padding: 12px 4px 10px; text-align: center }
.num::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,.16) 22%, transparent 24%) 0 0 / 9px 9px; pointer-events: none }
.num b { position: relative; display: block; font-size: 38px; line-height: 1 }
.num span { position: relative; display: inline-block; margin-top: 8px; background: #fff; border: 2px solid var(--ink); padding: 0 6px; font-family: var(--label); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg) }
.num.blu { background: var(--blue) } .num.rosso { background: var(--red) } .num.verde { background: var(--green) } .num.rosa { background: var(--pink) }
.num:nth-child(2) { transform: rotate(1deg) } .num:nth-child(3) { transform: rotate(-1deg) }
.mira { padding: 14px 16px; margin-bottom: 8px }
.mira-testa { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px }
.mira-testa span { font-family: var(--display); font-size: 22px; letter-spacing: .04em }
.mira-testa .comic { font-size: 40px }
.barra { display: flex; height: 12px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; margin: 8px 0 6px }
.barra.grossa { height: 22px; border-width: 3px }
.barra i + i { border-left: 2px solid var(--ink) }
.barra i[style="flex:0"] { display: none }
.barra .g, .pallino.g { background: var(--green) }
.barra .s, .pallino.s { background: var(--red) }
.barra .v, .pallino.v { background: #CFC8D6 }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 14px; font-weight: 600 }
.legenda span { display: inline-flex; align-items: center; gap: 5px }
.pallino { width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; display: inline-block }
h3.sotto { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .04em; margin: 22px 0 10px }
.vuoto { padding: 16px; color: var(--muted); font-weight: 600 }
.giocata { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; margin-bottom: 16px }
.giocata.vinta { background: #FFFBE6 }
.giocata .vittoria { position: absolute; top: -15px; left: 78px; font-size: 16px }
.giocata .data { width: 54px; text-align: center; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff }
.giocata .data b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15 }
.giocata .data small { display: block; background: var(--red); color: #fff; font-family: var(--label); font-weight: 800; font-size: 13px; letter-spacing: .1em; border-top: 2px solid var(--ink) }
.giocata h4 { margin: 0; font-size: 18px; line-height: 1.15 }
.giocata .info { min-width: 0 }
.giocata .info > p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600 }
.giocata .legenda { font-size: 13px; gap: 2px 10px }
.giocata .esito { text-align: center; min-width: 64px }
.giocata .pos { font-family: var(--display); font-size: 22px; width: 44px; height: 44px; margin: 0 auto 4px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: #fff }
.giocata .pos.oro { background: var(--yellow); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink) }
.giocata .pos.argento { background: #D9D9E0 }
.giocata .pos.bronzo { background: #E8A86A }
.giocata .esito b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1 }
.giocata .esito small { font-family: var(--label); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
@media (max-width: 480px) {
  .numeri { grid-template-columns: repeat(2, 1fr) }
  .stella { width: 96px; height: 96px } .stella b { font-size: 40px }
  .hero-testo .grande { font-size: 28px }
}
.legale h2 { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: .04em; margin: 28px 0 6px }
.legale h3 { font-size: 18px; margin: 18px 0 4px }
.legale table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto }
.legale th, .legale td { border: 2px solid var(--ink); padding: 6px 8px; text-align: left; vertical-align: top }
.legale th { background: var(--yellow) }

footer { background: var(--ink); color: #CFC8D6; padding-block: 28px; font-size: 14px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center }
footer nav { display: flex; flex-wrap: wrap; gap: 16px }
footer nav a { color: #fff; text-decoration: none; font-family: var(--label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
footer nav a:hover { color: var(--yellow) }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }