/* Gioco MB INVADERS, pagina /play/ — 01/11/2026 */
:root{--spazio:#2B0B3F;--neon:#FF7DC0;--viola:#B56BFF;--oro:#FFD45E;--chiaro:#F6E3F1}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--spazio);color:#fff;font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;-webkit-text-size-adjust:100%}
#campo{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hud{position:fixed;z-index:5;top:max(14px,env(safe-area-inset-top));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;pointer-events:none;color:#fff}
.hud{flex-wrap:wrap;row-gap:4px}
.hud{font-size:20px;text-shadow:0 2px 6px rgba(30,5,45,.9)}
.hud #punti{font-size:28px;font-weight:800;color:#FFD45E}
.hud .fila{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:rgba(30,5,45,.72);border:1px solid rgba(255,125,192,.7);border-radius:999px;font-size:18px;font-weight:800}
.hud #molt{font-size:24px;color:#FFD45E}
.classifica li span small{display:block;margin-top:2px;font-size:12px;color:var(--chiaro)}
.hud b{color:var(--neon)}
.hud #vite{color:var(--neon);letter-spacing:.1em}
.hud[hidden],.schermata[hidden]{display:none}
.schermata{position:fixed;inset:0;z-index:4;overflow-y:auto;padding:max(30px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(43,11,63,.55)}
.schermata > *{width:100%;max-width:400px}
.et{margin:0 0 8px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--chiaro)}
h1,h2{margin:0;font-weight:800;line-height:1;color:#fff;letter-spacing:.02em}
h1{font-size:clamp(46px,14vw,76px)}
h1 em{font-style:normal;color:var(--neon)}
h2{font-size:clamp(50px,15vw,84px);color:var(--oro)}
.reg{margin:14px 0 18px;font-size:14px;line-height:1.5;color:var(--chiaro)}
form{display:grid;gap:8px;text-align:left}
label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chiaro)}
input[type=email],#nome{width:100%;padding:13px;margin-bottom:6px;border:1px solid rgba(255,255,255,.35);border-radius:0;background:rgba(43,11,63,.75);color:#fff;font:inherit;font-size:16px}
input:focus{outline:2px solid var(--neon);outline-offset:1px}
.spunta{display:flex;align-items:flex-start;gap:10px;padding:3px 0;font-size:13px;line-height:1.35;letter-spacing:0;text-transform:none}
.spunta input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--neon)}
.spunta a{color:var(--neon)}
button,.sec{display:block;width:100%;margin-top:6px;padding:15px;border:2px solid var(--neon);border-radius:0;background:var(--neon);color:var(--spazio);font:inherit;font-size:15px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.sec{background:transparent;color:#fff}
.azioni{display:grid;gap:8px}
.nota{margin:10px 0 0;font-size:12px;color:#93A3B5}
.errore{color:#FF9B9B!important}
#dati{display:grid;gap:8px}
#dati[hidden],.benvenuta[hidden]{display:none}
.benvenuta{margin:2px 0 6px;padding:14px;border:2px solid var(--neon);background:rgba(255,125,192,.16);font-size:16px;font-weight:700;line-height:1.4;text-align:center;color:#fff}
.firma{margin:12px 0 0;font-size:12px;letter-spacing:.08em;color:var(--chiaro)}
.firma a{color:var(--neon);font-weight:700}
.audio{position:fixed;z-index:6;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;margin:0;padding:7px 11px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(30,5,45,.72);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:none}
.nota-sorelle{color:#FFB3D1;font-weight:700}
.bacio[hidden]{display:none}
.bacio{margin:6px 0 2px;font-size:24px;font-weight:800;line-height:1.25;text-align:center;background:linear-gradient(90deg,#FF7DC0,#fff,#FFD45E,#fff,#FF7DC0);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 9px rgba(255,125,192,.95));animation:brilla 2.4s linear infinite}
@keyframes brilla{to{background-position:-300% 0}}
.esci{margin-top:16px;font-size:12px;color:var(--chiaro)}
#modulo{margin-top:18px}
.natale{margin:4px 0 0;padding:12px 10px;border:2px dashed #FFD45E;border-radius:14px;background:rgba(200,30,60,.28);font-size:18px;font-weight:800;line-height:1.35;color:#fff}
.tit-classifica{margin:20px 0 0;font-size:24px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--oro)}
.classifica{list-style:none;margin:8px 0 0;padding:0 10px;text-align:left;font-size:16px;font-weight:700;background:rgba(30,5,45,.72);border:1px solid rgba(255,125,192,.7)}
.classifica li:first-child{border-top:0}
.classifica:empty{display:none}
.classifica li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:7px 2px;border-top:1px solid rgba(255,255,255,.16)}
.classifica li b{font-weight:400;color:var(--neon)}
.classifica li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.classifica li.mia,.classifica li.mia b{color:var(--oro)}