:root{
    --neon:#c084fc;
    --neon-bright:#e9d5ff;
    --neon-deep:#a855f7;
    --bg:#050008;
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-cyber: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Arial Black", Impact, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none}
body{background:var(--bg);overflow:hidden;font-family:var(--font-ui);color:var(--neon)}
#game{display:block;width:100vw;height:100vh;cursor:none}
.hidden{display:none!important}

/* Mirino */
#crosshair{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:18px;height:18px;pointer-events:none;z-index:10;
    transition:transform 0.1s ease-out, opacity 0.1s ease-out;
}
#crosshair .ch-dot{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:3px;height:3px;background:#ffffff;border-radius:50%;
    box-shadow:0 0 6px #ffffff,0 0 10px var(--neon-bright);
}
#crosshair .ch-line{
    position:absolute;background:var(--neon-bright);
    box-shadow:0 0 6px var(--neon);border-radius:1px;
    opacity:0.85;
}
#crosshair .ch-top{top:0;left:50%;width:2px;height:5px;transform:translateX(-50%)}
#crosshair .ch-bottom{bottom:0;left:50%;width:2px;height:5px;transform:translateX(-50%)}
#crosshair .ch-left{top:50%;left:0;width:5px;height:2px;transform:translateY(-50%)}
#crosshair .ch-right{top:50%;right:0;width:5px;height:2px;transform:translateY(-50%)}

#crosshair.ads{
    transform:translate(-50%,-50%) scale(0.65);
    opacity:0.95;
}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.hud-bottom{position:absolute;bottom:25px;left:40px}
.hud-label{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--neon);letter-spacing:3px;margin-bottom:4px}
.hud-bar{
    width:300px;height:14px;background:rgba(20,0,40,.7);
    border:1px solid var(--neon-deep);overflow:hidden;
    box-shadow:0 0 10px rgba(192,132,252,.3);
}
.hud-health{
    height:100%;width:100%;
    background:linear-gradient(90deg,var(--neon-deep),var(--neon-bright));
    box-shadow:0 0 10px var(--neon);transition:width .15s ease-out;
}
.hud-top-right{position:absolute;top:25px;right:40px;text-align:right}
.hud-kills{
    font-family:var(--font-mono);font-size:20px;letter-spacing:2px;
    color:var(--neon-bright);text-shadow:0 0 8px var(--neon);
}
.hud-kills b{font-size:32px;color:#fff;text-shadow:0 0 12px var(--neon-bright)}

.hud-top-left{
    position:absolute;top:25px;left:40px;
    font-family:var(--font-mono);font-size:14px;color:var(--neon-deep);
    letter-spacing:2px;
}
.hud-top-left span{color:var(--neon-bright);font-size:18px;font-weight:700}

/* Kill feed */
#killFeed{
    position:absolute;top:60px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:6px;align-items:center;
    pointer-events:none;z-index:6;
}
.kill-msg{
    background:rgba(20,0,40,.85);border:1px solid var(--neon);
    padding:6px 16px;color:var(--neon-bright);
    font-family:var(--font-mono);font-size:13px;
    text-shadow:0 0 8px var(--neon);letter-spacing:1px;
    box-shadow:0 0 15px rgba(192,132,252,.3);
    animation:killFade 4s forwards;
}
@keyframes killFade{
    0%{opacity:0;transform:translateY(-10px)}
    10%{opacity:1;transform:translateY(0)}
    80%{opacity:1}
    100%{opacity:0;transform:translateY(-10px)}
}

/* Vignette danno */
#dmgVignette{
    position:fixed;inset:0;pointer-events:none;
    box-shadow:inset 0 0 150px 50px rgba(168, 85, 247, 0.85);
    opacity:0;transition:opacity .3s;z-index:8;
}

/* Pausa Overlay */
#pauseOverlay{
    position:fixed;inset:0;background:rgba(5,0,8,0.85);
    display:flex;align-items:center;justify-content:center;
    z-index:20;backdrop-filter:blur(5px);cursor:pointer;
}
#pauseOverlay h2{
    font-family:var(--font-cyber);font-size:40px;font-weight:900;color:var(--neon);
    text-shadow:0 0 20px var(--neon);letter-spacing:4px;
    animation:blink 1.5s infinite;
}
@keyframes blink{50%{opacity:.5}}

