/* ============================================================
   MOSTRI PAURA — webapp mobile-first, pixel art saturo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --bg:#1a0d2e; --bg2:#2d1b4e; --panel:#3a2566; --ink:#fef9ff;
  --slime:#39ff14; --slime-d:#1fa30c; --magenta:#ff2e9a; --cyan:#16e0e0;
  --gold:#ffcb05; --orange:#ff7a00; --danger:#ff2d2d; --shadow:#0d061a;
  --comune:#8a8a8a; --raro:#16e0e0; --epico:#b14bff; --leggendario:#ffcb05;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{image-rendering:pixelated;-webkit-text-size-adjust:100%;}
body{
  font-family:'VT323',monospace; font-size:21px; color:var(--ink);
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.02) 38px 40px),
             radial-gradient(circle at 20% 10%,var(--bg2),var(--bg) 60%);
  background-attachment:fixed; min-height:100vh; letter-spacing:.5px;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  overscroll-behavior-y:contain;
}
h1,h2,h3,.pixel{font-family:'Press Start 2P',monospace;line-height:1.55;}

header.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:var(--panel); border-bottom:4px solid var(--slime); box-shadow:0 4px 0 var(--shadow);
}
.logobox{display:flex;flex-direction:column;gap:2px;}
.logo{font-family:'Press Start 2P';font-size:16px;line-height:1.1;}
.logo .m{color:#fff;text-shadow:0 0 4px #fff,0 0 8px #ff2e9a,0 0 16px #ff2e9a,0 0 26px #ff077e;}
.logo .p{color:#fff;text-shadow:0 0 4px #fff,0 0 8px #16e0e0,0 0 16px #16e0e0,0 0 26px #00b8b8;}
.subtitle{font-family:'Press Start 2P';font-size:7px;color:var(--magenta);
  text-shadow:1px 1px 0 var(--shadow);letter-spacing:1px;}
.whoami{font-size:17px;color:var(--cyan);cursor:pointer;transition:filter .12s, transform .1s;display:inline-block;}
a.whoami:hover{filter:brightness(1.3);transform:scale(1.04);}

main{max-width:680px;margin:0 auto;padding:18px 14px 0;}

.btn{
  font-family:'Press Start 2P';font-size:12px;cursor:pointer;color:var(--shadow);
  background:var(--slime);border:3px solid var(--shadow);padding:15px 18px;
  box-shadow:4px 4px 0 var(--shadow);text-decoration:none;display:inline-block;
  transition:transform .05s;min-height:48px;line-height:1.4;
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow);}
.btn.pink{background:var(--magenta);color:var(--ink);}
.btn.cyan{background:var(--cyan);} .btn.gold{background:var(--gold);}
.btn.danger{background:var(--danger);color:var(--ink);} .btn.ghost{background:var(--bg2);color:var(--ink);}
.btn.sm{font-size:10px;padding:10px 12px;min-height:40px;}
.btn.full{display:block;width:100%;text-align:center;}

.panel{background:var(--panel);border:4px solid var(--shadow);
  box-shadow:6px 6px 0 var(--shadow);padding:18px;margin-bottom:20px;}
.panel h2{font-size:13px;color:var(--gold);margin-bottom:14px;}
label{display:block;font-family:'Press Start 2P';font-size:9px;color:var(--cyan);margin:14px 0 6px;}
input,textarea,select{width:100%;font-family:'VT323',monospace;font-size:20px;color:var(--ink);
  background:var(--bg);border:3px solid var(--slime-d);padding:12px;min-height:48px;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--slime);}
textarea{resize:vertical;min-height:90px;}

.msg{padding:13px;border:3px solid var(--shadow);margin-bottom:16px;font-size:19px;}
.msg.ok{background:var(--slime-d);color:var(--ink);} .msg.err{background:var(--danger);color:var(--ink);}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr);}}

.card{position:relative;background:var(--bg2);border:4px solid var(--comune);
  padding:7px;box-shadow:4px 4px 0 var(--shadow);display:flex;flex-direction:column;gap:5px;}
.card.raro{border-color:var(--raro);}
.card.epico{border-color:var(--epico);box-shadow:4px 4px 0 var(--shadow),0 0 12px var(--epico);}
.card.leggendario{border-color:var(--leggendario);box-shadow:4px 4px 0 var(--shadow),0 0 14px var(--leggendario);}
.card .cname{font-family:'Press Start 2P';font-size:7px;color:var(--gold);text-align:center;min-height:20px;line-height:1.4;}
.card .cimg{width:100%;aspect-ratio:1;object-fit:cover;background:var(--shadow);
  border:3px solid var(--shadow);image-rendering:pixelated;cursor:pointer;}
.card .cdesc{font-size:14px;line-height:1.12;color:var(--ink);}
.card .qty{position:absolute;top:-10px;right:-10px;font-family:'Press Start 2P';font-size:9px;
  background:var(--magenta);color:var(--ink);border:3px solid var(--shadow);padding:5px 7px;box-shadow:2px 2px 0 var(--shadow);}
.card.unknown{border-color:var(--shadow);
  background:repeating-linear-gradient(45deg,#241640,#241640 8px,#1c1133 8px,#1c1133 16px);}
.card.unknown .cimg{display:flex;align-items:center;justify-content:center;color:var(--epico);font-family:'Press Start 2P';font-size:26px;}
.card.unknown .cname,.card.unknown .cdesc{color:#6a5a8a;}

.tag{font-family:'Press Start 2P';font-size:7px;padding:3px 5px;border:2px solid var(--shadow);display:inline-block;}
.tag.comune{background:var(--comune);} .tag.raro{background:var(--raro);color:var(--shadow);}
.tag.epico{background:var(--epico);} .tag.leggendario{background:var(--leggendario);color:var(--shadow);}

.album-stats{font-family:'Press Start 2P';font-size:11px;color:var(--cyan);margin-bottom:16px;text-align:center;}

.player-row{background:var(--bg2);border:3px solid var(--shadow);padding:12px;margin-bottom:12px;}
.player-row .pname{font-family:'Press Start 2P';font-size:11px;color:var(--ink);}
.status-active{color:var(--slime);} .status-blocked{color:var(--orange);} .status-banned{color:var(--danger);}

.hero{text-align:center;margin:24px 0;}
.hero .eyes{font-size:44px;letter-spacing:8px;}
.hero h1{font-size:26px;margin:14px 0 6px;line-height:1.2;}
.hero h1:not(.neon-title) .m{color:var(--gold);text-shadow:3px 3px 0 var(--orange),6px 6px 0 var(--shadow);}
.hero h1:not(.neon-title) .p{color:var(--orange);text-shadow:3px 3px 0 var(--gold),6px 6px 0 var(--shadow);}
/* quando il logo del login usa l'insegna neon, lascia comandare le regole .neon-title */
.hero h1.neon-title{margin:14px auto 6px;}
.hero .herosub{font-family:'Press Start 2P';font-size:11px;color:var(--magenta);
  text-shadow:2px 2px 0 var(--shadow);margin-bottom:14px;}
