/* ============ FamiQuiz — thème sombre « soirée » ============
   Ambiance pub quiz entre amis : fond sombre chaud (pas le bleu-violet
   « IA »), lumières guirlande, couleurs vives, gros boutons ronds,
   animations rebondissantes. Agréable aux yeux le soir. */

:root{
  --bg:#211A16;            /* brun-charbon chaud */
  --bg2:#2A211C;
  --card:#2F2620;
  --card2:#3A2F27;
  --line:#4E4034;
  --ink:#F7EFE2;           /* blanc cassé chaud */
  --soft:#B8A995;
  --amber:#FFB84D; --coral:#FF6B6B; --teal:#2DD4BF;
  --lime:#A3E635;  --pink:#F472B6;  --blue:#60A5FA; --purple:#B79CFF;
  --border:3px solid #191310;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --radius:22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Fredoka','Baloo 2','Comic Sans MS','Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
  background-image:
    radial-gradient(circle at 10% 8%,  rgba(255,184,77,.10) 0 90px,  transparent 91px),
    radial-gradient(circle at 88% 14%, rgba(45,212,191,.08) 0 120px, transparent 121px),
    radial-gradient(circle at 12% 88%, rgba(244,114,182,.07) 0 110px, transparent 111px),
    radial-gradient(circle at 90% 86%, rgba(96,165,250,.08) 0 100px, transparent 101px),
    radial-gradient(1000px 500px at 50% -10%, #33281f 0%, transparent 70%);
}
/* guirlande lumineuse en haut de page */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:8px; z-index:20;
  background:repeating-linear-gradient(90deg,
    var(--coral) 0 40px, var(--amber) 40px 80px, var(--teal) 80px 120px,
    var(--lime) 120px 160px, var(--pink) 160px 200px, var(--blue) 200px 240px);
  box-shadow:0 2px 14px rgba(255,184,77,.35);
}
.screen{display:none; min-height:100vh; padding:28px 22px; flex-direction:column; align-items:center;}
.screen.active{display:flex;}
button{font-family:inherit;}

/* ---------- logo & titres ---------- */
.logo{font-size:clamp(2.6rem,7vw,4.4rem); font-weight:700; letter-spacing:1px; margin:3vh 0 4px; user-select:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));}
.logo span{display:inline-block; animation:float 2.6s ease-in-out infinite;}
.logo span:nth-child(1){color:var(--coral);  animation-delay:0s}
.logo span:nth-child(2){color:var(--amber);  animation-delay:.12s}
.logo span:nth-child(3){color:var(--teal);   animation-delay:.24s}
.logo span:nth-child(4){color:var(--purple); animation-delay:.36s}
.logo span:nth-child(5){color:var(--lime);   animation-delay:.48s}
.logo span:nth-child(6){color:var(--blue);   animation-delay:.6s}
.logo span:nth-child(7){color:var(--pink);   animation-delay:.72s}
.logo span:nth-child(8){color:var(--coral);  animation-delay:.84s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
.tagline{color:var(--soft); font-size:1.1rem; margin-bottom:26px; text-align:center;}
/* logo wordmark (accueil) : SVG inline pour hériter de la police Fredoka */
.logoMark{width:min(420px,86vw); margin:3vh auto 4px; user-select:none; animation:float 2.6s ease-in-out infinite;}
.logoMark svg, .logoMark img{width:100%; height:auto; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));}
.logoMark.small{width:min(230px,58vw); margin:0 auto 2px;}

/* ---------- cartes ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 24px; width:min(540px,100%); margin-bottom:18px;}
.card h2{font-size:1.15rem; margin-bottom:14px; color:var(--amber);}
.card h2 .emo{font-size:1.4rem; margin-right:6px;}

/* ---------- boutons ---------- */
.btn{display:inline-block; border:var(--border); border-radius:16px; padding:13px 26px;
  font-size:1.1rem; font-weight:700; cursor:pointer; color:#26180A;
  box-shadow:0 6px 0 #191310, 0 12px 22px rgba(0,0,0,.4);
  transition:transform .1s, box-shadow .1s; background:var(--amber);}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 #191310, 0 16px 26px rgba(0,0,0,.4);}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #191310;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn.coral{background:var(--coral); color:#3B0E0E;}