/* Menu */
#menu, #gameOver{
    position:fixed;inset:0;
    background:radial-gradient(ellipse at center,#1a0030 0%,#050008 70%,#000 100%);
    display:flex;align-items:center;justify-content:center;
    z-index:100;overflow:hidden;
}
.menu-bg{
    position:absolute;inset:-50px;
    background-image:
        linear-gradient(rgba(168,85,247,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(168,85,247,.07) 1px,transparent 1px);
    background-size:50px 50px;animation:gridMove 12s linear infinite;
}
@keyframes gridMove{from{transform:translate(0,0)}to{transform:translate(50px,50px)}}
.menu-glow{
    position:absolute;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle,rgba(168,85,247,.3) 0%,transparent 70%);
    filter:blur(40px);animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{
    0%,100%{transform:scale(1);opacity:.6}
    50%{transform:scale(1.2);opacity:.9}
}
.menu-content{position:relative;text-align:center;padding:40px;max-width:820px}
.title{
    font-family:var(--font-cyber);font-size:clamp(48px,9vw,110px);
    font-weight:900;letter-spacing:6px;color:#fff;
    text-shadow:0 0 10px var(--neon),0 0 20px var(--neon),0 0 40px var(--neon-deep),0 0 80px var(--neon-deep);
    line-height:.9;animation:titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow{
    0%,100%{text-shadow:0 0 10px var(--neon),0 0 20px var(--neon),0 0 40px var(--neon-deep),0 0 80px var(--neon-deep)}
    50%{text-shadow:0 0 20px var(--neon),0 0 40px var(--neon),0 0 60px var(--neon-deep),0 0 100px var(--neon-deep)}
}
.title span{color:var(--neon);display:block;margin-top:-8px}
.subtitle{font-size:16px;letter-spacing:6px;color:var(--neon);margin:20px 0 40px;text-shadow:0 0 8px var(--neon);font-weight:700}

.lobby-form{
    margin:15px auto 25px;max-width:540px;display:flex;flex-direction:column;gap:12px;
}
.form-group{
    display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;
}
.form-group label{
    font-family:var(--font-mono);font-size:11px;font-weight:700;
    color:var(--neon-bright);letter-spacing:2px;text-shadow:0 0 6px var(--neon);
}
.form-row{
    display:flex;gap:10px;width:100%;justify-content:center;
}
.name-input{
    background:rgba(20,0,40,.8);border:2px solid var(--neon-deep);
    color:var(--neon-bright);padding:10px 15px;font-size:18px;
    font-family:var(--font-mono);font-weight:700;text-align:center;
    width:100%;letter-spacing:3px;
    box-shadow:0 0 15px rgba(168,85,247,.3);
}
.name-input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 20px var(--neon)}

.lobby-select{
    background:rgba(20,0,40,.85);border:2px solid var(--neon-deep);
    color:var(--neon-bright);padding:10px;font-family:var(--font-mono);font-size:14px;
    font-weight:700;text-align:center;cursor:pointer;
    outline:none;box-shadow:0 0 10px rgba(168,85,247,.3);transition:all .2s;
    width:100%;
}
.lobby-select:hover,.lobby-select:focus{
    border-color:var(--neon);box-shadow:0 0 18px var(--neon);
}
.lobby-select option{
    background:#0d001a;color:#fff;
}

#startBtn, #restartBtn{
    font-family:var(--font-mono);font-size:20px;font-weight:700;
    letter-spacing:5px;padding:16px 50px;background:transparent;
    color:#fff;border:2px solid var(--neon);cursor:pointer;
    text-shadow:0 0 10px var(--neon);
    box-shadow:0 0 20px rgba(192,132,252,.5),inset 0 0 20px rgba(192,132,252,.1);
    transition:all .3s;display:block;margin:0 auto;
}
#startBtn:hover, #restartBtn:hover{
    background:var(--neon);color:#000;
    box-shadow:0 0 40px var(--neon),inset 0 0 30px rgba(255,255,255,.3);
    transform:scale(1.05);
}

.ctrl-hint{margin-top:30px;color:var(--neon-deep);font-size:14px;letter-spacing:2px}
.ctrl-hint b{color:var(--neon-bright)}

/* Game Over */
#gameOver{display:none}
.over-content{text-align:center;padding:40px;position:relative;z-index:1}
#winnerText{
    font-family:var(--font-cyber);font-size:clamp(40px,8vw,90px);
    font-weight:900;color:#fff;
    text-shadow:0 0 20px var(--neon),0 0 40px var(--neon-deep);
    margin-bottom:15px;letter-spacing:4px;
}
#nextMatchCountdown{
    font-family:var(--font-mono);font-size:20px;font-weight:700;
    color:var(--neon-bright);margin:15px 0 30px 0;letter-spacing:3px;
    text-shadow:0 0 10px var(--neon);
}

/* Lista giocatori in lobby */
#playerList{
    margin: 20px auto; max-width: 300px; text-align: left;
    font-family: var(--font-ui); font-size: 18px; font-weight: 500;
    color: var(--neon-bright); max-height: 150px; overflow-y: auto;
}
#playerList div { padding: 4px 0; border-bottom: 1px solid rgba(168,85,247,0.2); }
.hud-shield-bar{
    width:300px;height:10px;background:rgba(0,20,40,.7);
    border:1px solid #00d2ff;overflow:hidden;margin-top:4px;
    box-shadow:0 0 10px rgba(0,210,255,.3);
}
.hud-shield{
    height:100%;width:100%;
    background:linear-gradient(90deg,#0055ff,#00d2ff);
    box-shadow:0 0 10px #00d2ff;transition:width .15s ease-out;
}
.hud-weapon-box{
    position:absolute;bottom:25px;right:40px;text-align:right;
    font-family:var(--font-mono);
}
.hud-weapon-name{
    font-size:18px;color:var(--neon-bright);letter-spacing:2px;
    text-shadow:0 0 8px var(--neon);
}
.hud-ammo{
    font-size:28px;font-weight:700;color:#fff;letter-spacing:3px;
    text-shadow:0 0 12px var(--neon-bright);
}
.hud-dash{
    font-family:var(--font-mono);font-size:12px;color:#00d2ff;
    letter-spacing:2px;margin-top:6px;
}

/* Damage Numbers Floating (VIOLA NEON) */
.damage-number {
    position: fixed; pointer-events: none; z-index: 12;
    font-family: var(--font-mono); font-weight: 900; font-size: 24px;
    color: #e9d5ff; text-shadow: 0 0 10px #c084fc, 0 0 20px #a855f7;
    animation: floatDamage 0.8s ease-out forwards;
}
.damage-number.crit {
    font-size: 32px; color: #f0abfc; text-shadow: 0 0 15px #e9d5ff, 0 0 30px #c084fc;
}
@keyframes floatDamage {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
    30% { transform: translate(-50%, -70%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}