/* ===== Caccia al tesoro - stile condiviso ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{
  --bg:#f4f1fc;
  --bg2:#ece7fa;
  --card:#ffffff;
  --accent:#e8476b;
  --accent2:#7c4dff;
  --gold:#f2a900;
  --green:#1fa971;
  --text:#241b3a;
  --muted:#6b6486;
  --danger:#e23b3b;
  --radius:18px;
  --shadow:0 10px 30px rgba(90,70,150,.15);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg));
  min-height:100dvh;
  overflow-x:hidden;
}
.app{max-width:520px;margin:0 auto;padding:18px;min-height:100dvh;display:flex;flex-direction:column}

/* Card */
.card{
  background:linear-gradient(160deg,#ffffff,#f6f3ff);
  border:1px solid rgba(40,30,80,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
h1,h2,h3{margin:0 0 12px;line-height:1.15}
h1{font-size:26px}
p{line-height:1.5;color:var(--text)}
.muted{color:var(--muted);font-size:14px}
.center{text-align:center}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px 18px;border:none;border-radius:14px;
  font-size:16px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;box-shadow:0 8px 24px rgba(139,92,246,.35);
  transition:transform .08s ease,opacity .2s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:#eceafa;color:#3a3358;box-shadow:none;font-weight:600;border:1px solid rgba(40,30,80,.08)}
.btn.gold{background:linear-gradient(135deg,var(--gold),#ffb347);color:#3a2a00}
.btn.small{width:auto;padding:10px 16px;font-size:14px}
/* Pulsante schermo intero nell'header: ben visibile (accento) */
.fs-btn{font-size:13px;font-weight:700}
/* Box permessi nella schermata iniziale */
.perm-note{text-align:left;background:#f5f3fc;border:1px solid rgba(40,30,80,.12);
  border-radius:14px;padding:14px 16px;margin:18px 0 4px}
.perm-note p{margin:6px 0;font-size:14px;color:var(--text);line-height:1.4}
.perm-note p:first-child{margin-top:0}
/* Indicatori dei mini-step del setup iniziale */
.setup-steps{display:flex;justify-content:center;gap:10px;margin:14px 0 4px}
.setup-steps span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:#eceafa;color:#8b86a8;border:2px solid #ddd8f0}
.setup-steps span.on{background:linear-gradient(135deg,var(--gold),#ffb347);color:#3a2a00;border-color:var(--gold)}
.setup-steps span.ok{background:linear-gradient(135deg,#2fbf71,#38d24a);color:#fff;border-color:#2aa863}

/* Inputs */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input[type=text],input[type=password]{
  width:100%;padding:14px;border-radius:12px;border:1px solid rgba(40,30,80,.15);
  background:#f5f3fc;color:var(--text);font-size:16px;
}
input:focus{outline:none;border-color:var(--accent)}

/* Utility */
.mt{margin-top:16px}.mt-lg{margin-top:26px}
.hidden{display:none!important}
.row{display:flex;gap:10px;align-items:center}
.spacer{flex:1}
.badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700}
.badge.on{background:rgba(61,220,151,.18);color:var(--green)}
.badge.off{background:rgba(255,92,92,.18);color:var(--danger)}
.error{color:var(--danger);font-size:14px;margin-top:10px;min-height:18px}

/* Progress dots */
.steps{display:flex;gap:8px;justify-content:center;margin:6px 0 18px}
.dot{width:34px;height:6px;border-radius:999px;background:#d9d3ee}
.dot.done{background:var(--green)}
.dot.current{background:var(--gold)}

/* Fun header */
.logo{font-size:44px;text-align:center;margin-bottom:6px}
.title-grad{
  background:linear-gradient(90deg,var(--gold),var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Confetti canvas */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9999}

/* Fade in */
.fade{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

.small{font-size:13px}

/* ===== BATTAGLIA stile Game Boy ===== */
.gb-battle{font-family:'Press Start 2P',monospace;border:4px solid #0f1020;border-radius:14px;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5);background:#7aa0b8}
.gb-field{position:relative;height:300px;
  background:linear-gradient(#8fd3ff 0%,#bfe9ff 55%,#c8e6a0 55%,#a6d977 100%)}
.gb-row{position:absolute;display:flex;align-items:center;gap:10px}
.gb-foe-row{top:18px;left:14px}
.gb-hero-row{bottom:14px;right:14px;flex-direction:row}
.gb-hpbox{background:#f8f8e8;border:3px solid #303030;border-radius:8px;padding:7px 9px;min-width:150px;
  box-shadow:2px 2px 0 #303030}
.gb-name{font-size:9px;color:#303030;margin-bottom:6px;white-space:nowrap}
.gb-lv{color:#b03030}
.gb-hp{height:8px;background:#585858;border-radius:4px;overflow:hidden;border:1px solid #303030}
.gb-hp i{display:block;height:100%;width:100%;background:#38d24a;transition:width .5s ease}
.gb-hp i.mid{background:#f5c518}.gb-hp i.low{background:#e83b3b}
.gb-hpnum{font-size:8px;color:#303030;text-align:right;margin-top:4px}
.gb-sprite{font-size:76px;line-height:1;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25))}
.gb-sprite.foe{animation:gbFoe 3s ease-in-out infinite}
.gb-sprite.hero{transform:scaleX(-1);animation:gbHero 3s ease-in-out infinite}
@keyframes gbFoe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gbHero{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-5px)}}
.gb-sprite.hit{animation:gbHit .4s}
@keyframes gbHit{0%,100%{opacity:1}25%{opacity:.2;transform:translateX(-6px)}75%{opacity:.5;transform:translateX(6px)}}
.gb-sprite.faint{animation:gbFaint .8s forwards}
@keyframes gbFaint{to{transform:translateY(60px);opacity:0}}
/* Nina (eroe) spostata leggermente a sinistra, non appiccicata alla barra PS */
.gb-hero-row .gb-sprite.hero{position:relative;left:-18px}
/* Eroe di SPALLE (sprite gen5ani-back): non va ribaltato */
.gb-sprite.hero.back{transform:none;animation:gbHeroBack 3s ease-in-out infinite}
@keyframes gbHeroBack{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.gb-sprite.hero.back.atk-hero{animation:atkHeroBack .46s ease-in-out}
@keyframes atkHeroBack{0%,100%{transform:translate(0,0)}45%{transform:translate(-30px,-30px)}}
/* Affondo in attacco (verso il bersaglio) */
.gb-sprite.atk-hero{animation:atkHero .46s ease-in-out}
@keyframes atkHero{0%,100%{transform:scaleX(-1) translate(0,0)}45%{transform:scaleX(-1) translate(30px,-30px)}}
.gb-sprite.atk-foe{animation:atkFoe .46s ease-in-out}
@keyframes atkFoe{0%,100%{transform:translate(0,0)}45%{transform:translate(-30px,30px)}}
/* Effetto cura su Nina */
.gb-sprite.heal-fx{animation:healFx .8s ease-in-out}
@keyframes healFx{0%,100%{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25))}50%{filter:drop-shadow(0 0 16px #4cff88) drop-shadow(0 0 6px #4cff88)}}
/* Numeri fluttuanti di danno / cura / mancato */
.gb-dmg{position:absolute;transform:translate(-50%,0);font-family:'Press Start 2P',monospace;font-size:15px;
  color:#e11d2b;text-shadow:2px 2px 0 #fff,-1px -1px 0 #fff;pointer-events:none;z-index:5;white-space:nowrap;
  animation:dmgFloat .95s ease-out forwards}
.gb-dmg.crit{font-size:20px;color:#ff1f1f}
.gb-dmg.heal{color:#1fa84c}
.gb-dmg.miss{font-size:11px;color:#666;text-shadow:1px 1px 0 #fff}
@keyframes dmgFloat{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
/* Flash sui colpi critici */
.gb-crit-flash{position:absolute;inset:0;background:#fff;opacity:.75;z-index:4;pointer-events:none;
  animation:critFl .28s ease-out forwards}
@keyframes critFl{to{opacity:0}}
.gb-textbox{background:#f8f8e8;border-top:4px solid #0f1020;padding:14px;min-height:120px}
.gb-text{font-size:11px;line-height:1.7;color:#202020;min-height:44px}
.gb-menu{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gb-btn{font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.4;padding:12px 8px;
  background:#fff;color:#202020;border:3px solid #303030;border-radius:6px;cursor:pointer;
  box-shadow:2px 2px 0 #303030;transition:transform .05s}
.gb-btn:active{transform:translate(2px,2px);box-shadow:none}
.gb-btn.wide{grid-column:1 / -1}

/* ===== CATTURA / fotocamera + Poké Ball ===== */
.ar-layer{position:fixed;inset:0;z-index:5000;background:#000;overflow:hidden}
.ar-layer video{width:100%;height:100%;object-fit:cover}
.ar-fallback{width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#3a5a2a,#16240f)}
.ar-hud{position:absolute;top:16px;left:0;right:0;text-align:center;color:#fff;
  font-weight:700;text-shadow:0 2px 8px #000;padding:0 20px;z-index:3}
.ar-reticle{position:absolute;top:50%;left:50%;width:180px;height:180px;transform:translate(-50%,-50%);
  border:3px dashed rgba(255,255,255,.6);border-radius:16px;pointer-events:none}
.ar-object{position:absolute;font-size:80px;transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));z-index:2;transition:left .06s linear,top .06s linear}
.ar-object.captured{animation:capIn .35s forwards}
@keyframes capIn{to{transform:translate(-50%,-50%) scale(.1);opacity:0}}
.pokeball{position:absolute;left:50%;bottom:90px;font-size:44px;transform:translate(-50%,0);opacity:0;z-index:4}
.pokeball.throw{opacity:1;animation:throwBall .75s ease-out forwards}
@keyframes throwBall{
  0%{left:50%;bottom:90px;transform:translate(-50%,0) rotate(0)}
  100%{left:var(--tx);top:var(--ty);bottom:auto;transform:translate(-50%,-50%) rotate(720deg)}}
.pokeball.at-target{opacity:1;transform:translate(-50%,-50%)}
.pokeball.wobble{animation:wob .6s ease-in-out}
@keyframes wob{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-22deg)}75%{transform:translate(-50%,-50%) rotate(22deg)}}
.pokeball.caught{animation:pop .4s}
.ar-throw{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:auto;z-index:5}
.star{position:fixed;font-size:22px;z-index:6;animation:starFly 1s ease-out forwards;pointer-events:none}
@keyframes starFly{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.ar-skip{position:absolute;bottom:24px;right:20px;padding:10px 16px;border:none;border-radius:12px;
  background:rgba(255,255,255,.2);color:#fff;font-weight:700;backdrop-filter:blur(6px);z-index:5}

/* ===== Personaggi SVG ===== */
.char{width:100%;height:100%;display:block;overflow:visible}
.c-idle{animation:cIdle 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes cIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* --- Parti animate di Nina (e riutilizzabili) --- */
.n-breathe{animation:nBreathe 3.4s ease-in-out infinite;transform-origin:50% 82%}
@keyframes nBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.985)}}
.n-tail{animation:nTail .55s ease-in-out infinite;transform-origin:86% 72%}
@keyframes nTail{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(14deg)}}
.n-earL{animation:nEarL 3.6s ease-in-out infinite;transform-origin:38% 34%}
@keyframes nEarL{0%,92%,100%{transform:rotate(0)}96%{transform:rotate(-5deg)}}
.n-earR{animation:nEarR 3.6s ease-in-out infinite;transform-origin:62% 34%}
@keyframes nEarR{0%,88%,100%{transform:rotate(0)}94%{transform:rotate(5deg)}}
.n-blink{animation:nBlink 4.2s ease-in-out infinite;transform-origin:center}
@keyframes nBlink{0%,7%,100%{transform:scaleY(1)}3.5%{transform:scaleY(.12)}}
.n-tongue{animation:nTongue 1.1s ease-in-out infinite;transform-origin:50% 0%}
@keyframes nTongue{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(1px) scaleY(1.06)}}
.whisk{animation:whisk 2.6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes whisk{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.03)}}
.cross{animation:crossB 4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes crossB{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* ===== Cutscene ===== */
.cs-stage{position:fixed;inset:0;z-index:6000;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;transition:opacity .35s}
.cs-stage.cs-out{opacity:0}
.cs-skip{position:absolute;top:16px;right:16px;z-index:5;background:rgba(0,0,0,.4);color:#fff;border:none;
  padding:8px 14px;border-radius:10px;font-weight:700;backdrop-filter:blur(4px)}
.cs-actors{position:absolute;inset:0;pointer-events:none}
.cs-actor{position:absolute;bottom:150px;width:44%;max-width:260px;height:60%;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .4s;opacity:0}
.cs-actor.left{left:2%;transform:translateX(-120%)}
.cs-actor.right{right:2%;transform:translateX(120%) scaleX(-1)}
.cs-actor.left.in{opacity:1;transform:translateX(0)}
.cs-actor.right.in{opacity:1;transform:translateX(0) scaleX(-1)}
.cs-actor.dim{filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)) brightness(.6)}
.cs-actor.speak{animation:csSpeak 1.2s ease-in-out infinite}
@keyframes csSpeak{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cs-actor.right.speak{animation:csSpeakR 1.2s ease-in-out infinite}
@keyframes csSpeakR{0%,100%{transform:translateY(0) scaleX(-1)}50%{transform:translateY(-8px) scaleX(-1)}}
.cs-box{position:relative;z-index:4;margin:18px;padding:16px 18px 22px;background:#f8f8ef;
  border:4px solid #20233a;border-radius:14px;box-shadow:0 -6px 0 rgba(0,0,0,.15),0 10px 30px rgba(0,0,0,.5);
  min-height:96px;cursor:pointer}
.cs-name{display:inline-block;font-family:'Press Start 2P',monospace;font-size:11px;color:#fff;
  background:#e8476b;padding:6px 10px;border-radius:8px;margin:-30px 0 10px;box-shadow:2px 2px 0 #20233a}
.cs-text{font-family:'Press Start 2P',monospace;font-size:11px;line-height:1.9;color:#20233a;min-height:40px}
/* Richiesta condivisione schermo dalla regia (overlay sul telefono di Pia) */
.share-prompt{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(10,8,20,.72);backdrop-filter:blur(4px)}
.share-prompt .sp-card{background:#fff;border-radius:18px;padding:24px;max-width:340px;text-align:center;
  box-shadow:0 16px 44px rgba(0,0,0,.5)}
.share-prompt .sp-emoji{font-size:52px;line-height:1;margin-bottom:8px}
.share-prompt p{margin:6px 0 16px;color:#2a2d40}

/* Tasto "Avanti" in cima alla pagina (non copre i testi in basso) */
.cs-topbar{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:7;pointer-events:none}
.cs-next{pointer-events:auto;font-family:'Press Start 2P',monospace;font-size:12px;color:#fff;
  background:#e8476b;border:3px solid #20233a;border-radius:12px;padding:12px 22px;cursor:pointer;
  box-shadow:2px 2px 0 #20233a;transition:transform .05s}
.cs-next:active{transform:translate(2px,2px);box-shadow:none}
/* Pulsante schermo intero nella cutscene: colore diverso da "Avanti" */
.cs-fs{background:#3a7bd5;font-size:10px;padding:12px 14px}
.cs-next.ready{animation:csNextPulse 1s ease-in-out infinite}
@keyframes csNextPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.cs-vs{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(0,0,0,.6))}
.cs-vs span{font-family:'Press Start 2P',monospace;font-size:72px;color:#ffd23f;
  text-shadow:5px 5px 0 #e11d2b,-2px -2px 0 #20233a;animation:vsPop .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes vsPop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1)}}

/* ===== Navigazione GPS ===== */
.nav-card{text-align:center}
.distance{font-size:52px;font-weight:800;margin:6px 0}
.compass{font-size:70px;transition:transform .3s ease;display:inline-block}
.clue{background:rgba(242,169,0,.14);border:1px solid rgba(242,169,0,.4);
  border-radius:14px;padding:16px;margin:14px 0;color:#7a5c00;font-weight:600}
#map{width:100%;height:280px;border-radius:14px;overflow:hidden;margin-top:12px}

/* ===== Introduzione / cutscene ===== */
.cutscene{position:fixed;inset:0;z-index:4000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:26px;text-align:center;
  transition:background .8s ease}
.cut-art{font-size:120px;line-height:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));
  animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}
.cut-text{max-width:420px;font-size:20px;line-height:1.5;margin:28px 0;min-height:120px;font-weight:600}
.cut-caret{border-right:3px solid var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{border-color:transparent}}
.cut-controls{position:absolute;bottom:34px;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:0 26px}
.cut-skip{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.15);
  border:none;color:#fff;padding:8px 14px;border-radius:10px;font-weight:600}
.cut-progress{display:flex;gap:6px}
.cut-progress i{width:24px;height:5px;border-radius:999px;background:rgba(255,255,255,.25)}
.cut-progress i.on{background:var(--gold)}
.cutscene video{max-width:100%;max-height:80dvh;border-radius:16px}

/* ===== Sprite SVG in battaglia ===== */
.gb-sprite.svg{width:100px;height:100px;font-size:0;display:flex;align-items:flex-end;justify-content:center}
.gb-sprite.svg .char{width:100%;height:100%}
/* ===== Sprite IMMAGINE (GIF/PNG dal registro window.SPRITES) ===== */
.art-img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.gb-sprite.img{width:118px;height:118px;font-size:0;display:flex;align-items:flex-end;justify-content:center}
.gb-sprite.img .art-img{animation:sprBreathe 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sprBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
/* immagini attore nelle cutscene */
.cs-actor .art-img.art-actor{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
/* attore rimpicciolito (es. Nina cagnolina): appoggiato a terra e portato più
   verso il centro/alto, così non resta schiacciato nell'angolo accanto agli umani */
.cs-actor.cs-small .art-img.art-actor{object-position:bottom center}
.cs-actor.cs-small{bottom:196px}
.cs-actor.right.cs-small{right:17%}
.cs-actor.left.cs-small{left:17%}

/* ===== Personaggio grande (title / finale) ===== */
.char-hero{width:150px;height:186px;margin:0 auto 8px}
.char-hero .char{width:100%;height:100%}

/* ===== Foto a Nina ===== */
.foto-nina{position:absolute;width:120px;height:150px;transform:translate(-50%,-50%);z-index:2;
  transition:left .06s linear,top .06s linear;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.foto-nina .char{width:100%;height:100%}
.foto-nina.posed{animation:pop .45s}
.ar-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none}
.ar-flash.go{animation:flashCam .4s}
@keyframes flashCam{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ===== Barra avanzamento (giocatore) ===== */
.pbar{height:8px;background:#e4dff3;border-radius:999px;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .5s ease}
.pbar-label{text-align:center;font-size:12px;margin-top:6px}

/* ===== Mini-gioco memoria (Simon) ===== */
.simon{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:260px;margin:16px auto}
.pad{aspect-ratio:1;border:none;border-radius:16px;font-size:34px;cursor:pointer;opacity:.5;
  transition:opacity .1s,transform .1s;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.pad.on{opacity:1;transform:scale(1.06)}
.pad:active{transform:scale(.97)}

/* ===== Scrigno del tesoro (apertura + anello) ===== */
.chest-scene{width:200px;height:200px;margin:0 auto 6px}
.chest{width:100%;height:100%;overflow:visible}
.chest-lid{transform-origin:100px 118px;transition:transform .9s cubic-bezier(.2,.9,.3,1.3)}
.chest-open .chest-lid{transform:translateY(-48px) rotate(-14deg)}
.chest-ring{opacity:0;transform:translateY(6px);transition:opacity 1s ease .5s,transform 1.1s cubic-bezier(.2,.9,.3,1.2) .5s}
.chest-open .chest-ring{opacity:1;transform:translateY(-56px)}
.chest-glow{opacity:0;transition:opacity .8s .4s}
.chest-open .chest-glow{opacity:1;animation:chGlow 2s ease-in-out infinite .9s}
@keyframes chGlow{0%,100%{opacity:.6}50%{opacity:1}}
.chest-twinkle{opacity:0}
.chest-open .chest-twinkle{animation:chTwinkle 1.2s ease-in-out infinite 1.1s}
@keyframes chTwinkle{0%,100%{opacity:.2}50%{opacity:1}}

/* ===== Admin ===== */
#adminmap{width:100%;height:min(48vh,360px);border-radius:14px;overflow:hidden}

/* ===== Admin: tema CHIARO per massima leggibilità ===== */
body.admin-mode{background:#eaedf4;color:#1d2030}
.admin-mode .card{background:#fff;border:1px solid #e2e5ef;color:#1d2030;box-shadow:0 4px 18px rgba(30,34,60,.08)}
.admin-mode h1,.admin-mode h2,.admin-mode h3{color:#1d2030}
.admin-mode .muted{color:#697086}
.admin-mode .stat{border-bottom-color:#edeff5}
.admin-mode .stat span{color:#697086}
.admin-mode .stat b{color:#6d28d9}
.admin-mode .btn.secondary{background:#eef0f7;color:#2a2d3a;box-shadow:none;border:1px solid #e2e5ef}
.admin-mode .badge.on{background:rgba(22,163,74,.14);color:#15803d}
.admin-mode .badge.off{background:rgba(220,38,38,.12);color:#b91c1c}
.admin-mode .pbar{background:#e6e8f2}
.admin-mode .tl-row{border-bottom-color:#eef0f6}
.admin-mode .tappa{background:#f6f7fb;border-color:#e2e5ef}
.admin-mode .tappa .t-stato{background:#e9ebf3}
.admin-mode #ev-count,.admin-mode #screen-ts{color:#8b90a3}
.admin-mode .phone-empty{color:#c7cbe0}

/* Layout admin — a schermo intero, tre colonne */
.app.admin{max-width:100%;padding:16px 20px}
.admin-3col{display:grid;gap:16px;grid-template-columns:1fr}
.admin-3col .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.admin-3col .card{min-width:0}
@media(min-width:1040px){
  .admin-3col{grid-template-columns:500px 1.4fr 1fr;align-items:start}
  .admin-3col .timeline{max-height:52vh}
}
/* Schermo di Pia dentro la cornice del cellulare (verticale, luminoso) */
.phone-frame{position:relative;width:100%;max-width:450px;aspect-ratio:9/19;margin:8px auto 0;
  background:#0f0a1e;border:7px solid #20233a;border-radius:28px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.phone-frame::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:56px;height:5px;border-radius:3px;background:#3a3d55;z-index:3}
.phone-frame img{width:100%;height:100%;object-fit:cover;display:none}
.phone-frame img.on{display:block}
.phone-frame video{width:100%;height:100%;object-fit:cover;display:none;background:#0f0a1e}
.phone-frame video.on{display:block}
.phone-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;color:var(--muted);font-size:13px}
/* Maschera privacy: copre TUTTO (semantica/screenshot/video) mentre la camera è aperta */
.privacy-mask{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:20px;color:#fff;font-weight:700;
  background:linear-gradient(160deg,#2a2140,#161022)}
.privacy-mask .pm-emoji{font-size:48px}
.privacy-mask .muted{color:#c7cbe0}

/* Switch modalità regia (semantica / video) */
.seg{display:flex;gap:0;margin:10px auto 0;max-width:450px;border:1px solid #d5d8e6;border-radius:12px;overflow:hidden}
.seg button{flex:1;padding:9px 5px;border:none;background:#f2f3f9;color:#5a5f73;font-weight:700;
  font-size:12px;white-space:nowrap;cursor:pointer;transition:background .15s}
.seg button+button{border-left:1px solid #d5d8e6}
.seg button.on{background:linear-gradient(90deg,var(--gold),var(--accent));color:#fff}
/* pulsante audio attivo */
#audio-toggle.on{background:linear-gradient(90deg,var(--gold),var(--accent));color:#fff;border-color:var(--gold)}
/* connessione/stato attivo: pulsante verde */
.conn-on{background:linear-gradient(135deg,#2fbf71,#38d24a)!important;color:#fff!important;border-color:#2aa863!important;box-shadow:0 0 0 2px rgba(56,210,74,.18)!important}
/* schermo intero della cornice del cellulare */
#phone-frame:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;border:none;aspect-ratio:auto;background:#0f0a1e}
#phone-frame:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border-radius:0;border:none;aspect-ratio:auto}
#phone-frame:fullscreen .live-panel{justify-content:flex-start;padding-top:40px}

/* Plancia LIVE semantica dentro la cornice */
.live-panel{position:absolute;inset:0;overflow:auto;background:linear-gradient(160deg,#f6f7fc,#eef0f8);
  color:#20233a;padding:16px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.lv-tag{font-weight:800;color:#5a5f73;font-size:13px;letter-spacing:.3px}
.lv-hprow{margin:2px 0}
.lv-hpname{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:#20233a;margin-bottom:5px}
.lv-hp{height:12px;background:#e3e5ef;border-radius:7px;overflow:hidden;border:1px solid #cfd3e2}
.lv-hp i{display:block;height:100%;width:100%;transition:width .35s ease,background .35s}
.lv-msg{margin-top:6px;background:#fff;border:1px solid #e2e5ef;border-radius:10px;padding:10px 12px;
  font-size:14px;color:#2a2d40;min-height:20px}
.lv-speaker{display:inline-block;background:#e8476b;color:#fff;font-weight:800;font-size:13px;
  padding:5px 10px;border-radius:8px;align-self:flex-start}
.lv-line{background:#fff;border:1px solid #e2e5ef;border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.5;color:#20233a}
.lv-dist{font-size:34px;font-weight:800;color:var(--accent)}
.lv-battle,.lv-scene,.lv-nav,.lv-generic{display:flex;flex-direction:column;gap:8px}

/* Miniatura "sbirciata" (screenshot) sotto la cornice */
.mini-shot{display:none;margin:10px auto 0;text-align:center}
.mini-shot.on{display:block}
.mini-shot img{width:130px;max-width:40%;border-radius:10px;border:2px solid #d5d8e6;display:inline-block;vertical-align:middle}
.mini-cap{display:block;color:#9095a8;font-size:11px;margin-top:3px}
.stat{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.stat b{color:var(--gold)}

/* Checklist tappe (admin) */
.tappa{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.tappa.current{border-color:var(--gold);background:rgba(255,209,102,.1)}
.tappa.done{opacity:.7}
.tappa .t-ico{font-size:26px}
.tappa .t-body{flex:1}
.tappa .t-stato{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1)}
.tappa.current .t-stato{background:var(--gold);color:#3a2a00}
.tappa.done .t-stato{background:rgba(61,220,151,.2);color:var(--green)}

/* Timeline eventi (admin) */
.timeline{max-height:340px;overflow-y:auto;margin-top:10px}
.tl-row{display:flex;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.tl-ico{font-size:20px;flex-shrink:0}
.tl-body{flex:1;font-size:14px}