.btn.teal{background:var(--teal); color:#0A2C27;}
.btn.purple{background:var(--purple); color:#221542;}
.btn.big{font-size:1.3rem; padding:16px 36px; border-radius:20px;}
.linkBtn{background:none; border:none; color:var(--soft); text-decoration:underline;
  cursor:pointer; font-size:.95rem; margin-top:10px;}

/* ---------- champs ---------- */
input[type=text], input[type=number], select{
  font-family:inherit; font-size:1.05rem; padding:11px 14px; border:1px solid var(--line);
  border-radius:14px; background:var(--card2); width:100%; color:var(--ink);}
input:focus, select:focus{outline:3px solid var(--amber);}
input::placeholder{color:#7d7060;}
label{font-weight:600; font-size:.95rem; display:block; margin:10px 0 5px; color:var(--soft);}
.row{display:flex; gap:12px;}
.row > *{flex:1;}

/* ---------- avatars ---------- */
.avatars{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.avatars button{font-size:1.5rem; width:52px; height:52px; border-radius:50%;
  border:3px solid transparent; background:var(--card2); cursor:pointer; transition:.12s;}
.avatars button:hover{transform:scale(1.15) rotate(-6deg);}
.avatars button.sel{border-color:var(--amber); background:#4A3A22; transform:scale(1.12);
  box-shadow:0 0 16px rgba(255,184,77,.45);}

/* ---------- thèmes ---------- */
.themes{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:6px;}
.themeChip{border:1px solid var(--line); border-radius:16px; padding:12px 10px; text-align:center;
  cursor:pointer; background:var(--card2); font-weight:600; transition:.12s; user-select:none;}
.themeChip .emo{display:block; font-size:1.7rem; margin-bottom:4px;}
.themeChip:hover{transform:translateY(-3px) rotate(-1deg);}
.themeChip.sel{background:var(--teal); color:#08312B; transform:scale(1.04);
  box-shadow:0 0 18px rgba(45,212,191,.35);}

/* ---------- lobby ---------- */
.roomCode{font-size:clamp(2.6rem,9vw,4rem); letter-spacing:14px; font-weight:700;
  background:#161009; color:var(--amber); border-radius:18px; padding:12px 10px 12px 24px;
  text-align:center; margin:8px 0 4px; box-shadow:var(--shadow), 0 0 30px rgba(255,184,77,.18);
  border:1px solid var(--line);}
.hint{color:var(--soft); text-align:center; font-size:.95rem; margin-bottom:12px;}
.bubbles{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:14px 0;}
.bubble{display:flex; flex-direction:column; align-items:center; gap:4px; animation:pop .35s ease;}
.bubble .face{width:68px; height:68px; border-radius:50%; border:3px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  background:var(--card2); box-shadow:var(--shadow); animation:float 3s ease-in-out infinite;}
.bubble .who{font-weight:600; font-size:.92rem; max-width:90px; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@keyframes pop{from{transform:scale(.3); opacity:0} to{transform:scale(1); opacity:1}}

/* ---------- jeu ---------- */
#gameHead{display:flex; align-items:center; gap:12px; width:min(680px,100%); margin-bottom:12px;}
.chip{border:1px solid var(--line); background:var(--card); border-radius:99px; padding:7px 16px;
  font-weight:700; font-size:.98rem; box-shadow:var(--shadow);}
.chip.theme{background:var(--purple); color:#221542; border-color:transparent;}
#timerWrap{flex:1; height:20px; border:1px solid var(--line); border-radius:99px;
  background:#161009; overflow:hidden;}
#timerBar{height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--lime),var(--amber),var(--coral));
  transition:width 1s linear; box-shadow:0 0 12px rgba(255,184,77,.5);}
#qCard{width:min(680px,100%); text-align:center; padding:26px;}
#qCard.wiggle{animation:wiggle .5s ease;}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1.2deg)}80%{transform:rotate(1.2deg)}}
#bigFlag{font-size:clamp(4rem,16vw,7.5rem); line-height:1.1; margin-bottom:8px;
  animation:float 3s ease-in-out infinite; display:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));}
#bigFlag img{width:clamp(140px,38vw,240px); height:auto; border-radius:12px;
  border:3px solid #12100D; box-shadow:var(--shadow); display:block; margin:0 auto;}
#qText{font-size:clamp(1.25rem,3.4vw,1.7rem); font-weight:700; margin-bottom:20px;}
#answers{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){#answers{grid-template-columns:1fr;}}
.answer{border:var(--border); border-radius:16px; padding:15px 14px; font-size:1.12rem;
  font-weight:700; cursor:pointer; box-shadow:0 5px 0 #191310;
  transition:transform .1s; color:#26180A; text-align:center;}
.answer:nth-child(1){background:#FFCF87;} .answer:nth-child(2){background:#8FE3D5;}
.answer:nth-child(3){background:#CBB8FF;} .answer:nth-child(4){background:#FFB3CE;}
.answer:hover:not(:disabled){transform:translateY(-3px) rotate(-.6deg);}
.answer:disabled{cursor:default;}
.answer.mine{outline:4px dashed var(--ink);}
.answer.good{background:var(--lime) !important; color:#1D3308; animation:tada .7s ease;
  box-shadow:0 5px 0 #191310, 0 0 24px rgba(163,230,53,.5);}
.answer.bad{background:var(--coral) !important; color:#3B0E0E; animation:shakeX .5s ease;}
.answer.off{opacity:.35;}
@keyframes tada{0%{transform:scale(1)}25%{transform:scale(1.12) rotate(3deg)}50%{transform:scale(.96) rotate(-2deg)}75%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

#toasts{position:fixed; bottom:18px; left:18px; display:flex; flex-direction:column; gap:8px; z-index:40;}
.toast{background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:8px 16px;
  font-weight:600; box-shadow:var(--shadow); animation:slideIn .3s ease;}
@keyframes slideIn{from{transform:translateX(-120%);} to{transform:translateX(0);}}

#scorePop{width:min(680px,100%); margin-top:14px;}
.scoreLine{display:flex; align-items:center; gap:10px; padding:8px 6px; font-weight:600;
  border-bottom:2px dashed #4E4034; animation:slideUp .4s ease;}
.scoreLine:last-child{border-bottom:none;}
.scoreLine .gain{margin-left:auto; font-weight:700;}
.scoreLine .gain.plus{color:var(--lime);}
.scoreLine .gain.zero{color:var(--coral);}
@keyframes slideUp{from{transform:translateY(14px); opacity:0} to{transform:translateY(0); opacity:1}}

/* ---------- roue des thèmes ---------- */
#wheelOverlay{position:fixed; inset:0; background:rgba(15,10,7,.82); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:45; flex-direction:column; gap:14px;}
#wheelOverlay.show{display:flex;}
#wheelBox{position:relative; width:min(64vw,300px); height:min(64vw,300px);}
#wheelPointer{position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  font-size:2rem; z-index:5; color:var(--amber);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); animation:float 1.2s ease-in-out infinite;}
#wheelSvg{width:100%; height:100%; border-radius:50%;
  box-shadow:0 0 0 8px #161009, 0 0 40px rgba(255,184,77,.35);
  transition:transform 1.7s cubic-bezier(.12,.65,.18,1);}
#wheelLabel{font-size:1.5rem; font-weight:700; min-height:2.2rem; text-align:center;
  animation:pop .3s ease;}

/* ---------- podium / victoire ---------- */
#winScreen{position:relative; overflow:hidden;}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:5;}
.trophy{font-size:5.4rem; animation:bounceBig 1s ease infinite alternate; z-index:10;
  filter:drop-shadow(0 0 30px rgba(255,184,77,.55));}
@keyframes bounceBig{from{transform:translateY(0) scale(1)}to{transform:translateY(-20px) scale(1.08)}}
#podium{display:flex; align-items:flex-end; gap:14px; margin:20px 0; z-index:10;}
.step{display:flex; flex-direction:column; align-items:center; gap:6px;}
.step .face{font-size:2.6rem; animation:float 2.4s ease-in-out infinite;}
.step .name{font-weight:700;}
.step .pts{font-size:.95rem; color:var(--soft);}
.step .block{width:110px; border:var(--border); border-radius:14px 14px 0 0;
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700;
  box-shadow:var(--shadow); color:#26180A;}
.step.p1 .block{height:130px; background:var(--amber);}
.step.p2 .block{height:95px;  background:#B9AE9C;}
.step.p3 .block{height:70px;  background:#D89B6A;}
#winTitle{font-size:2rem; font-weight:700; z-index:10; text-align:center;}

/* ---------- divers ---------- */
.error{color:var(--coral); font-weight:700; min-height:24px; margin-top:8px; text-align:center;}
.topbar{position:fixed; top:16px; right:16px; display:flex; gap:6px; z-index:30;}
.topbar button{border:2px solid var(--line); background:var(--card); border-radius:12px; color:var(--ink);
  padding:5px 7px; cursor:pointer; box-shadow:var(--shadow); line-height:0; opacity:.72;
  transition:opacity .15s, transform .15s;}
.topbar button img{width:30px; height:auto; border-radius:4px; display:block;}
.topbar button.sel{border-color:var(--amber); background:var(--card2); opacity:1; transform:scale(1.08);}
.topbar button:hover{opacity:1;}
.waiting{font-size:1.1rem; color:var(--soft); text-align:center; animation:float 2s ease-in-out infinite;}

/* ---------- avatars par groupe (enfants / adultes) ---------- */
.avGroupLabel{font-size:.85rem; color:var(--soft); font-weight:700; margin:8px 0 4px;}
.avGroup{display:flex; flex-wrap:wrap; gap:8px;}

/* ---------- QR + partage (lobby) ---------- */
#qrBox{display:flex; justify-content:center; margin:14px 0;}
#qrCanvas{border-radius:14px; box-shadow:var(--shadow); background:#F7EFE2;}
.shareRow{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:10px;}
.shareBtn{border:none; border-radius:14px; padding:10px 14px; cursor:pointer; font-weight:700;
  font-family:inherit; font-size:.95rem; color:#211A16; box-shadow:var(--shadow);}
.shareBtn.wa{background:#25D366;} .shareBtn.mail{background:var(--amber);} .shareBtn.copy{background:var(--teal);}
.shareBtn:active{transform:scale(.95);}

/* ---------- bannière de défi (accueil) ---------- */
.challengeBanner{background:linear-gradient(135deg,var(--coral),var(--amber)); color:#211A16;
  font-weight:700; border-radius:16px; padding:12px 16px; margin:0 auto 14px; max-width:520px;
  text-align:center; box-shadow:var(--shadow); animation:float 2.5s ease-in-out infinite;}

/* ---------- réponse vocale ---------- */
.voiceBtn{display:block; margin:14px auto 0; width:64px; height:64px; border-radius:50%;
  border:var(--border); background:var(--card2); color:var(--ink); font-size:1.7rem; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s;}
.voiceBtn:active{transform:scale(.92);}
.voiceBtn.listening{background:var(--coral); animation:pulse 1s ease-in-out infinite;}
#voiceHint{text-align:center; color:var(--soft); font-size:.9rem; min-height:20px; margin-top:6px;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.6);}50%{box-shadow:0 0 0 14px rgba(255,107,107,0);}}

/* ---------- mascottes (conseils sympas) ---------- */
#mascotLayer{position:fixed; left:12px; bottom:12px; z-index:40; pointer-events:none;}
.mascot{display:flex; align-items:flex-end; gap:8px; max-width:min(320px,82vw);
  transform:translateY(24px) scale(.8); opacity:0; pointer-events:auto; cursor:pointer;
  transition:transform .38s cubic-bezier(.2,1.35,.5,1), opacity .38s;}
.mascot.in{transform:translateY(0) scale(1); opacity:1;}
.mascotFace{font-size:2.7rem; flex-shrink:0; line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); animation:float 2.2s ease-in-out infinite;}
.mascotBubble{background:var(--card2); color:var(--ink); border:2px solid var(--line);
  border-radius:16px 16px 16px 4px; padding:9px 13px; font-size:.95rem; line-height:1.3;
  box-shadow:var(--shadow);}
.mascotName{font-weight:700; color:var(--amber); font-size:.78rem; margin-bottom:2px; letter-spacing:.3px;}
@media(max-width:480px){ .mascotFace{font-size:2.2rem;} .mascotBubble{font-size:.88rem; padding:8px 11px;} }