/* TechnoFun — Néon doux, fond foncé, contrastes maîtrisés */
:root{
  --bg:#0a0f1e;
  --bg-2:#101730;
  --surface:#161e3a;
  --surface-2:#1e294a;
  --border:#2a3865;
  --text:#e8ecff;
  --text-dim:#a8b3d4;
  --muted:#6b7799;
  --neon:#7df9ff;        /* cyan adouci */
  --neon-2:#c084fc;      /* violet doux */
  --neon-3:#fbbf77;      /* ambre doux pour étoiles */
  --neon-4:#7ee787;      /* vert doux */
  --danger:#ff7a90;
  --glow:0 0 12px rgba(125,249,255,.35), 0 0 24px rgba(125,249,255,.15);
  --glow-2:0 0 12px rgba(192,132,252,.35), 0 0 24px rgba(192,132,252,.15);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}
.font-arcade{font-family:'Press Start 2P',monospace;letter-spacing:.05em;}
.font-display{font-family:'Fraunces',serif;font-variation-settings:'opsz' 144;}
.font-mono{font-family:'DM Sans',monospace;}

/* fond étoilé subtil */
#bg-stars{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse at top,rgba(125,249,255,.08),transparent 50%),
  radial-gradient(ellipse at bottom right,rgba(192,132,252,.06),transparent 50%),
  radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.4),transparent),
  radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.3),transparent),
  radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,.5),transparent),
  radial-gradient(2px 2px at 30% 80%,rgba(125,249,255,.3),transparent);
  background-size:100% 100%,100% 100%,250px 250px,200px 200px,180px 180px,220px 220px;
  animation:starshift 60s linear infinite;
}
@keyframes starshift{from{background-position:0 0,0 0,0 0,0 0,0 0,0 0;}to{background-position:0 0,0 0,250px 250px,200px 200px,-180px -180px,-220px 220px;}}

#app{position:relative;z-index:1;min-height:100vh;}

/* Glass cards */
.card{
  background:linear-gradient(135deg,rgba(22,30,58,.85),rgba(30,41,74,.6));
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:16px;
  position:relative;
}
.card-glow{border-color:var(--neon);box-shadow:var(--glow);}
.card-glow-2{border-color:var(--neon-2);box-shadow:var(--glow-2);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.65rem 1.2rem;
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
  border:1.5px solid var(--neon);
  color:var(--neon);
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;
  border-radius:10px;cursor:pointer;transition:all .2s;
  text-decoration:none;
}
.btn:hover:not(:disabled){background:var(--neon);color:var(--bg);box-shadow:var(--glow);transform:translateY(-2px);}
.btn:active:not(:disabled){transform:translateY(0);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn-2{border-color:var(--neon-2);color:var(--neon-2);}
.btn-2:hover:not(:disabled){background:var(--neon-2);box-shadow:var(--glow-2);}
.btn-3{border-color:var(--neon-3);color:var(--neon-3);}
.btn-3:hover:not(:disabled){background:var(--neon-3);color:var(--bg);box-shadow:0 0 12px rgba(251,191,119,.4);}
.btn-danger{border-color:var(--danger);color:var(--danger);}
.btn-danger:hover:not(:disabled){background:var(--danger);color:var(--bg);}
.btn-sm{padding:.4rem .8rem;font-size:.75rem;}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-dim);}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text);}

/* Inputs */
input[type=text],input[type=password],input[type=email],textarea,select{
  background:var(--bg-2);
  border:1.5px solid var(--border);
  color:var(--text);
  padding:.7rem .9rem;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:.95rem;
  outline:none;transition:all .2s;width:100%;
}
input:focus,textarea:focus,select:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(125,249,255,.15);}
input::placeholder,textarea::placeholder{color:var(--muted);}
label{display:block;color:var(--text-dim);font-size:.8rem;margin-bottom:.4rem;font-weight:500;}

/* Neon text */
.neon{color:var(--neon);text-shadow:0 0 8px rgba(125,249,255,.5);}
.neon-2{color:var(--neon-2);text-shadow:0 0 8px rgba(192,132,252,.5);}
.neon-3{color:var(--neon-3);text-shadow:0 0 8px rgba(251,191,119,.5);}
.neon-4{color:var(--neon-4);text-shadow:0 0 8px rgba(126,231,135,.5);}
.muted{color:var(--muted);}
.dim{color:var(--text-dim);}

