/* ==========================================================================
   OPERAZIONE PAPERELLA — stile condiviso
   ========================================================================== */
:root{
  --abisso:#071a2f;
  --profondo:#0d2340;
  --blu:#12365f;
  --giallo:#f5b91f;
  --giallo-hi:#ffd45e;
  --crema:#f5e7c4;
  --crema-scuro:#e6d3a8;
  --ruggine:#d1451f;
  --verde:#14783c;
  --bianco:#f7fbff;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100dvh;
  font-family:'Nunito','Trebuchet MS',system-ui,sans-serif;
  color:var(--bianco);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(120,190,255,.20) 0%, rgba(120,190,255,0) 60%),
    linear-gradient(180deg,#14406e 0%, var(--profondo) 45%, var(--abisso) 100%);
  background-attachment:fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:28px 18px 60px;
  overflow-x:hidden;
}

.bolla{
  position:fixed; border-radius:50%; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05) 55%, rgba(255,255,255,0) 70%);
  border:1px solid rgba(255,255,255,.10);
  animation:sali linear infinite;
}
@keyframes sali{ from{ transform:translateY(20vh) } to{ transform:translateY(-115vh) } }

.schermo{ position:relative; z-index:1; width:100%; max-width:520px; }
.schermo.largo{ max-width:900px; }

/* --- testata ------------------------------------------------------------ */
.testata{ text-align:center; margin-bottom:22px; }

.logo{
  display:block; width:100%; max-width:250px; height:auto;
  margin:0 auto 12px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
  animation:affiora .7s cubic-bezier(.2,1.2,.35,1) both;
}
.logo.piccolo{ max-width:190px; margin-bottom:10px; }
@keyframes affiora{
  from{ transform:translateY(14px) scale(.94); opacity:0 }
  to{ transform:none; opacity:1 }
}