.hero p{font-size:20px;color:var(--gold);}

.center{text-align:center;} .muted{color:#9a86bf;font-size:16px;}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hidden{display:none;}

nav.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:flex-start;align-items:stretch;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--panel);border-top:4px solid var(--slime);box-shadow:0 -4px 0 var(--shadow);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
nav.bottomnav::-webkit-scrollbar{display:none;}
nav.bottomnav a{
  position:relative;flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:#9a86bf;font-family:'Press Start 2P';font-size:7px;padding:0 6px;
}
nav.bottomnav a .ico{font-size:22px;line-height:1;}
nav.bottomnav a.active{color:var(--slime);}
nav.bottomnav a.active .ico{filter:drop-shadow(0 0 4px var(--slime));}
nav.bottomnav a .badge{position:absolute;top:4px;right:50%;transform:translateX(22px);
  background:var(--danger);color:#fff;border:2px solid var(--ink);
  font-size:9px;min-width:18px;padding:2px 4px;text-align:center;border-radius:9px;
  box-shadow:0 0 6px var(--danger);animation:badgePulse 1.2s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{transform:translateX(22px) scale(1);}50%{transform:translateX(22px) scale(1.18);}}
nav.bottomnav a.has-notif .ico{animation:bellShake 1.5s ease-in-out infinite;}
@keyframes bellShake{0%,90%,100%{transform:rotate(0);}93%{transform:rotate(-12deg);}96%{transform:rotate(12deg);}}