/* Animations */
@keyframes pop{0%{transform:scale(.6);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes slide-up{0%{transform:translateY(20px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
@keyframes slide-in-right{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}
@keyframes fade-in{0%{opacity:0;}100%{opacity:1;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 10px var(--neon);}50%{box-shadow:0 0 25px var(--neon),0 0 50px rgba(125,249,255,.3);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1;}100%{transform:translateY(100vh) rotate(720deg);opacity:0;}}
@keyframes ring{0%,100%{transform:rotate(0);}25%{transform:rotate(8deg);}75%{transform:rotate(-8deg);}}

.pop{animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
.slide-up{animation:slide-up .5s ease-out;}
.fade-in{animation:fade-in .4s ease-out;}
.float{animation:float 3.5s ease-in-out infinite;}
.pulse-glow{animation:pulse-glow 2.5s ease-in-out infinite;}
.shake{animation:shake .4s;}

/* Chapter container — fullscreen feel */
.chapter{
  min-height:100vh;
  padding:5rem 1.5rem 7rem;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  animation:fade-in .5s;
}
.chapter-inner{max-width:900px;width:100%;}

/* Progress bar */
.progress{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;border:1px solid var(--border);}
.progress > div{height:100%;background:linear-gradient(90deg,var(--neon),var(--neon-2));transition:width .6s cubic-bezier(.4,0,.2,1);}

/* Top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:rgba(10,15,30,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

/* Side panel buttons */
.dock{
  position:fixed;right:.75rem;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:.5rem;
}
.dock-btn{
  width:46px;height:46px;border-radius:12px;
  background:var(--surface);border:1.5px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;
  transition:all .2s;position:relative;
}
.dock-btn:hover{border-color:var(--neon);color:var(--neon);box-shadow:var(--glow);transform:translateX(-3px);}
.dock-btn.active{border-color:var(--neon);color:var(--neon);background:var(--surface-2);}
.dock-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  background:var(--neon-3);color:var(--bg);
  border-radius:99px;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* Drawers */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:50;animation:fade-in .2s;}
.drawer{
  position:fixed;right:0;top:0;bottom:0;width:380px;max-width:90vw;z-index:51;
  background:linear-gradient(135deg,rgba(22,30,58,.97),rgba(16,23,48,.97));
  border-left:1px solid var(--border);
  animation:slide-in-right .25s ease-out;
  display:flex;flex-direction:column;
}
.drawer-header{padding:1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.drawer-body{flex:1;overflow-y:auto;padding:1.25rem;}
.drawer-footer{padding:1rem;border-top:1px solid var(--border);}

/* Chat bubble */
.bubble{padding:.55rem .85rem;border-radius:14px;max-width:80%;word-wrap:break-word;font-size:.9rem;line-height:1.4;}
.bubble.me{background:linear-gradient(135deg,var(--neon),#5cc0d8);color:var(--bg);align-self:flex-end;border-bottom-right-radius:4px;}
.bubble.them{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:4px;}
.bubble-meta{font-size:.65rem;color:var(--muted);margin-top:.2rem;}

/* Word cloud */
.word-tag{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.4rem .9rem;margin:.3rem;
  background:var(--surface-2);
  border:1px solid var(--neon);
  border-radius:99px;color:var(--text);
  transition:all .3s;
  animation:pop .5s;
  font-weight:500;
}
.word-tag.huge{border-color:var(--neon-2);color:var(--neon-2);text-shadow:0 0 10px rgba(192,132,252,.4);}

/* Stars */
.star{cursor:pointer;font-size:2.5rem;transition:all .15s;filter:grayscale(1);opacity:.4;display:inline-block;}
.star.active{filter:none;opacity:1;text-shadow:0 0 15px var(--neon-3);transform:scale(1.05);}
.star:hover{transform:scale(1.15);}

/* Reactions */
.reaction{
  padding:.5rem .9rem;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:99px;cursor:pointer;transition:all .2s;font-size:.85rem;color:var(--text);
}
.reaction:hover{border-color:var(--neon);transform:translateY(-2px);}
.reaction.active{border-color:var(--neon);background:rgba(125,249,255,.15);color:var(--neon);}

/* Carousel */
.carousel{position:relative;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--border);}
.carousel-img{width:100%;height:340px;object-fit:contain;display:block;background:#000;}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,15,30,.7);border:1px solid var(--neon);color:var(--neon);width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .2s;}
.carousel-nav:hover{background:var(--neon);color:var(--bg);}
.carousel-nav.prev{left:.8rem;}.carousel-nav.next{right:.8rem;}
.carousel-dots{display:flex;justify-content:center;gap:.4rem;padding:.6rem;background:rgba(10,15,30,.6);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);cursor:pointer;transition:all .25s;border:none;}
.dot.active{background:var(--neon);box-shadow:0 0 8px var(--neon);width:22px;border-radius:4px;}

/* Toasts */
#toast-zone{position:fixed;top:5rem;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;}
.toast{padding:.7rem 1.2rem;background:var(--surface);border:1.5px solid var(--neon);border-radius:10px;color:var(--neon);font-weight:500;font-size:.9rem;box-shadow:var(--glow);animation:pop .3s,fade-in .3s;pointer-events:auto;}
.toast.error{border-color:var(--danger);color:var(--danger);box-shadow:0 0 12px rgba(255,122,144,.3);}
.toast.success{border-color:var(--neon-4);color:var(--neon-4);box-shadow:0 0 12px rgba(126,231,135,.3);}

/* Online user dot */
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--neon-4);box-shadow:0 0 8px var(--neon-4);}

/* Game arena */
.game-arena{position:relative;background:radial-gradient(ellipse at center,#1a2548,#0a0f1e);border:2px solid var(--neon);border-radius:12px;overflow:hidden;width:100%;height:60vh;max-height:520px;}
.tomato{position:absolute;width:60px;height:60px;cursor:pointer;animation:pop .25s;user-select:none;transition:transform .1s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.tomato:active{transform:scale(.7);}

/* Mini chat (bottom-right) */
.minichat{
  position:fixed;bottom:1rem;right:1rem;z-index:35;
  width:340px;max-width:calc(100vw - 2rem);
  background:linear-gradient(135deg,rgba(22,30,58,.95),rgba(16,23,48,.95));
  border:1px solid var(--neon);border-radius:14px;
  box-shadow:var(--glow);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:all .3s;
}
.minichat.collapsed{height:50px;}
.minichat-header{padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-bottom:1px solid var(--border);background:rgba(10,15,30,.4);}
.minichat-body{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;max-height:320px;}
.minichat-footer{padding:.6rem;border-top:1px solid var(--border);display:flex;gap:.5rem;}
.minichat-footer input{flex:1;font-size:.85rem;padding:.5rem .7rem;}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--bg-2);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--neon);}

/* Confetti */
.confetti-piece{position:fixed;width:10px;height:14px;top:-20px;pointer-events:none;z-index:300;}

/* Helpers */
.center{display:flex;align-items:center;justify-content:center;}
.row{display:flex;align-items:center;gap:.5rem;}
.col{display:flex;flex-direction:column;gap:.5rem;}
.gap-2{gap:.5rem;}.gap-3{gap:.75rem;}.gap-4{gap:1rem;}
.divider{height:1px;background:var(--border);margin:1.5rem 0;}

/* Locked chapter */
.locked-screen{text-align:center;padding:3rem 1rem;}
.locked-screen .lock-icon{font-size:5rem;opacity:.35;margin-bottom:1rem;}

/* Login screen */
.login-bg{
  min-height:100vh;
  background:
    radial-gradient(ellipse at top left,rgba(125,249,255,.12),transparent 40%),
    radial-gradient(ellipse at bottom right,rgba(192,132,252,.12),transparent 40%),
    var(--bg);
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.avatar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;max-height:160px;overflow-y:auto;padding:.5rem;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;}
.avatar-btn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:1.5px solid transparent;border-radius:8px;background:transparent;cursor:pointer;transition:all .15s;}
.avatar-btn:hover{background:var(--surface-2);}
.avatar-btn.active{border-color:var(--neon);background:rgba(125,249,255,.1);box-shadow:0 0 10px rgba(125,249,255,.2);}

/* Leaderboard */
.lb-row{display:flex;align-items:center;gap:.6rem;padding:.6rem;background:var(--surface-2);border-radius:8px;}
.lb-rank{font-family:'Press Start 2P',monospace;font-size:.7rem;width:24px;}
.lb-rank.r1{color:var(--neon-3);}
.lb-rank.r2{color:var(--text);}
.lb-rank.r3{color:#cd7f32;}

/* Stage badge */
.stage-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;background:var(--surface-2);border:1px solid var(--neon);border-radius:99px;font-size:.7rem;font-family:'Press Start 2P',monospace;color:var(--neon);}

/* Responsive */
@media (max-width:768px){
  .chapter{padding:5rem 1rem 9rem;}
  .drawer{width:100%;}
  .carousel-img{height:240px;}
  .minichat{width:calc(100vw - 1.5rem);right:.75rem;bottom:.75rem;}
  .star{font-size:2rem;}
}