.mirino{ width:46px; height:46px; display:block; margin:0 auto 10px; }
.occhiello{
  font-family:'Anton','Arial Narrow',sans-serif; letter-spacing:.16em;
  font-size:13px; color:var(--giallo); text-transform:uppercase; margin:0 0 4px;
}
h1{
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.06em; line-height:.92; margin:0;
  font-size:clamp(30px,8vw,44px); color:var(--bianco);
  text-shadow:0 3px 0 var(--abisso), 0 8px 18px rgba(0,0,0,.5);
}
h1 .riga1{
  display:block; color:var(--bianco); font-size:.52em; letter-spacing:.06em;
  text-shadow:0 3px 0 var(--abisso), 0 8px 18px rgba(0,0,0,.5);
}
.sottotitolo{ margin:12px auto 0; max-width:340px; font-size:15px; color:#bcd6f0; }

/* --- pannelli ----------------------------------------------------------- */
.pannello{
  background:var(--crema);
  border:3px solid var(--abisso);
  border-radius:18px;
  box-shadow:0 10px 0 rgba(0,0,0,.30), inset 0 0 0 3px rgba(255,255,255,.45);
  padding:22px 20px; color:var(--profondo);
}
.pannello + .pannello{ margin-top:16px; }

.etichetta{
  font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:17px; color:var(--profondo);
  margin:0 0 8px; display:block;
}
.aiuto{ font-size:13px; color:#4a6280; margin:6px 0 0; }

/* --- campi -------------------------------------------------------------- */
input[type=tel], input[type=password], input[type=number]{
  width:100%; padding:15px 16px; font-size:20px; font-weight:700;
  font-family:'Nunito',sans-serif; letter-spacing:.06em;
  color:var(--profondo); background:#fffdf5;
  border:3px solid var(--profondo); border-radius:12px; outline:none;
}
input::placeholder{ color:#a8b6c6; font-weight:400; letter-spacing:.04em; }
input:focus{ border-color:var(--ruggine); box-shadow:0 0 0 4px rgba(209,69,31,.22); }

.scelta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scelta input{ position:absolute; opacity:0; width:0; height:0; }
.scelta label{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; cursor:pointer; user-select:none;
  background:#fffdf5; border:3px solid var(--profondo); border-radius:12px;
  font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase;
  letter-spacing:.06em; font-size:16px; color:var(--profondo);
  transition:transform .12s ease, background .12s ease;
}
.scelta label .ico{ font-size:24px; line-height:1; }
.scelta label:hover{ transform:translateY(-2px); }
.scelta input:focus-visible + label{ box-shadow:0 0 0 4px rgba(209,69,31,.35); }
.scelta input:checked + label{
  background:linear-gradient(180deg,var(--giallo-hi),var(--giallo));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);
}

/* --- bottoni ------------------------------------------------------------ */
.bottone{
  width:100%; margin-top:18px; padding:17px 20px; cursor:pointer;
  font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase;
  letter-spacing:.07em; font-size:22px; color:var(--profondo);
  background:linear-gradient(180deg,var(--giallo-hi),var(--giallo));
  border:3px solid var(--abisso); border-radius:14px;
  box-shadow:0 6px 0 #8a5f00; transition:transform .1s ease, box-shadow .1s ease;
}
.bottone:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #8a5f00; }
.bottone:active{ transform:translateY(4px); box-shadow:0 2px 0 #8a5f00; }
.bottone[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.bottone.piccolo{ font-size:16px; padding:12px 16px; }
.bottone.pericolo{ background:linear-gradient(180deg,#e8613a,var(--ruggine)); color:#fff; box-shadow:0 6px 0 #7c2410; }
.bottone.pericolo:hover{ box-shadow:0 8px 0 #7c2410; }
.bottone.neutro{ background:linear-gradient(180deg,#f6efdc,var(--crema-scuro)); box-shadow:0 6px 0 #a08f6a; }
.bottone.neutro:hover{ box-shadow:0 8px 0 #a08f6a; }
.bottone.fantasma{
  background:transparent; color:var(--crema); border-color:var(--crema);
  box-shadow:none; font-size:16px; padding:12px;
}
.bottone.fantasma:hover{ transform:none; background:rgba(245,231,196,.10); }

/* --- messaggi ----------------------------------------------------------- */
.avviso{
  margin-top:14px; padding:12px 14px; border-radius:12px; font-weight:700; font-size:15px;
  background:rgba(209,69,31,.12); border:2px solid var(--ruggine); color:#8c2a10;
}
.avviso.buono{ background:rgba(20,120,60,.12); border-color:var(--verde); color:var(--verde); }

/* --- esito: l'insegna di legno ------------------------------------------ */
.esito{ text-align:center; }
.esito .occhiello{ color:var(--ruggine); margin-bottom:14px; }
.insegna{
  position:relative; margin:0 auto; padding:20px 16px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,0) 2px 26px),
    linear-gradient(180deg,#9a6b32,#7a5124);
  border:4px solid #4a2f12; border-radius:10px;
  box-shadow:0 8px 0 rgba(0,0,0,.3), inset 0 0 26px rgba(0,0,0,.35);
  animation:emergi .55s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes emergi{ from{ transform:scale(.6) rotate(-4deg); opacity:0 } to{ transform:none; opacity:1 } }
.insegna .nome{
  font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase;
  font-size:clamp(30px,9vw,46px); line-height:1; color:var(--giallo);
  text-shadow:0 3px 0 #5c3d00, 0 6px 0 rgba(0,0,0,.55); word-break:break-word;
}
.insegna .didascalia{
  display:block; margin-top:8px; font-size:13px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:#f0dcb4;
}
.esito .nota{ margin:16px 0 0; font-size:14px; color:#4a6280; }
.esito .nota b{ color:var(--ruggine); }

/* --- tabelle e squadre (pagina organizzatore) --------------------------- */
.tabella{ width:100%; border-collapse:collapse; margin-top:12px; font-size:15px; }
.tabella th{
  text-align:left; font-family:'Anton',sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:13px; color:#4a6280;
  padding:0 10px 8px; border-bottom:2px solid var(--crema-scuro);
}
.tabella td{ padding:10px; border-bottom:1px solid var(--crema-scuro); vertical-align:middle; }
.tabella tr:last-child td{ border-bottom:none; }
.tabella .nomecodice{
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.04em;
  font-size:17px; color:var(--profondo);
}
.tabella .numero{ font-variant-numeric:tabular-nums; color:#4a6280; }
.pallino{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; font-size:14px;
  background:var(--profondo); color:var(--giallo); font-weight:900;
}

.squadre{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.squadra{
  background:var(--crema); border:3px solid var(--abisso); border-radius:18px;
  box-shadow:0 8px 0 rgba(0,0,0,.3); overflow:hidden;
}
.squadra h3{
  margin:0; padding:14px 18px; font-family:'Anton',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.06em; font-size:21px;
  background:linear-gradient(180deg,var(--blu),var(--profondo));
  color:var(--giallo); border-bottom:3px solid var(--abisso);
}
.squadra ol{ margin:0; padding:12px 18px 18px; list-style:none; counter-reset:staffetta; }
.squadra li{
  counter-increment:staffetta; display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px dashed var(--crema-scuro); color:var(--profondo);
}
.squadra li:last-child{ border-bottom:none; }
.squadra li::before{
  content:counter(staffetta); flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,var(--giallo-hi),var(--giallo));
  border:2px solid var(--abisso); color:var(--profondo);
  font-family:'Anton',sans-serif; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.squadra li b{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; font-size:17px; }
.squadra li .sesso{ margin-left:auto; color:#7a8ea3; font-size:16px; }

.riga-azioni{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.riga-azioni > *{ flex:1 1 160px; margin-top:0; }
.campo-corto{ max-width:120px; }

.vuoto{ font-size:14px; color:#4a6280; font-style:italic; margin:12px 0 0; }
.contatore{ font-size:13px; color:#4a6280; margin:4px 0 0; }

.pie{ margin-top:26px; text-align:center; }
.pie a{
  color:#7ea3ca; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; font-weight:900;
}
.pie a:hover{ color:var(--giallo); }

:focus-visible{ outline:3px solid var(--giallo); outline-offset:3px; }
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .bolla{ display:none; }
  .logo{ animation:none; }
  .insegna{ animation:none; }
  .bottone{ transition:none; }
}

@media print{
  body{ background:#fff; color:#000; }
  .bolla,.pie,.bottone,form{ display:none !important; }
  .squadra{ break-inside:avoid; box-shadow:none; }
}