.modal{position:fixed;inset:0;z-index:100;background:rgba(13,6,26,.92);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.modal.open{display:flex;}
.modal .card{max-width:300px;width:100%;border-width:5px;}
.modal .cimg{cursor:default;}
.modal .close{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;
  font-family:'Press Start 2P';font-size:14px;color:var(--ink);background:var(--danger);
  border:3px solid var(--shadow);padding:10px 13px;cursor:pointer;}

.install-hint{background:var(--bg2);border:3px dashed var(--cyan);padding:12px;
  font-size:16px;margin-bottom:16px;color:var(--cyan);}

/* Regolamento: rende leggibile l'HTML formattato su sfondo scuro */
.rules-content{font-size:18px;line-height:1.5;}
.rules-content h1{font-size:22px;color:var(--gold);margin:10px 0;}
.rules-content h2{font-size:18px;color:var(--gold);margin:10px 0;}
.rules-content h3{font-size:15px;color:var(--cyan);margin:8px 0;}
.rules-content p{margin:8px 0;}
.rules-content ul,.rules-content ol{margin:8px 0 8px 22px;}
.rules-content a{color:var(--cyan);}
.rules-content strong,.rules-content b{color:var(--ink);}

/* Barra strumenti editor Quill: sfondo chiaro e icone scure ben visibili */
.ql-toolbar.ql-snow{background:#e8e8f0 !important;border:3px solid var(--shadow) !important;}
.ql-toolbar.ql-snow .ql-stroke{stroke:#1a0d2e !important;}
.ql-toolbar.ql-snow .ql-fill{fill:#1a0d2e !important;}
.ql-toolbar.ql-snow .ql-picker{color:#1a0d2e !important;}
.ql-toolbar.ql-snow button:hover .ql-stroke{stroke:var(--magenta) !important;}
.ql-toolbar.ql-snow button.ql-active .ql-stroke{stroke:var(--magenta) !important;}
.ql-container.ql-snow{border:3px solid var(--shadow) !important;border-top:none !important;font-size:16px;}
.ql-editor{font-family:'VT323',monospace;font-size:18px;}

/* ===== ALBUM PAGINA (raccoglitore figurine) ===== */
.album-book{
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 28px),
    linear-gradient(160deg, #2a1850, #1d1138);
  border:5px solid var(--gold);
  box-shadow:6px 6px 0 var(--shadow), inset 0 0 0 3px #0d061a, inset 0 0 30px rgba(0,0,0,.5);
  border-radius:6px;
  padding:22px 16px 16px;
  margin-bottom:10px;
}
/* "rilegatura" centrale dell'album */
.album-book .album-binding{
  position:absolute;top:8px;bottom:8px;left:50%;width:4px;transform:translateX(-50%);
  background:repeating-linear-gradient(0deg,var(--shadow) 0 8px,transparent 8px 16px);
  opacity:.4;pointer-events:none;
}
@media(max-width:519px){ .album-book .album-binding{display:none;} }

/* gli slot dell'album: ogni figurina nel suo incavo */
.album-book .grid{position:relative;z-index:1;}
.album-book .card{
  background:var(--bg2);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4), 3px 3px 0 var(--shadow);
  cursor:pointer;transition:transform .08s;
}
.album-book .card:active{transform:scale(.97);}
.album-book .card.unknown{
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px),
    var(--bg);
  cursor:default;
}
/* numero slot per le carte mancanti, in alto a sinistra */
.card .slot-num{
  position:absolute;top:4px;left:6px;font-family:'Press Start 2P';font-size:8px;
  color:#6a5a8a;z-index:2;
}

/* ===== CARTA INGRANDITA NEL MODALE ===== */
.modal .card-zoom{
  max-width:340px;width:92vw;border-width:6px;cursor:default;
  background:var(--bg2);padding:6px;
}
.modal .card-zoom .cname{font-size:11px;min-height:0;margin:8px 4px;line-height:1.5;}
.modal .card-zoom .cimg{aspect-ratio:1;cursor:default;}
.modal .card-zoom .cdesc{
  display:block;font-family:'VT323',monospace;font-size:20px;color:var(--ink);
  margin:10px 6px;line-height:1.3;text-align:center;
}
.modal .card-zoom .tag{font-size:9px;margin:6px;}
.modal .card-zoom .qty{font-size:12px;top:-12px;right:-12px;}

/* etichetta pagina dentro l'album */
.album-page-label{
  position:relative;z-index:1;text-align:center;font-family:'Press Start 2P';font-size:8px;
  color:var(--gold);opacity:.75;margin-bottom:10px;
}
/* frecce sfoglia album */
.album-pager{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 4px;
}
.album-pager-num{font-family:'Press Start 2P';font-size:10px;color:var(--cyan);}

/* ===== STATISTICHE CARTA ===== */
/* nascoste nella griglia dell'album (troppo piccole), visibili solo nello zoom */
.card .card-stats{display:none;}
.modal .card-zoom .card-stats{
  display:block;margin:10px 6px 4px;padding:10px;
  background:var(--bg);border:2px solid var(--magenta);
}
.modal .card-zoom .card-stats .stat-row{
  font-family:'VT323',monospace;font-size:19px;color:var(--ink);
  display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.modal .card-zoom .card-stats .stat-row b{color:var(--gold);}
.modal .card-zoom .card-stats .stat-ability{
  font-family:'VT323',monospace;font-size:18px;color:var(--slime);margin-top:6px;line-height:1.3;
}
.modal .card-zoom .card-stats .stats-title{
  font-family:'Press Start 2P';font-size:9px;color:var(--magenta);
  text-align:center;margin-bottom:8px;
}

/* ===== LANDING PAGE ===== */
body.landing{padding-bottom:0;}
.land-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:var(--panel);border-bottom:4px solid var(--slime);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;gap:8px;
}
.land-logo{font-family:'Press Start 2P';font-size:14px;}
.land-logo .m{color:var(--gold);} .land-logo .p{color:var(--orange);}
.land-menu{display:flex;gap:14px;align-items:center;}
.land-menu a{font-family:'Press Start 2P';font-size:9px;color:var(--ink);text-decoration:none;}
.land-menu .land-login{background:var(--slime);color:var(--bg);padding:8px 12px;border:2px solid var(--shadow);box-shadow:2px 2px 0 var(--shadow);}
.land-hero{text-align:center;padding:50px 20px 30px;}
.land-hero h1{font-family:'Press Start 2P';font-size:30px;line-height:1.3;margin:0;}
.land-hero h1 .m{color:var(--gold);} .land-hero h1 .p{color:var(--orange);}
.land-tagline{font-family:'VT323',monospace;font-size:22px;color:var(--slime);margin-top:10px;}
.land-content{max-width:760px;margin:0 auto;padding:20px;}
.land-contact{max-width:760px;margin:0 auto;padding:30px 20px;text-align:center;border-top:3px solid var(--shadow);}
.land-contact h2{color:var(--cyan);}
.land-footer{text-align:center;padding:24px;border-top:3px solid var(--shadow);font-family:'VT323',monospace;font-size:17px;}
.land-footer a{color:var(--cyan);}
@media(max-width:519px){
  .land-hero h1{font-size:20px;}
  .land-logo{font-size:11px;}
}

/* ===== LANDING DINAMICA: insegna neon ===== */
/* titolo come insegna al neon: magenta + ciano, sfarfallio "tubo che si accende" */
.neon-title{
  font-family:'Press Start 2P';
  line-height:1.4;
  letter-spacing:3px;
  display:inline-block;
  padding:22px 30px;
  border:3px solid rgba(255,46,154,.5);
  border-radius:14px;
  box-shadow:
    0 0 8px rgba(255,46,154,.6),
    0 0 20px rgba(255,46,154,.35),
    inset 0 0 14px rgba(255,46,154,.25);
  background:rgba(10,4,22,.35);
  animation:signBuzz 5s infinite;
}
.neon-title .m{
  color:#fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #ff2e9a,
    0 0 22px #ff2e9a,
    0 0 38px #ff2e9a,
    0 0 60px #ff077e;
  animation:neonFlicker 4.5s infinite;
}
.neon-title .p{
  color:#fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #16e0e0,
    0 0 22px #16e0e0,
    0 0 38px #16e0e0,
    0 0 60px #00b8b8;
  animation:neonFlicker 4.5s infinite .3s;
}
/* la cornice dell'insegna ronza/pulsa leggermente */
@keyframes signBuzz{
  0%,100%{border-color:rgba(255,46,154,.5);box-shadow:0 0 8px rgba(255,46,154,.6),0 0 20px rgba(255,46,154,.35),inset 0 0 14px rgba(255,46,154,.25);}
  48%,52%{border-color:rgba(255,46,154,.85);box-shadow:0 0 14px rgba(255,46,154,.9),0 0 34px rgba(255,46,154,.55),inset 0 0 20px rgba(255,46,154,.4);}
  50%{border-color:rgba(255,46,154,.3);box-shadow:0 0 4px rgba(255,46,154,.3);}
}
.neon-sub{
  color:#fff !important;
  text-shadow:0 0 4px #fff,0 0 10px #39ff14,0 0 18px #39ff14,0 0 30px #16a600;
  animation:neonFlicker 6s infinite 1s;
  margin-top:16px;
}
/* sfarfallio realistico: per lo più acceso, qualche guizzo di spegnimento come un tubo neon vero */
@keyframes neonFlicker{
  0%,18%,20%,50%,52%,100%{opacity:1;filter:brightness(1.1);}
  19%,51%{opacity:.4;filter:brightness(.6);}
  21%{opacity:.85;}
  60%,62%{opacity:.7;filter:brightness(.85);}
  61%{opacity:1;filter:brightness(1.2);}
}

/* carosello: nastro che sfila in loop */
.land-cards-wrap{overflow-x:auto;overflow-y:hidden;padding:24px 0;position:relative;
  border-top:3px solid var(--shadow);border-bottom:3px solid var(--shadow);
  background:repeating-linear-gradient(90deg,rgba(255,203,5,.04) 0 2px,transparent 2px 40px);
  scrollbar-width:none;cursor:grab;}
.land-cards-wrap::-webkit-scrollbar{display:none;}
.land-cards-wrap.grabbing{cursor:grabbing;}
.land-cards-track{display:flex;gap:18px;width:max-content;animation:slideTrack 40s linear infinite;}
.land-cards-wrap:hover .land-cards-track{animation-play-state:paused;}
@keyframes slideTrack{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ogni carta ondeggia su e giù mentre sfila + bordo neon */
.float-card{
  height:230px;flex:0 0 auto;
  border:4px solid #ffcb05;
  box-shadow:0 0 8px rgba(255,203,5,.6),4px 4px 0 var(--shadow);
  image-rendering:pixelated;
  animation:floatCard 2.6s ease-in-out infinite;
}
/* carte vetrina cliccabili (contenitore con img dentro) */
.vetrina-card{cursor:pointer;padding:0;background:none;line-height:0;border:none;box-shadow:none;position:relative;}
.vetrina-card img{height:230px;display:block;border:4px solid #ffcb05;
  box-shadow:0 0 8px rgba(255,203,5,.6),4px 4px 0 var(--shadow);image-rendering:pixelated;
  transition:transform .12s, box-shadow .12s;-webkit-user-drag:none;user-select:none;}
@media(hover:hover){ .vetrina-card:hover img{transform:scale(1.05);box-shadow:0 0 16px rgba(255,203,5,.9),4px 4px 0 var(--shadow);} }
@keyframes floatCard{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-14px) rotate(1.5deg);}
}
@media(max-width:519px){ .float-card{height:160px;} .vetrina-card img{height:160px;} }

/* popup carta vetrina */
.vetrina-modal{position:fixed;inset:0;background:rgba(8,2,18,.88);z-index:9999;
  display:none;align-items:center;justify-content:center;padding:20px;animation:modalFade .2s ease-out;}
.vetrina-modal.open{display:flex;}
.vetrina-box{background:var(--panel,#1a0f2e);border:4px solid var(--gold,#ffcb05);
  box-shadow:0 0 24px rgba(255,203,5,.5);max-width:380px;width:100%;padding:20px;
  text-align:center;position:relative;animation:cardPop .32s cubic-bezier(.2,1.3,.4,1);
  max-height:90vh;overflow-y:auto;}
.vetrina-box img{max-height:46vh;width:auto;max-width:100%;border:4px solid var(--gold,#ffcb05);
  image-rendering:pixelated;box-shadow:4px 4px 0 var(--shadow);margin-bottom:12px;}
.vetrina-num{font-family:'Press Start 2P';font-size:10px;color:var(--cyan);margin-bottom:6px;}
.vetrina-box h3{font-family:'Press Start 2P';font-size:14px;color:var(--gold);margin-bottom:10px;line-height:1.4;}
.vetrina-box p{font-family:'VT323',monospace;font-size:19px;line-height:1.3;color:#e8e0f0;}
.vetrina-close{position:absolute;top:8px;right:10px;background:var(--danger,#ff3860);color:#fff;
  border:3px solid var(--shadow);width:34px;height:34px;cursor:pointer;font-size:16px;
  font-family:'Press Start 2P';box-shadow:2px 2px 0 var(--shadow);line-height:1;}

/* ===== TASTO MUSICA (pixel-art, fisso in alto a destra) ===== */
.music-btn{
  position:fixed;top:calc(env(safe-area-inset-top) + 64px);right:12px;z-index:120;
  width:42px;height:42px;cursor:pointer;
  font-family:'Press Start 2P';font-size:16px;
  background:var(--panel);color:#6a5a8a;
  border:3px solid var(--shadow);box-shadow:2px 2px 0 var(--shadow);
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;transition:transform .08s;
}
/* sulla landing la topbar è diversa: tasto più in alto */
body.landing .music-btn{top:calc(env(safe-area-inset-top) + 70px);}
.music-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow);}
.music-btn.playing{
  color:var(--slime);
  border-color:var(--slime);
  text-shadow:0 0 6px var(--slime);
  animation:musicBeat .6s ease-in-out infinite;
}
@keyframes musicBeat{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

/* ===== FILTRO ESPANSIONE nel raccoglitore ===== */
.exp-filter{margin-bottom:12px;}
.exp-filter-label{font-family:'Press Start 2P';font-size:9px;color:var(--magenta);display:block;margin-bottom:6px;}
.exp-filter-btns{display:flex;gap:6px;flex-wrap:wrap;}
.exp-progress{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.exp-prog-item{font-family:'VT323',monospace;font-size:17px;color:var(--ink);background:var(--bg);border:2px solid var(--shadow);padding:3px 8px;}
.exp-prog-item b{color:var(--slime);}

/* ===== QUALITÀ DELLA VITA: desktop, transizioni, neon leggero ===== */

/* logo cliccabile con hover */
a.logobox{cursor:pointer;transition:transform .12s, filter .12s;}
a.logobox:hover{transform:scale(1.03);filter:brightness(1.15);}
a.logobox:active{transform:scale(0.98);}

/* bottom nav: su DESKTOP centrata e contenuta (non sgranata da un lato) */
@media(min-width:760px){
  nav.bottomnav{
    justify-content:center;
    max-width:1000px;margin:0 auto;
    border-left:4px solid var(--slime);border-right:4px solid var(--slime);
    border-top-left-radius:10px;border-top-right-radius:10px;
    overflow-x:visible;
  }
  nav.bottomnav a{flex:1 1 0;min-width:0;font-size:8px;padding:0 4px;}
  nav.bottomnav a .ico{font-size:22px;}
  nav.bottomnav a span:not(.ico):not(.badge){
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
}

/* hover/feedback sui pulsanti nav (desktop) */
nav.bottomnav a{transition:color .12s, transform .1s;}
@media(hover:hover){
  nav.bottomnav a:hover{color:var(--slime);transform:translateY(-2px);}
  nav.bottomnav a:hover .ico{filter:drop-shadow(0 0 5px var(--slime));}
}

/* transizione di entrata pagina (fade + slide leggero) */
main{animation:pageIn .35s ease-out;}
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* hover/press sui bottoni generici */
.btn{transition:transform .08s, filter .12s, box-shadow .12s;}
@media(hover:hover){ .btn:hover{filter:brightness(1.12);} }
.btn:active{transform:translate(1px,1px);}

/* pannelli: leggera entrata a cascata */
.panel{transition:border-color .15s;}
@media(hover:hover){ .panel:hover{border-color:var(--slime-d); } }

/* neon leggero sui titoli di sezione (h2) - parsimonia */
main h2{text-shadow:0 0 6px rgba(57,255,20,.18);}

/* carte nell'album: hover che le "solleva" */
.card{transition:transform .12s, box-shadow .12s;}
@media(hover:hover){
  .card:not(.unknown):hover{transform:translateY(-4px) scale(1.02);box-shadow:0 6px 14px rgba(0,0,0,.4),0 0 10px rgba(255,203,5,.3);cursor:pointer;}
}

/* effetto apertura carta nel modale: zoom-in elastico */
.modal.open .card-zoom{animation:cardPop .32s cubic-bezier(.2,1.3,.4,1);}
@keyframes cardPop{from{opacity:0;transform:scale(.6) rotate(-3deg);}to{opacity:1;transform:scale(1) rotate(0);}}

/* il modale che sfuma in entrata */
.modal.open{animation:modalFade .2s ease-out;}
@keyframes modalFade{from{opacity:0;}to{opacity:1;}}

/* badge "NUOVO"/avvisi: piccolo glow */
.player-row{transition:border-color .15s, transform .1s;}

/* ===== CHECKBOX e RADIO: piccole e ordinate (non quadratoni) ===== */
input[type="checkbox"], input[type="radio"]{
  width:20px !important;height:20px !important;min-height:0 !important;
  flex:0 0 auto;margin:0 6px 0 0;vertical-align:middle;
  accent-color:var(--magenta);cursor:pointer;display:inline-block;
  box-shadow:none !important;border:none !important;padding:0 !important;
}
/* righe della lista "dai carta": allineate e compatte */
label.checkrow{display:flex !important;align-items:center;gap:6px;padding:6px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:16px;}
label.checkrow:hover{background:rgba(255,255,255,.04);}
label.checkrow input{margin:0;}

/* ===== SELECT a tema (via il grigio Windows) ===== */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:var(--bg);
  /* freccina pixel custom in SVG (magenta) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 4 L7 10 L12 4' stroke='%23ff2e9a' stroke-width='2.5' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:38px;cursor:pointer;
}
select:hover{border-color:var(--magenta);}
/* opzioni della tendina aperta (Chrome/Firefox/Edge/Android: ok; iOS impone il suo) */
select option{
  background:var(--bg);color:var(--ink);
  font-family:'VT323',monospace;font-size:18px;
}
select option:checked, select option:hover{
  background:var(--magenta);color:var(--bg);
}
select optgroup{background:var(--panel);color:var(--gold);font-family:'Press Start 2P';font-size:11px;}

/* campi data/ora: stesso tema, icona calendario chiara */
input[type="date"],input[type="datetime-local"],input[type="time"]{color-scheme:dark;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(40%) sepia(80%) saturate(2000%) hue-rotate(300deg);cursor:pointer;
}

/* ===== SCROLLBAR a tema (via il grigio Windows) ===== */
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--magenta) var(--bg);}
/* WebKit/Chrome/Edge/Safari */
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--bg);border-left:2px solid var(--shadow);}
::-webkit-scrollbar-thumb{
  background:var(--magenta);border:2px solid var(--shadow);
  box-shadow:inset 0 0 4px rgba(0,0,0,.4);
}
::-webkit-scrollbar-thumb:hover{background:var(--slime);}
::-webkit-scrollbar-corner{background:var(--bg);}
/* le scrollbar nascoste (nav, carosello) restano nascoste: regole specifiche già presenti */

/* ===== BUSTINE: vetrina nello shop ===== */
.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:600px){ .pack-grid{grid-template-columns:repeat(3,1fr);} }
.pack-card{background:var(--bg2);border:3px solid var(--magenta);box-shadow:4px 4px 0 var(--shadow);
  padding:10px;text-align:center;transition:transform .12s, box-shadow .12s;}
@media(hover:hover){ .pack-card:hover{transform:translateY(-4px);box-shadow:4px 8px 0 var(--shadow),0 0 14px rgba(255,46,154,.4);} }
.pack-img{width:100%;height:120px;object-fit:contain;image-rendering:pixelated;margin-bottom:6px;
  animation:packWiggle 3s ease-in-out infinite;}
.pack-img-ph{display:flex;align-items:center;justify-content:center;font-size:54px;background:var(--bg);border:2px dashed var(--magenta);}
.pack-name{font-family:'Press Start 2P';font-size:9px;color:var(--magenta);line-height:1.4;margin-bottom:3px;}
.pack-exp{font-size:13px;margin-bottom:4px;}
.pack-price{font-family:'Press Start 2P';font-size:12px;color:var(--gold);margin-bottom:8px;}
@keyframes packWiggle{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}

/* ===== APERTURA BUSTINA: animazione ===== */
.pack-open-modal{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at center, rgba(58,37,102,.97), rgba(8,2,18,.99));
  animation:modalFade .3s ease-out;}
.pack-open-inner{text-align:center;max-width:100%;}
.pack-open-title{font-family:'Press Start 2P';font-size:14px;color:var(--gold);
  text-shadow:0 0 10px rgba(255,203,5,.6);margin-bottom:24px;animation:packTitleIn .5s ease-out;}
@keyframes packTitleIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
.pack-open-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.reveal-card{width:130px;height:182px;perspective:700px;opacity:0;
  animation:revealPop .6s ease-out forwards;}
@keyframes revealPop{from{opacity:0;transform:translateY(30px) scale(.8);}to{opacity:1;transform:none;}}
.reveal-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  animation:revealFlip .8s ease-out forwards;}
/* il flip parte dopo la comparsa, sfasato per ogni carta via animation-delay sul parent */
.reveal-card{animation:revealPop .6s ease-out forwards;}
.reveal-card .reveal-inner{animation:revealFlip .7s cubic-bezier(.4,1.4,.5,1) forwards;animation-delay:inherit;}
@keyframes revealFlip{from{transform:rotateY(180deg);}to{transform:rotateY(0);}}
.reveal-back,.reveal-front{position:absolute;inset:0;backface-visibility:hidden;
  border:4px solid var(--gold);box-shadow:4px 4px 0 var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.reveal-back{background:var(--magenta);font-size:48px;}
.reveal-front{background:var(--bg2);transform:rotateY(180deg);padding:6px;overflow:hidden;}
.reveal-front img{width:100%;height:120px;object-fit:contain;image-rendering:pixelated;}
.reveal-name{font-family:'Press Start 2P';font-size:7px;color:var(--ink);margin-top:4px;line-height:1.3;}
.reveal-rar{font-family:'Press Start 2P';font-size:7px;margin-top:4px;padding:2px 4px;}
/* colori per rarità (bordo + glow della carta rivelata) */
.rar-comune .reveal-front{border-color:#9aa;box-shadow:4px 4px 0 var(--shadow);}
.rar-raro .reveal-front{border-color:var(--cyan);box-shadow:0 0 12px rgba(22,224,224,.6),4px 4px 0 var(--shadow);}
.rar-epico .reveal-front{border-color:#b15cff;box-shadow:0 0 16px rgba(177,92,255,.7),4px 4px 0 var(--shadow);}
.rar-leggendario .reveal-front{border-color:var(--gold);box-shadow:0 0 20px rgba(255,203,5,.8),4px 4px 0 var(--shadow);}
.rar-divina .reveal-front{border-color:#ff2e9a;box-shadow:0 0 26px rgba(255,46,154,.95),0 0 40px rgba(255,46,154,.5),4px 4px 0 var(--shadow);animation:divinaPulse 1.2s ease-in-out infinite;}
@keyframes divinaPulse{0%,100%{box-shadow:0 0 26px rgba(255,46,154,.95),4px 4px 0 var(--shadow);}50%{box-shadow:0 0 40px rgba(255,46,154,1),0 0 60px rgba(255,203,5,.6),4px 4px 0 var(--shadow);}}
.rar-label-comune{color:#9aa;} .rar-label-raro{color:var(--cyan);} .rar-label-epico{color:#b15cff;}
.rar-label-leggendario{color:var(--gold);} .rar-label-divina{color:#ff2e9a;text-shadow:0 0 8px rgba(255,46,154,.8);}

/* ============================================================
   CORNICE TCG "MOSTRI PAURA" (zoom carta) — design originale
   ============================================================ */
.modal-slot .tcg{
  width:min(86vw,360px);
  background:linear-gradient(160deg,#241338,#3a2566 60%,#1c1030);
  border:5px solid var(--gold);
  border-radius:16px;
  box-shadow:0 0 30px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.4);
  padding:10px;
  position:relative;
  animation:cardPop .35s cubic-bezier(.2,1.3,.4,1);
  font-family:'VT323',monospace;
}
/* barra superiore: nome + rango */
.tcg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15));
  border:2px solid rgba(255,255,255,.18);border-radius:8px;
  padding:7px 10px;margin-bottom:8px;}
.tcg-name{font-family:'Press Start 2P';font-size:10px;color:#fff;line-height:1.4;
  text-shadow:1px 1px 0 #000;flex:1;}
.tcg-rango{font-size:15px;letter-spacing:1px;white-space:nowrap;filter:drop-shadow(0 0 3px rgba(0,0,0,.7));}
/* arte */
.tcg-art{position:relative;border:3px solid rgba(0,0,0,.5);border-radius:8px;overflow:hidden;
  background:#0d061a;line-height:0;}
.tcg-art img{width:100%;display:block;image-rendering:pixelated;}
.tcg-art-ph{display:flex;align-items:center;justify-content:center;font-size:80px;height:240px;}
.tcg-rarlabel{position:absolute;top:6px;left:6px;font-family:'Press Start 2P';font-size:7px;
  padding:3px 6px;background:rgba(0,0,0,.7);border-radius:4px;letter-spacing:1px;}
/* gemme attacco/armatura: sovrapposte agli angoli bassi dell'arte */
.tcg-gems{display:flex;justify-content:space-between;margin-top:-26px;position:relative;z-index:3;padding:0 6px;}
.gem{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;
  font-family:'Press Start 2P';font-size:11px;color:#fff;
  border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 6px rgba(0,0,0,.5);}
.gem-atk{background:linear-gradient(150deg,#ff3b3b,#a30b0b);}
.gem-def{background:linear-gradient(150deg,#3b7bff,#0b3ba3);margin-left:auto;}
.gem-ico{font-size:12px;} .gem-val{text-shadow:1px 1px 0 #000;}
/* fascia bassa: abilità + descrizione */
.tcg-bottom{margin-top:12px;background:rgba(0,0,0,.32);border:2px solid rgba(255,255,255,.14);
  border-radius:8px;padding:9px 11px;}
.tcg-ability{font-size:18px;color:#fff;line-height:1.25;margin-bottom:6px;}
.tcg-ability-tag{font-family:'Press Start 2P';font-size:7px;color:var(--gold);
  background:rgba(255,203,5,.15);padding:2px 5px;border-radius:3px;margin-right:4px;}
.tcg-desc{font-size:17px;color:#d8cfe8;line-height:1.2;}

/* ---- RARITÀ: colore cornice + foil ---- */
.tcg.rar-comune{border-color:#9aa;}
.tcg.rar-comune .tcg-rarlabel{color:#cdd;}
.tcg.rar-raro{border-color:var(--cyan);box-shadow:0 0 24px rgba(22,224,224,.4),inset 0 0 20px rgba(0,0,0,.4);}
.tcg.rar-raro .tcg-rarlabel{color:var(--cyan);}
.tcg.rar-epico{border-color:#b15cff;box-shadow:0 0 26px rgba(177,92,255,.5),inset 0 0 20px rgba(0,0,0,.4);}
.tcg.rar-epico .tcg-rarlabel{color:#d9b3ff;}
.tcg.rar-leggendario{border-color:var(--gold);box-shadow:0 0 30px rgba(255,203,5,.6),inset 0 0 20px rgba(0,0,0,.4);}
.tcg.rar-leggendario .tcg-rarlabel{color:var(--gold);}
.tcg.rar-divina{border-color:#ff2e9a;}
.tcg.rar-divina .tcg-rarlabel{color:#ff8ad0;}

/* FOIL: riflesso animato che attraversa la carta (epico+) */
.tcg.rar-epico .tcg-art::after,
.tcg.rar-leggendario .tcg-art::after,
.tcg.rar-divina .tcg-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 47%,rgba(255,255,255,.12) 53%,transparent 70%);
  background-size:250% 250%;animation:foilShine 3.5s ease-in-out infinite;
}
@keyframes foilShine{
  0%{background-position:140% 0;opacity:0;}
  10%{opacity:1;}
  45%{opacity:1;}
  60%{background-position:-40% 0;opacity:0;}
  100%{background-position:-40% 0;opacity:0;}
}
/* foil iridescente speciale per la Divina */
.tcg.rar-divina{
  background:linear-gradient(160deg,#2a1338,#3a2566 40%,#4a1d52 70%,#1c1030);
  animation:cardPop .35s cubic-bezier(.2,1.3,.4,1), divinaFrame 4s ease-in-out infinite;
}
@keyframes divinaFrame{
  0%,100%{box-shadow:0 0 30px rgba(255,46,154,.55),inset 0 0 20px rgba(0,0,0,.4);border-color:#ff2e9a;}
  50%{box-shadow:0 0 46px rgba(255,46,154,.9),0 0 70px rgba(255,203,5,.4),inset 0 0 20px rgba(0,0,0,.4);border-color:#ffa6d8;}
}
.tcg.rar-divina .tcg-art::after{
  background:linear-gradient(115deg,transparent 25%,rgba(255,120,220,.4) 42%,rgba(120,220,255,.35) 50%,rgba(255,220,120,.4) 58%,transparent 75%);
  background-size:250% 250%;animation:foilShine 2.8s ease-in-out infinite;
}

/* ===== TAB del pannello admin ===== */
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin-bottom:14px;
  scrollbar-width:none;border-bottom:3px solid var(--shadow);}
.admin-tabs::-webkit-scrollbar{display:none;}
.admin-tab{flex:0 0 auto;font-family:'Press Start 2P';font-size:10px;cursor:pointer;
  color:var(--ink);background:var(--bg2);border:3px solid var(--shadow);
  padding:12px 14px;min-height:46px;box-shadow:3px 3px 0 var(--shadow);
  transition:transform .08s, background .12s, color .12s;white-space:nowrap;}
.admin-tab:hover{background:var(--panel);}
.admin-tab:active{transform:translate(1px,1px);}
.admin-tab.active{background:var(--magenta);color:#fff;border-color:var(--magenta);
  box-shadow:3px 3px 0 var(--shadow),0 0 12px rgba(255,46,154,.5);}
.tab-content{animation:pageIn .3s ease-out;}
/* su desktop i tab si distribuiscono larghi */
@media(min-width:760px){
  .admin-tabs{justify-content:center;}
  .admin-tab{flex:1 1 0;text-align:center;}
}

/* ===== DASHBOARD STATISTICHE ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px;}
@media(min-width:560px){ .kpi-grid{grid-template-columns:repeat(3,1fr);} }
.kpi{background:var(--bg2);border:3px solid var(--shadow);box-shadow:3px 3px 0 var(--shadow);
  padding:14px 10px;text-align:center;}
.kpi-val{font-family:'Press Start 2P';font-size:18px;line-height:1.2;margin-bottom:6px;}
.kpi-lab{font-family:'VT323',monospace;font-size:15px;color:#cdbfe8;text-transform:uppercase;letter-spacing:.5px;}
.chart-box{background:var(--bg2);border:3px solid var(--shadow);box-shadow:3px 3px 0 var(--shadow);
  padding:16px;margin-top:14px;max-width:420px;margin-left:auto;margin-right:auto;}