:root{ --neon:#00ffae; --fg:#eaffff; }
*{ box-sizing:border-box; }
body{ margin:0; background:#000; color:var(--neon); font-family:Segoe UI,system-ui,Arial,sans-serif; overflow:hidden; text-align:center; }

/* Particules & halo souris */
#particles{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.mouse-light{ position:fixed; width:300px; height:300px; background:radial-gradient(circle, rgba(0,255,170,0.18), transparent 70%); transform:translate(-50%,-50%); filter:blur(40px); pointer-events:none; z-index:-1; }

/* Header */
.titlewrap{ margin-top:5vh; position:relative; z-index:2; }
.holo,.holo-sub{ background:linear-gradient(90deg,#00ffae,#00ffd5,#00ffae); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(0,255,170,.5); }
.holo{ font-size:3.2rem; } .holo-sub{ opacity:.9; }

/* Carousel */
.carousel{ position:absolute; top:57%; left:50%; transform:translate(-50%,-50%); width:100vw; overflow:hidden; z-index:1; }
.track{ display:flex; gap:3rem; animation:scroll 15s linear infinite; }
.track img{ width:240px; height:240px; object-fit:cover; border-radius:14px; box-shadow:0 0 24px #00ffae55; }
@keyframes scroll{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }

/* CTA */
.btn{ position:absolute; bottom:8vh; left:50%; transform:translateX(-50%); padding:14px 28px; border:2px solid var(--neon); color:var(--neon); border-radius:10px; text-decoration:none; z-index:2; background:transparent; }
.btn:hover{ background:var(--neon); color:#003322; box-shadow:0 0 25px var(--neon); }

/* Snake overlay : le forcer à être invisible quand [hidden] */
#snake-overlay[hidden]{ display:none !important; }
#snake-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.9); backdrop-filter: blur(10px);
  z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center;
}

.snake-btn{ background:rgba(0,0,0,0.45); border:1px solid var(--neon); color:var(--neon); border-radius:8px; padding:8px 14px; cursor:pointer; }
.snake-btn.close{ position:absolute; top:10px; right:10px; }

#scoreboard{ position:absolute; top:60px; right:20px; background:rgba(0,0,0,.45); padding:10px; border-radius:10px; width:250px; color:var(--fg); font-size:14px; }
#scoreboard ul{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; }
#scoreboard li{ padding:3px 0; border-bottom:1px solid rgba(255,255,255,.1); }

#snake{ background:#0a1f0a; border:2px solid var(--neon); box-shadow:0 0 30px rgba(0,255,170,.25); }
.hud{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.35); padding:8px 14px; border-radius:10px; color:var(--fg); font-weight:700; }

/* Volume */
#volume-control{ position:absolute; bottom:18px; left:18px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.35); padding:8px 12px; border-radius:10px; border:1px solid var(--neon); color:var(--neon); font-size:18px; }
#volume-slider{ width:120px; cursor:pointer; }
#volume-icon{ cursor:pointer; }

/* Menu pseudo */
#name-menu{ position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:9999; }
#name-menu[hidden]{ display:none !important; }
#name-menu-box{ background:rgba(0,0,0,.5); border:2px solid var(--neon); border-radius:12px; padding:20px; color:var(--neon); text-align:center; width:290px; }
#name-list button{ width:100%; padding:8px; margin:4px 0; border:1px solid var(--neon); background:rgba(0,255,170,0.08); color:var(--neon); cursor:pointer; border-radius:8px; }
#name-list button:hover{ background:rgba(0,255,170,0.2); }