*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,Arial,sans-serif;
  background:radial-gradient(circle at top,#3b1e55,#050510);
  color:#f7f0ff;
}

/* =================== PAGE D'ACCUEIL =================== */
#homeScreen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,#2e1650,#080313,#02000a);
  animation:homeFadeIn 1.2s ease forwards;
  z-index:9999;overflow:hidden;
}
@keyframes homeFadeIn{
  from{opacity:0;transform:scale(1.03);} to{opacity:1;transform:scale(1);}
}
#homeGalaxy{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 20% 10%,rgba(224,159,255,.22),transparent 60%),
    radial-gradient(circle at 80% 80%,rgba(136,190,255,.18),transparent 65%),
    radial-gradient(circle at 10% 90%,rgba(255,209,150,.2),transparent 55%),
    radial-gradient(circle at 70% 30%,rgba(185,124,255,.3),transparent 65%),
    #05020a;
  filter:blur(4px);opacity:.85;
  animation:galaxyDrift 35s linear infinite;
}
@keyframes galaxyDrift{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-2%,-1%,0) scale(1.03);}100%{transform:translate3d(0,0,0) scale(1);}}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffffffe0;box-shadow:0 0 8px #fff;opacity:.7;animation:starBlink 3s infinite ease-in-out;}
@keyframes starBlink{0%,100%{opacity:.2;transform:scale(.8);}50%{opacity:1;transform:scale(1.3);}}
#homeContent{text-align:center;position:relative;z-index:1;padding:20px;}
#homeTitle{font-size:46px;font-weight:700;letter-spacing:3px;text-shadow:0 0 20px #c88aff,0 0 40px #8f3bff;margin-bottom:8px;}
#homeSubtitle{font-size:17px;opacity:.9;margin-bottom:28px;}
#homeCrystalWrapper{width:220px;height:220px;margin:0 auto 30px;position:relative;}
#homeCrystalAura{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#9c5bff,#2b0a60,#050010);filter:blur(26px);animation:auraPulse 4s infinite ease-in-out;}
#homeCrystal{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,#d9b5ff,#8b48ff,#3b1475);box-shadow:0 0 40px rgba(210,170,255,.9);animation:crystalFloat 5s infinite ease-in-out;}
#homeCrystalCore{position:absolute;top:50%;left:50%;width:90px;height:90px;transform:translate(-50%,-50%) rotate(45deg);border-radius:22px;background:linear-gradient(135deg,#fff8ff,#f0caff,#b86aff);box-shadow:0 0 30px rgba(255,230,255,.95);animation:corePulse 2.4s infinite ease-in-out;}
@keyframes auraPulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.08);opacity:1;}}
@keyframes crystalFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.12);}}
#startGameBtn{padding:14px 44px;border:none;border-radius:999px;background:linear-gradient(135deg,#8a34ff,#f65bff);color:#fff;font-size:20px;font-weight:600;cursor:pointer;box-shadow:0 0 24px rgba(218,140,255,.7);transition:.12s;}
#startGameBtn:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(230,160,255,.9);}

/* =================== CONTENEUR JEU =================== */
#gameContainer{display:none;opacity:0;animation:gameFadeIn 1s forwards ease;}
@keyframes gameFadeIn{to{opacity:1;}}
#game{max-width:1200px;margin:20px auto;padding:20px;border-radius:16px;background:rgba(10,5,25,.96);box-shadow:0 0 40px rgba(150,100,255,.28);position:relative;}
#gameTitle{text-align:center;font-size:26px;font-weight:700;margin-top:30px;}
#gameSubtitle{text-align:center;font-size:14px;opacity:.8;margin-bottom:16px;}

/* Boutons top */
#options-toggle,#shop-toggle{position:absolute;top:10px;padding:6px 10px;border:none;border-radius:8px;font-size:13px;cursor:pointer;color:#fff;}
#options-toggle{right:10px;background:rgba(80,60,200,.9);}#shop-toggle{right:110px;background:rgba(255,102,204,.9);}

