/* Quizzopoli — tema "cartone animato fantasy" per il TELEFONO dei giocatori (index.php).
   Si carica dopo lo <style> della pagina: cambia solo l'aspetto (bordi, ombre, titoli, sfondo),
   non la logica né le dimensioni dei pulsanti. Per tornare al look precedente basta
   togliere la riga <link ... tema-cartone-gioco.css> da index.php. */
:root{--stroke:#0a1236}
body{
  background:
    radial-gradient(2px 2px at 12% 18%,#fff8 50%,transparent 52%),
    radial-gradient(2px 2px at 78% 9%,#ffd36ecc 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 44% 63%,#fff7 50%,transparent 52%),
    radial-gradient(2px 2px at 90% 71%,#fff8 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 26% 88%,#ffd36eaa 50%,transparent 52%),
    radial-gradient(circle at top,#2a3c92 0%,#0f1b4c 55%,#0a1236 100%);
  background-size:340px 340px,420px 420px,300px 300px,380px 380px,460px 460px,100% 100%;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed;
}
.brand{display:table;margin:0 auto 10px;background:#ffd36e;color:var(--stroke);border:3px solid var(--stroke);border-radius:999px;padding:6px 14px 4px;box-shadow:0 4px 0 var(--stroke);transform:rotate(-2deg)}
.title{color:#ffd36e;text-shadow:0 4px 0 var(--stroke)}
@supports (paint-order:stroke){.title{-webkit-text-stroke:7px var(--stroke);paint-order:stroke fill;text-shadow:0 5px 0 var(--stroke)}}
.mascot-sm{filter:drop-shadow(0 5px 0 rgba(0,0,0,.4))}
.subtitle{color:#c3cbf3}

.card{background:linear-gradient(170deg,#1d2f86,#16246a);border:4px solid var(--stroke);border-radius:26px;box-shadow:0 8px 0 var(--stroke),inset 0 0 0 2px rgba(255,255,255,.10);backdrop-filter:none}

input[type=text]{border:4px solid var(--stroke);border-radius:16px;box-shadow:inset 0 4px 0 rgba(10,18,54,.12),0 4px 0 var(--stroke)}
button.primary{background:linear-gradient(180deg,#ffe08a 0,#f5a623 100%);border:4px solid var(--stroke);border-radius:999px;box-shadow:0 6px 0 var(--stroke);transition:transform .08s ease,box-shadow .08s ease}
button.primary:active{opacity:1;transform:translateY(4px);box-shadow:0 2px 0 var(--stroke)}
.error{border:3px solid var(--stroke);border-radius:14px}
.tutorial-banner{border:3px solid var(--stroke);border-radius:999px;box-shadow:0 3px 0 var(--stroke)}
.chip{background:#2a3c92;border:3px solid var(--stroke);box-shadow:0 3px 0 var(--stroke);padding:4px 12px}
.avatar-label{color:#ffd36e}
.avatar-opt{background:#2a3c92;border:3px solid var(--stroke);border-radius:16px;box-shadow:0 3px 0 var(--stroke)}
.avatar-opt:active{transform:translateY(3px);box-shadow:0 0 0 var(--stroke)}
.avatar-opt.on{background:#ffd36e;border-color:var(--stroke);box-shadow:0 3px 0 var(--stroke),0 0 0 3px #fff}
.avatar-chosen .big{background:#ffd36e;border:4px solid var(--stroke);box-shadow:0 4px 0 var(--stroke)}
.avatar-chosen .avatar-change-link{border:3px solid var(--stroke);background:#2a3c92;box-shadow:0 3px 0 var(--stroke)}
.avatar-change-btn{border:3px solid var(--stroke);background:#2a3c92;box-shadow:0 3px 0 var(--stroke)}
.avatar-modal{border:4px solid var(--stroke);border-radius:26px;box-shadow:0 8px 0 var(--stroke);background:linear-gradient(170deg,#1d2f86,#16246a)}
.avatar-modal-close{border:3px solid var(--stroke);background:#2a3c92;box-shadow:0 3px 0 var(--stroke);border-radius:999px}
.nickname-save-btn{border:3px solid var(--stroke);box-shadow:0 3px 0 var(--stroke);border-radius:999px}
.avatar-modal-logoff{border-width:3px;border-color:var(--stroke);border-radius:999px}
.guest-toast{border:3px solid var(--stroke);box-shadow:0 5px 0 var(--stroke)}

/* domanda */
.qtop{color:#c3cbf3}
.timerbar{height:14px;background:#0a1236;border:3px solid var(--stroke);border-radius:99px}
.timerbar-fill{background:linear-gradient(90deg,#f5a623,#ffd36e);border-radius:99px}
.qtext{text-shadow:0 2px 0 var(--stroke)}
.qimg,.imgframe{border:4px solid var(--stroke);border-radius:18px;box-shadow:0 4px 0 var(--stroke)}
.opt{border:4px solid var(--stroke);border-radius:20px;box-shadow:0 6px 0 var(--stroke);transition:transform .08s ease,box-shadow .08s ease;text-shadow:0 2px 0 rgba(0,0,0,.28)}
.opt.c2{text-shadow:none}
.opt:active{transform:translateY(4px);box-shadow:0 2px 0 var(--stroke)}
.opt:disabled{box-shadow:0 2px 0 var(--stroke);transform:translateY(4px)}
.wager-opts .opt{text-shadow:none}
.joker-btn{border:3px solid var(--stroke);background:#2a3c92;border-radius:999px;box-shadow:0 4px 0 var(--stroke)}
.joker-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--stroke)}
.streak-badge{border:3px solid var(--stroke);border-radius:999px;box-shadow:0 3px 0 var(--stroke)}
.penalty-banner{border:3px solid var(--stroke);border-radius:999px}

/* risultato e classifica */
.resultbadge{border-width:4px;border-style:solid;border-color:var(--stroke);border-radius:20px;box-shadow:0 5px 0 var(--stroke)}
.resultbadge.ok{background:#2eb280;color:#fff;text-shadow:0 2px 0 var(--stroke)}
.resultbadge.ko{background:#e84a4f;color:#fff;text-shadow:0 2px 0 var(--stroke)}
.reveal-explanation{border:3px solid var(--stroke);background:#16246a}
.boardrow{background:#16246a;border:3px solid var(--stroke);box-shadow:0 3px 0 var(--stroke)}
.boardrow.you{background:#415bdf;border-color:var(--stroke);box-shadow:0 3px 0 var(--stroke),0 0 0 3px #ffd36e}
.mystats{background:#16246a;border:3px solid var(--stroke);border-radius:20px;box-shadow:0 4px 0 var(--stroke)}
.mystat-num{text-shadow:0 3px 0 var(--stroke);color:#ffd36e}
.resultcard{border:4px solid var(--stroke);border-radius:26px;box-shadow:0 6px 0 var(--stroke);background:linear-gradient(180deg,#f5a623,#c97d0b)}
.resultcard-name,.resultcard-phrase{color:#fff;text-shadow:0 2px 0 var(--stroke)}
.resultcard-score{color:#fff;text-shadow:0 3px 0 var(--stroke)}
.resultcard-gap{color:#ffe9b8}
.podium .bar{border:4px solid var(--stroke);border-bottom:none;box-shadow:inset 0 4px 0 rgba(255,255,255,.35)}

/* mini-giochi */
.mem-pad{border:4px solid var(--stroke);box-shadow:0 6px 0 var(--stroke)}
.mem-pad:active{box-shadow:0 2px 0 var(--stroke);transform:translateY(4px)}
.mem-cell{border-color:var(--stroke);box-shadow:0 4px 0 var(--stroke)}
.mem-slot{border-color:rgba(255,255,255,.5)}
.mem-undo{border:3px solid var(--stroke);background:#2a3c92;box-shadow:0 3px 0 var(--stroke);border-radius:999px}
.rlp-cell{border:4px solid var(--stroke);box-shadow:0 6px 0 var(--stroke)}
.rlp-amt,.rlp-pass{border:3px solid var(--stroke);background:#2a3c92;box-shadow:0 3px 0 var(--stroke)}
.rlp-amt.sel{border-color:var(--stroke)}
.pkp-btn{border:4px solid var(--stroke);box-shadow:0 6px 0 var(--stroke);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.pkp-btn.c2,.pkp-btn.pkp-glass{text-shadow:none}
.pkp-btn:active{box-shadow:0 2px 0 var(--stroke);transform:translateY(4px)}
.pkp-news{border:4px solid var(--stroke);box-shadow:0 5px 0 var(--stroke)}
.cd-face{border-color:var(--stroke)}
.indp-top{background:#0f1b4c;border-bottom:3px solid var(--stroke)}
.indp-cell{border-width:4px;border-color:var(--stroke)}
footer{color:#8f9bd6}
@media (prefers-reduced-motion:reduce){.opt,button.primary,.pkp-btn,.mem-pad{transition:none}}