/* ============================================================
   MAGO MAGIA — tema condiviso «Notte Magica» per i giochi
   di bio.ilmagomax.com. Nessuna dipendenza esterna.
   Caricato da tutti i giochi + hub. v1 (21/09/2026)
   ============================================================ */
:root{
  --mg-n0:#05021a; --mg-n1:#0d0733; --mg-n2:#1a0f5c; --mg-n3:#2a1a86;
  --mg-violet:#8b5cf6; --mg-violet-2:#a78bfa;
  --mg-magenta:#f0459b; --mg-cyan:#2ad4f5; --mg-gold:#ffc61a; --mg-gold-2:#ffe066;
  --mg-lime:#8ef06a; --mg-red:#ff4d6d;
  --mg-ink:#ffffff; --mg-ink-2:#ffffff; --mg-ink-3:#ffd98a;
  --mg-glow-gold:0 0 18px rgba(255,198,26,.55);
  --mg-glow-violet:0 0 22px rgba(139,92,246,.55);
}

/* ---------- sfondo notte magica (aurora + nebulose) ---------- */
.mg-night{
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(139,92,246,.42) 0%, transparent 58%),
    radial-gradient(110% 75% at 88% 6%, rgba(42,212,245,.24) 0%, transparent 55%),
    radial-gradient(130% 90% at 50% 108%, rgba(240,69,155,.30) 0%, transparent 60%),
    linear-gradient(175deg,#0d0733 0%,#170c4a 42%,#05021a 100%) !important;
  background-attachment:fixed;
}
.mg-aurora{
  position:fixed; inset:-20% -20% auto -20%; height:70%; z-index:0; pointer-events:none;
  background:
    radial-gradient(45% 40% at 25% 40%, rgba(42,212,245,.20), transparent 70%),
    radial-gradient(50% 45% at 72% 30%, rgba(240,69,155,.18), transparent 72%),
    radial-gradient(40% 38% at 50% 62%, rgba(255,198,26,.14), transparent 70%);
  filter:blur(24px); animation:mgAurora 18s ease-in-out infinite alternate;
}
@keyframes mgAurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(-2deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.15) rotate(2deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.08) rotate(-1deg)}
}

/* ---------- cornice arcana animata per le card ---------- */
@property --mg-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.mg-frame{ position:relative; }
.mg-frame::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--mg-ang),var(--mg-gold),var(--mg-magenta),var(--mg-cyan),var(--mg-violet),var(--mg-gold));
  filter:blur(9px); opacity:.45; animation:mgGira 7s linear infinite;
}
/* si anima l'angolo del gradiente, NON il riquadro: ruotarlo faceva spuntare
   un rombo colorato fuori dalla card (browser senza @property: cornice fissa) */
@keyframes mgGira{to{--mg-ang:360deg}}