/* Options panel */
#options-panel{position:absolute;top:40px;right:10px;width:230px;background:rgba(15,10,40,.98);border-radius:12px;padding:10px 12px;display:none;font-size:13px;box-shadow:0 0 20px rgba(0,0,0,.6);z-index:10;}
#options-panel h3{margin-bottom:6px;font-size:14px;}#options-panel h4{margin:6px 0 4px;font-size:13px;color:#d8b6ff;}
.opt-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0;}
.opt-row button{font-size:11px;padding:3px 6px;border:none;border-radius:8px;background:#5b3bff;color:#fff;cursor:pointer;}

/* Boutique popup */
#shop-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at top,rgba(30,10,60,.96),rgba(2,0,10,.98));z-index:9998;}
#shop-modal{background:radial-gradient(circle at top,#2a1248,#090215);border-radius:20px;padding:18px 20px 16px;width:min(420px,90%);box-shadow:0 0 35px rgba(200,140,255,.7);border:1px solid rgba(220,180,255,.45);position:relative;}
#shop-modal h2{text-align:center;font-size:20px;margin-bottom:10px;}
.shop-section{margin:6px 0 10px;} .shop-section h3{font-size:15px;margin-bottom:4px;} .shop-section p{font-size:13px;opacity:.8;margin-bottom:6px;}
.shop-modal-btn{width:100%;margin:3px 0;padding:7px 9px;border:none;border-radius:8px;background:#5b3bff;color:#fff;text-align:left;cursor:pointer;font-size:14px;}
.shop-modal-btn:hover{background:#7462ff;} #shop-close{position:absolute;top:8px;right:10px;border:none;background:transparent;color:#eee;font-size:16px;cursor:pointer;}

/* Top section */
#top-section{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;margin-top:50px;margin-bottom:20px;}

/* Cristal */
#crystal-wrapper{position:relative;width:260px;height:260px;flex-shrink:0;}
#crystal-aura{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#8f5bff,#230a40,#0a0015);filter:blur(25px);opacity:.95;}
#crystal-btn{position:absolute;inset:20px;border:none;border-radius:50%;background:transparent;cursor:pointer;padding:0;}
#crystal-core{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#ffe8ff,#d79bff,#8b40ff);box-shadow:0 0 30px rgba(230,160,255,.9);transition:transform .08s,box-shadow .08s;}
#crystal-btn:active #crystal-core{transform:scale(.96);box-shadow:0 0 16px rgba(210,140,255,.9);}

/* Stats */
#stats{flex:1 1 320px;max-width:360px;font-size:14px;} .stat-line{display:flex;justify-content:space-between;margin:4px 0;}
.pass-bar{width:100%;height:10px;background:#2c1f45;border-radius:6px;overflow:hidden;margin-top:4px;} .pass-bar-fill{height:100%;width:0%;background:#b46aff;transition:width .25s;}

/* Panels gameplay */
#panels{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:10px;}
.panel{background:#1a1230;border-radius:12px;padding:15px;box-shadow:0 0 16px rgba(0,0,0,.4);font-size:14px;}
.panel h2{font-size:17px;margin-bottom:8px;}
.shop-btn{width:100%;margin:5px 0;padding:8px 10px;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;background:#5b3bff;color:#fff;transition:background .1s,opacity .1s;}
.shop-btn:hover{background:#7462ff;} .prestige-btn{background:#ff8b3b;} .rebirth-btn{background:#ff3b78;}
.btn-title{font-weight:600;margin-bottom:2px;} .btn-desc{font-size:12px;opacity:.9;} .tiny{font-size:12px;opacity:.75;margin-top:8px;}

/* Désactivation boutons */
.btn-disabled{background:#3a3550 !important;cursor:not-allowed !important;opacity:.9;}

/* Particules clic */
.click-float{position:absolute;font-size:14px;font-weight:600;color:#ffe6ff;text-shadow:0 0 6px rgba(255,200,255,.9);pointer-events:none;animation:floatUp .8s ease-out forwards;}
@keyframes floatUp{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-35px);opacity:0;}}

/* =================== OVERLAY CONNEXION =================== */
#authOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at top,rgba(30,10,60,.96),rgba(2,0,10,.98));z-index:10000;}
#authModal{background:radial-gradient(circle at top,#2a1248,#090215);border-radius:20px;padding:18px 20px 16px;width:min(420px,92%);box-shadow:0 0 35px rgba(200,140,255,.7);border:1px solid rgba(220,180,255,.45);}
#authModal h2{text-align:center;font-size:20px;margin:2px 0 6px;}
.auth-sub{font-size:13px;opacity:.85;margin:0 0 10px;text-align:center;}
.acc-row{margin:6px 0;}
.acc-row input{width:100%;padding:7px 8px;border-radius:8px;border:1px solid rgba(220,180,255,.25);background:#0f0a22;color:#f7f0ff;outline:none;}
.acc-row input::placeholder{color:rgba(247,240,255,.55)}
.auth-actions{display:flex;gap:8px;flex-wrap:wrap;}
.auth-actions button{flex:1 1 auto;font-size:13px;padding:8px 10px;border:none;border-radius:10px;background:#5b3bff;color:#fff;cursor:pointer;}
.auth-actions button:hover{background:#7462ff;}
.auth-actions button:disabled{background:#3a3550;cursor:not-allowed;opacity:.9;}
.auth-actions button#authForgot{background:rgba(255,255,255,.08);border:1px solid rgba(220,180,255,.25);}
.auth-actions button#authForgot:hover{background:rgba(255,255,255,.14);}

/* Responsive */
@media(max-width:768px){#game{margin:10px;padding:14px;}#top-section{flex-direction:column;}#panels{grid-template-columns:1fr;}#options-toggle,#shop-toggle{top:8px;}#shop-toggle{right:auto;left:10px;}}