:root{--bg1:#1b1036;--bg2:#3a1c71;--ink:#fff;--muted:#c9b8ff;--a:#ff4d6d;--b:#4cc9f0;--gold:#ffd166;--card:rgba(255,255,255,.08)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:radial-gradient(circle at 20% 10%,#5b2a9e 0,transparent 40%),radial-gradient(circle at 90% 90%,#7a1f5c 0,transparent 40%),linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;min-height:100vh}
main{padding:24px;max-width:1300px;margin:auto}
h1,h2,h3{margin:.3em 0}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:4vh}
.logo{font-size:clamp(48px,8vw,96px);font-weight:900;letter-spacing:-2px;margin:0;
  background:linear-gradient(90deg,var(--gold),var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-3deg)}
.sub{color:var(--muted);font-size:1.15em;margin:0}
.muted{color:var(--muted)}
.hidden{display:none!important}
.btn{display:inline-block;border:0;border-radius:16px;padding:14px 26px;font:inherit;font-weight:800;font-size:1.1em;cursor:pointer;
  color:#1b1036;background:var(--gold);box-shadow:0 6px 0 #c99a2e;text-decoration:none;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c99a2e}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{font-size:1.3em;padding:18px 30px}
.btn.alt{background:var(--b);box-shadow:0 6px 0 #2b8aa8}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border:2px solid var(--muted)}
.btn small{font-weight:500;font-size:.65em}
.actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{--c:#fff;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:800;
  background:var(--c);color:#1b1036;font-size:1.05em;animation:pop .3s ease}
.chip.off{opacity:.4;filter:grayscale(1)}
.kick{border:0;background:rgba(0,0,0,.2);color:#1b1036;border-radius:50%;width:22px;height:22px;cursor:pointer;font-weight:900;line-height:1}
.timer{position:fixed;top:18px;right:22px;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:900;background:var(--card);border:4px solid var(--gold);z-index:9}
.timer.urgent{border-color:var(--a);color:var(--a);animation:pulse 1s infinite}
/* ---- Écran principal */
.lobby{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;padding-top:3vh}
.join{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.url{font-size:1.6em;font-weight:800;color:var(--b)}
.code-label{margin-top:12px;color:var(--muted);text-transform:uppercase;letter-spacing:3px}
.code{font-size:clamp(64px,9vw,120px);font-weight:900;letter-spacing:12px;color:var(--gold);line-height:1}
.qr{width:200px;height:200px;background:#fff;border-radius:14px;padding:8px;margin-top:10px}
.roster{background:var(--card);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:18px;align-items:center}
.rules{text-align:left;color:var(--muted);align-self:stretch}
.rules ol{margin:6px 0;padding-left:22px;line-height:1.6}
.round{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:2px}
.title{font-size:clamp(36px,5vw,64px)}
.prompt{font-size:clamp(26px,3.6vw,48px);font-weight:900;max-width:1000px;line-height:1.15}
.duel{display:flex;align-items:stretch;gap:24px;width:100%;justify-content:center;margin-top:10px}
.vs{align-self:center;font-size:42px;font-weight:900;color:var(--gold);transform:rotate(-8deg)}
.answer{flex:1;max-width:520px;min-height:180px;border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:center;
  gap:12px;color:#1b1036;font-size:clamp(22px,2.6vw,34px);font-weight:800;animation:slide .4s ease;position:relative}
.answer.a{background:var(--a);transform:rotate(-1.5deg)}
.answer.b{background:var(--b);transform:rotate(1.5deg)}
.answer.empty{opacity:.5;font-style:italic}
.answer.winner{outline:6px solid var(--gold);box-shadow:0 0 50px var(--gold)}
.answer .pts{position:absolute;top:-18px;right:-10px;background:var(--gold);border-radius:14px;padding:4px 12px;font-size:.8em}
.answer .author .chip{background:#1b1036;color:#fff}
.voters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.voters .chip{font-size:.55em;padding:3px 10px}
.banner{font-size:clamp(40px,6vw,80px);font-weight:900;color:var(--gold);transform:rotate(-4deg);animation:pop .5s ease;text-shadow:0 4px 0 #b3492d}
.banner.small{font-size:32px}
.board{display:flex;flex-direction:column;gap:12px;width:min(900px,100%)}
.row{display:grid;grid-template-columns:40px 180px 1fr 80px;align-items:center;gap:12px;font-size:1.2em;font-weight:800}
.row .chip{justify-content:center}
.bar{height:22px;background:rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.fill{height:100%;background:var(--c);border-radius:12px;transition:width 1s ease}
.podium{display:flex;align-items:flex-end;gap:16px}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border-radius:18px 18px 0 0;padding:16px 22px;min-width:150px}
.step.p1{min-height:220px}.step.p2{min-height:170px}.step.p3{min-height:130px}
.medal{font-size:46px}
.center .center{padding-top:0}
/* ---- Téléphone */
.play main,.landing main{max-width:560px;padding:16px}
.top{display:flex;justify-content:space-between;align-items:center;padding-right:70px;min-height:56px}
.top .score{font-weight:800;color:var(--gold)}
.play .timer{width:52px;height:52px;font-size:22px;top:12px;right:12px}
.card{background:var(--card);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;margin-top:10px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--muted)}
input,textarea{font:inherit;font-size:1.2em;padding:14px;border-radius:14px;border:3px solid transparent;background:#fff;color:#1b1036;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.code-input{text-transform:uppercase;letter-spacing:8px;font-weight:900;text-align:center;font-size:1.8em}
textarea{resize:none}
.count{align-self:flex-end;color:var(--muted);font-size:.9em;margin-top:-8px}
.error{color:#ff8fa3;font-weight:700;min-height:1em;margin:0}
.play .prompt{font-size:1.5em}
.vote-wrap{display:flex;flex-direction:column;gap:14px;margin-top:10px;text-align:center}
.vote{border:0;border-radius:20px;padding:24px 18px;font:inherit;font-size:1.3em;font-weight:800;color:#1b1036;cursor:pointer;min-height:110px}
.vote.a{background:var(--a)}.vote.b{background:var(--b)}
.vote:disabled{opacity:.5}
@keyframes pop{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes slide{from{transform:translateY(30px);opacity:0}}
@keyframes pulse{50%{transform:scale(1.1)}}
@media (max-width:900px){.lobby{grid-template-columns:1fr}.duel{flex-direction:column;align-items:center}.answer{width:100%}.row{grid-template-columns:30px 120px 1fr 60px;font-size:1em}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.voters .chip{box-shadow:0 0 0 2px #1b1036}