/* ---------- card di vetro scuro ---------- */
.mg-card{
  background:linear-gradient(180deg,#1b1060 0%,#0a052a 100%);
  border:1px solid rgba(255,198,26,.42);
  border-radius:26px; color:var(--mg-ink);
  box-shadow:0 26px 70px rgba(2,0,20,.75), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- bottoni ---------- */
.mg-btn{
  position:relative; overflow:hidden; display:block; width:100%; border:none; cursor:pointer;
  font-family:inherit; font-weight:900; border-radius:18px; padding:16px 20px; font-size:19px;
  color:#2a1500; text-decoration:none; text-align:center;
  background:linear-gradient(135deg,var(--mg-gold-2) 0%,var(--mg-gold) 55%,#e09b00 100%);
  box-shadow:0 10px 26px rgba(255,198,26,.38), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mg-btn::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg); animation:mgShine 3.4s ease-in-out infinite;
}
@keyframes mgShine{0%,70%{left:-60%}100%{left:130%}}
.mg-btn:active{transform:scale(.96)}
.mg-btn.mg-violet{
  background:linear-gradient(135deg,var(--mg-violet-2),var(--mg-violet) 60%,#6d28d9);
  color:#fff; box-shadow:0 10px 26px rgba(139,92,246,.42), inset 0 -3px 0 rgba(0,0,0,.2);
}
.mg-btn.mg-wa{
  background:linear-gradient(135deg,#3ee07d,#1faa57 70%,#128c45);
  color:#04240f; box-shadow:0 10px 26px rgba(31,170,87,.4), inset 0 -3px 0 rgba(0,0,0,.18);
}
.mg-btn.mg-ghost{
  background:linear-gradient(180deg,rgba(139,92,246,.34),rgba(139,92,246,.18)); color:#fff;
  border:1px solid rgba(167,139,250,.75);
  box-shadow:none; font-size:16px; padding:13px 16px; font-weight:800;
}
.mg-btn.mg-ghost::after{display:none}

/* ---------- pill/badge HUD ---------- */
.mg-pill{
  background:rgba(13,7,51,.78); border:1px solid rgba(167,139,250,.38); color:var(--mg-ink);
  font-weight:900; border-radius:999px; padding:7px 14px; backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(2,0,20,.45);
}

/* ============================================================
   SISTEMA PREMI — gettoni, forziere, carta premio
   ============================================================ */
.mg-strip{
  margin:14px 0 4px; padding:13px 14px; border-radius:18px; text-align:center;
  background:linear-gradient(180deg,rgba(139,92,246,.20),rgba(240,69,155,.14));
  border:1px solid rgba(167,139,250,.40);
}
.mg-strip .mg-strip-t{font-size:14.5px;font-weight:900;color:var(--mg-gold-2);letter-spacing:.2px}
.mg-strip .mg-strip-s{font-size:13.2px;color:var(--mg-ink-2);margin-top:5px;line-height:1.5}
.mg-tokens{display:flex;gap:8px;justify-content:center;margin:10px 0 2px}
.mg-token{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;background:rgba(139,92,246,.22);border:2px dashed rgba(167,139,250,.85);
  color:#cbb6ff;
}
.mg-token.on{
  background:radial-gradient(circle at 35% 30%,var(--mg-gold-2),var(--mg-gold) 60%,#c97f00);
  border:2px solid #fff3c4; color:#3a2200; box-shadow:var(--mg-glow-gold);
  animation:mgTokenPop .5s cubic-bezier(.2,.9,.3,1.6);
}
@keyframes mgTokenPop{0%{transform:scale(0) rotate(-120deg)}100%{transform:scale(1) rotate(0)}}
.mg-strip .mg-btn{margin-top:11px;font-size:17px;padding:14px 18px}
.mg-pulse{animation:mgPulse 1.5s ease-in-out infinite}
@keyframes mgPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* overlay forziere / carta */
.mg-over{
  position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  padding:18px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:radial-gradient(circle at 50% 40%,rgba(42,26,134,.86),rgba(3,1,16,.96));
  backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .32s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mg-over.show{opacity:1;pointer-events:auto}
.mg-over .mg-box{
  width:100%;max-width:392px;border-radius:28px;padding:26px 22px;text-align:center;
  transform:translateY(16px) scale(.96);transition:transform .4s cubic-bezier(.2,.9,.3,1.35);
  margin:auto;
}
.mg-over.show .mg-box{transform:none}
.mg-x{
  position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(167,139,250,.7);background:#1b1060;
  color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2
}
.mg-h{font-size:25px;font-weight:900;color:var(--mg-gold-2);line-height:1.2;text-shadow:0 0 22px rgba(255,198,26,.5)}
.mg-p{font-size:15px;color:var(--mg-ink-2);line-height:1.6;margin-top:9px}

/* forziere */
.mg-chest{
  font-size:88px;line-height:1;display:inline-block;cursor:pointer;margin:6px 0 2px;
  filter:drop-shadow(0 0 26px rgba(255,198,26,.6));animation:mgChest 1.4s ease-in-out infinite;
}
@keyframes mgChest{0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}50%{transform:translateY(-9px) rotate(3deg) scale(1.06)}}
.mg-chest.opening{animation:mgChestShake .5s linear}
@keyframes mgChestShake{0%,100%{transform:translate(0) rotate(0)}20%{transform:translate(-7px,2px) rotate(-7deg)}40%{transform:translate(7px,-2px) rotate(7deg)}60%{transform:translate(-5px,3px) rotate(-5deg)}80%{transform:translate(5px,-3px) rotate(5deg)}}

/* carta premio */
.mg-carta{
  position:relative;border-radius:22px;padding:20px 18px 18px;margin:4px 0 14px;overflow:hidden;
  background:linear-gradient(160deg,#241571 0%,#3f1780 42%,#661659 100%);
  border:2px solid rgba(255,214,102,.8);
  box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 0 40px rgba(255,198,26,.14);
  animation:mgFlip .7s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes mgFlip{0%{transform:rotateY(85deg) scale(.85);opacity:0}100%{transform:none;opacity:1}}
.mg-carta::after{
  content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.22),transparent 34%),
    radial-gradient(circle at 84% 88%,rgba(42,212,245,.20),transparent 40%);
  pointer-events:none;
}
.mg-carta .mg-kick{font-size:11.5px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#ffe9a8}
.mg-carta .mg-emoji{font-size:62px;line-height:1;margin:6px 0 2px;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.mg-carta .mg-nome{font-size:23px;font-weight:900;color:#fff;line-height:1.2;margin:2px 0 6px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.mg-carta .mg-desc{font-size:14.5px;color:#f3ecff;line-height:1.55}
.mg-codice{
  margin-top:13px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.34);
  border:1px dashed rgba(255,214,102,.75);
}
.mg-codice .l{font-size:10.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--mg-gold-2)}
.mg-codice .v{font-size:25px;font-weight:900;color:#fff;letter-spacing:2.5px;font-variant-numeric:tabular-nums}
.mg-nota{font-size:12.8px;color:var(--mg-ink-2);line-height:1.6;text-align:left;margin:4px 0 14px}
.mg-nota b{color:var(--mg-gold-2)}
.mg-regole{list-style:none;padding:0;margin:0}
.mg-regole li{position:relative;padding-left:15px;margin-bottom:3px}
.mg-regole li::before{content:"•";position:absolute;left:3px;color:var(--mg-gold)}

/* pill promemoria premio nelle schermate iniziali */
.mg-teaser{
  display:flex;align-items:center;gap:9px;text-align:left;margin:12px 0 2px;padding:11px 13px;
  border-radius:16px;background:linear-gradient(120deg,rgba(255,198,26,.16),rgba(240,69,155,.14));
  border:1px solid rgba(255,198,26,.42);cursor:pointer;
}
.mg-teaser .e{font-size:26px;line-height:1;flex-shrink:0;animation:mgWob 2.2s ease-in-out infinite}
@keyframes mgWob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.mg-teaser .t{font-size:13.6px;font-weight:800;color:var(--mg-gold-2);line-height:1.35}
.mg-teaser .t span{display:block;font-weight:600;color:var(--mg-ink-2);font-size:12.6px;margin-top:3px}

@media (prefers-reduced-motion:reduce){
  .mg-aurora,.mg-frame::before,.mg-btn::after,.mg-chest,.mg-pulse,.mg-teaser .e{animation:none}
  .mg-carta,.mg-token.on{animation:none}
}

/* ============================================================
   PELLE CONDIVISA (body.mg-skin) — riveste le schermate che i
   giochi avevano gia': .card/.panel/.screen, .btn, .badge, ecc.
   Si attiva solo con la classe mg-skin sul body.
   ============================================================ */
/* I giochi disegnano tutto con gli stessi token (--card, --ink/--testo, --blu…):
   ridefinirli qui riveste ogni schermata in una volta sola, invece di inseguire
   selettore per selettore. Testi sempre chiari su fondo scuro. */
body.mg-skin{
  --card:#1b1060; --ink:#ffffff; --testo:#ffffff; --bg:#0a0430;
  --blu:#c4b5fd; --blu-dark:#ffd666; --blu-scuro:#ffd666;
  --viola:#c4b5fd; --giallo:#ffc61a; --verde:#22c55e; --rosso:#ff4d6d;
  color:var(--mg-ink);
}
/* etichette smorzate dall'opacita': sul fondo scuro devono restare leggibili */
body.mg-skin #creature .lbl,body.mg-skin small,body.mg-skin .hint,
body.mg-skin .sotto,body.mg-skin .brandline,body.mg-skin .lbl{opacity:1 !important}
body.mg-skin .spell small,body.mg-skin .ing small{color:#fff !important;font-weight:800 !important}
body.mg-skin #pIll,body.mg-skin #bubble span{color:#e9e0ff !important}
body.mg-skin .legend span{
  background:linear-gradient(180deg,rgba(139,92,246,.30),rgba(91,33,182,.22)) !important;
  border:1px solid rgba(167,139,250,.55) !important;
}
body.mg-skin .overlay{
  background:radial-gradient(circle at 50% 32%,rgba(42,26,134,.80),rgba(3,1,16,.94)) !important;
  backdrop-filter:blur(9px);
}
body.mg-skin .card,
body.mg-skin .panel,
body.mg-skin .screen{
  background:linear-gradient(180deg,rgba(28,17,98,.94) 0%,rgba(10,5,42,.96) 100%) !important;
  border:1px solid rgba(255,198,26,.34) !important;
  color:var(--mg-ink) !important;
  box-shadow:0 26px 70px rgba(2,0,20,.72), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.mg-skin .card h1,body.mg-skin .card h2,body.mg-skin .card h3,
body.mg-skin .panel h1,body.mg-skin .panel h2,body.mg-skin .panel h3,
body.mg-skin .screen h1,body.mg-skin .screen h2,body.mg-skin .screen h3,
body.mg-skin .big{
  color:var(--mg-gold-2) !important;
  text-shadow:0 0 22px rgba(255,198,26,.45);
}
body.mg-skin .card p,body.mg-skin .panel p,body.mg-skin .screen p,
body.mg-skin .card .sub,body.mg-skin .sotto,body.mg-skin .hint,body.mg-skin .legend{color:var(--mg-ink-2) !important}
body.mg-skin .rules span,body.mg-skin .colonnina,body.mg-skin .scorebox>div,
body.mg-skin .scoreBox,body.mg-skin .record,body.mg-skin .pill{
  background:linear-gradient(180deg,rgba(139,92,246,.26),rgba(91,33,182,.20)) !important;
  border:1px solid rgba(167,139,250,.55) !important;
  color:#fff !important;
}
body.mg-skin .lbl{color:var(--mg-gold-2) !important;font-weight:800 !important}
body.mg-skin .val,body.mg-skin .scoreBig,body.mg-skin .colonnina b{color:var(--mg-gold-2) !important}
body.mg-skin .val.best{color:var(--mg-cyan) !important}
/* bottoni */
body.mg-skin .btn,body.mg-skin .bottone-grande,body.mg-skin .gbtn{
  position:relative; overflow:hidden; border:none !important;
  background:linear-gradient(135deg,var(--mg-gold-2) 0%,var(--mg-gold) 55%,#e09b00 100%) !important;
  color:#2a1500 !important; font-weight:900 !important;
  box-shadow:0 10px 26px rgba(255,198,26,.38), inset 0 -3px 0 rgba(0,0,0,.18) !important;
}
body.mg-skin .btn::after,body.mg-skin .bottone-grande::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg); animation:mgShine 3.4s ease-in-out infinite;
}
body.mg-skin .btn.blue,body.mg-skin .btn.viola,body.mg-skin .viola{
  background:linear-gradient(135deg,var(--mg-violet-2),var(--mg-violet) 60%,#6d28d9) !important;
  color:#fff !important; box-shadow:0 10px 26px rgba(139,92,246,.42), inset 0 -3px 0 rgba(0,0,0,.2) !important;
}
body.mg-skin .btn.wa,body.mg-skin .wa{
  background:linear-gradient(135deg,#3ee07d,#1faa57 70%,#128c45) !important;
  color:#04240f !important; box-shadow:0 10px 26px rgba(31,170,87,.4), inset 0 -3px 0 rgba(0,0,0,.18) !important;
}
body.mg-skin .btn.ghost,body.mg-skin .link-sec{
  background:linear-gradient(180deg,rgba(139,92,246,.34),rgba(139,92,246,.18)) !important;
  color:#fff !important; font-weight:800 !important;
  border:1px solid rgba(167,139,250,.75) !important; box-shadow:none !important;
}
body.mg-skin .btn.ghost::after{display:none}
/* HUD e chrome */
body.mg-skin .badge,body.mg-skin #soundBtn,body.mg-skin #homeBtn,
body.mg-skin #btnAudio,body.mg-skin #btnCasa,body.mg-skin .btn-icona{
  background:rgba(13,7,51,.78) !important; border:1px solid rgba(167,139,250,.38) !important;
  color:var(--mg-ink) !important; box-shadow:0 6px 18px rgba(2,0,20,.45) !important;
}
body.mg-skin .brandline{color:var(--mg-ink-3) !important}
body.mg-skin .brandline a{color:var(--mg-gold-2) !important}
body.mg-skin .modo,body.mg-skin .livello{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)) !important;
  border:1px solid rgba(167,139,250,.32) !important; color:var(--mg-ink) !important;
}
body.mg-skin .modo.scelto,body.mg-skin .livello.scelto,body.mg-skin .attivo{
  border-color:var(--mg-gold) !important;
  background:linear-gradient(180deg,rgba(255,198,26,.24),rgba(240,69,155,.14)) !important;
  box-shadow:var(--mg-glow-gold) !important;
}
body.mg-skin .barra{background:rgba(255,255,255,.10) !important}

/* ---- testi rimasti del tema chiaro: passati in rassegna uno per uno
        (scansione di tutti i giochi: nessun grigio su fondo scuro) ---- */
body.mg-skin .card p.sub,body.mg-skin .panel p,body.mg-skin .sotto,body.mg-skin .hint,
body.mg-skin #bubble span,body.mg-skin .livello small,body.mg-skin #domanda,
body.mg-skin #endMsg,body.mg-skin .rules span{color:#ffffff !important}
body.mg-skin .brandline{color:#e9e0ff !important}
body.mg-skin .brandline a,body.mg-skin .card h1,body.mg-skin .card h2,
body.mg-skin .scorebox .val,body.mg-skin .slot.hidden-q{color:#ffd666 !important}
body.mg-skin .scorebox .val.best,body.mg-skin .fronte small{color:#7dd8f5 !important}
body.mg-skin .scorebox .lbl{color:#ffd98a !important}
body.mg-skin .btn.ghost,body.mg-skin .link-sec{color:#ffffff !important}
body.mg-skin .link-sec.wa,body.mg-skin .btn.wa{color:#04240f !important}