* { margin:0; padding:0; box-sizing:border-box; }
:root { --fond:#0b0d12; --panneau:#141824; --bord:#232a3a; --accent:#e0453a; --texte:#e8eaf0; --doux:#9aa3b5; }
body { background:var(--fond); color:var(--texte); font-family:system-ui,Segoe UI,Roboto,sans-serif; min-height:100vh; }
.ecran { min-height:100vh; display:flex; flex-direction:column; }

/* Auth */
#ecran-auth { align-items:center; justify-content:center; padding:20px; }
.carte-auth { background:var(--panneau); border:1px solid var(--bord); border-radius:14px; padding:32px; width:100%; max-width:380px; }
.carte-auth h1 { font-size:22px; letter-spacing:2px; color:var(--accent); text-align:center; }
.sous-titre { text-align:center; color:var(--doux); font-size:13px; margin:8px 0 20px; }
.onglets-auth { display:flex; gap:8px; margin-bottom:16px; }
.onglets-auth button { flex:1; padding:10px; background:#0f131c; color:var(--doux); border:1px solid var(--bord); border-radius:8px; cursor:pointer; }
.onglets-auth button.actif { background:var(--accent); color:#fff; border-color:var(--accent); }
input { width:100%; padding:12px; margin-bottom:10px; background:#0f131c; border:1px solid var(--bord); border-radius:8px; color:var(--texte); font-size:15px; }
#auth-go, #btn-jouer { width:100%; padding:13px; background:var(--accent); color:#fff; border:0; border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; }
#auth-msg, #jouer-msg { margin-top:10px; font-size:13px; color:var(--accent); min-height:18px; text-align:center; }

/* Launcher */
#barre-haut { display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--panneau); border-bottom:1px solid var(--bord); flex-wrap:wrap; }
.logo { font-weight:800; letter-spacing:1.5px; color:var(--accent); font-size:14px; }
#barre-haut nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.nav-btn { padding:8px 12px; background:transparent; color:var(--doux); border:0; border-radius:6px; cursor:pointer; font-size:14px; }
.nav-btn.actif { background:#1d2434; color:var(--texte); }
#btn-deco { background:#1d2434; color:var(--doux); border:0; border-radius:6px; padding:8px 12px; cursor:pointer; }
.vue { padding:20px; max-width:900px; margin:0 auto; width:100%; }
.vue h2 { margin-bottom:16px; font-size:20px; }
.carte-jeu { display:flex; gap:18px; background:var(--panneau); border:1px solid var(--bord); border-radius:14px; padding:18px; flex-wrap:wrap; }
.jaquette { width:150px; height:190px; border-radius:10px; background:linear-gradient(160deg,#3a1410,#0f0a08 60%),#221510; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; letter-spacing:2px; color:#f0b0a8; border:1px solid #4a201a; flex-shrink:0; }
.infos-jeu { flex:1; min-width:230px; }
.infos-jeu p { color:var(--doux); font-size:14px; margin:8px 0 14px; }
.infos-jeu label { font-size:13px; color:var(--doux); display:block; margin-bottom:10px; }
.infos-jeu input { width:160px; display:inline-block; margin:0 0 0 6px; padding:7px; }
.liste { display:flex; flex-direction:column; gap:8px; }
.item { background:var(--panneau); border:1px solid var(--bord); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:14px; flex-wrap:wrap; }
.item .badge { font-size:11px; padding:3px 8px; border-radius:20px; background:#1d2434; color:var(--doux); }
.item .badge.vert { background:#14301c; color:#6fd089; }
.item .badge.orange { background:#33230f; color:#e0a75a; }
.item button { margin-left:auto; padding:6px 12px; border:0; border-radius:6px; background:#1d2434; color:var(--texte); cursor:pointer; }
.item button.accepter { background:#1d5c33; }
.vide { color:var(--doux); font-size:14px; padding:14px; text-align:center; }
.ligne-form { display:flex; gap:8px; margin-bottom:14px; }
.ligne-form input { margin:0; flex:1; }
.ligne-form button { padding:10px 16px; background:var(--accent); color:#fff; border:0; border-radius:8px; cursor:pointer; }

/* Jeu */
#ecran-jeu { position:fixed; inset:0; background:#000; }
#canvas3d { width:100%; height:100%; display:block; touch-action:none; }
#hud { position:absolute; inset:0; pointer-events:none; }
#hud-haut { position:absolute; top:10px; left:0; right:0; display:flex; justify-content:center; gap:18px; font-size:15px; font-weight:700; text-shadow:0 1px 3px #000; flex-wrap:wrap; padding:0 84px; }
#hud-pv { color:#ff6b62; }
#hud-msg { position:absolute; top:64px; left:0; right:0; text-align:center; color:#ffd9a0; font-size:14px; text-shadow:0 1px 3px #000; }
@media (max-width:600px) { #hud-haut { font-size:12px; gap:10px; padding:0 70px; } }
#btn-quitter { position:absolute; top:10px; right:10px; pointer-events:auto; background:#0008; color:#fff; border:1px solid #444; border-radius:8px; padding:8px 12px; cursor:pointer; }
#controles-mobile { position:absolute; bottom:0; left:0; right:0; display:none; justify-content:space-between; align-items:flex-end; padding:26px; pointer-events:none; }
#joystick { width:120px; height:120px; border-radius:50%; background:#ffffff14; border:1px solid #ffffff30; position:relative; pointer-events:auto; touch-action:none; }
#stick { width:52px; height:52px; border-radius:50%; background:#ffffff40; position:absolute; left:34px; top:34px; }
#btn-tir { width:86px; height:86px; border-radius:50%; background:#e0453a99; color:#fff; border:2px solid #e0453a; font-weight:800; pointer-events:auto; touch-action:none; }
@media (pointer:coarse) { #controles-mobile { display:flex; } }
#chargement { position:absolute; inset:0; background:#000d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.spin { width:42px; height:42px; border:4px solid #ffffff22; border-top-color:var(--accent); border-radius:50%; animation:tourne 0.9s linear infinite; }
@keyframes tourne { to { transform:rotate(360deg); } }