:root{--bg:#0d0b1e;--bg2:#17133a;--c0:#f72585;--c1:#4cc9f0;--c2:#f8961e;--c3:#7209b7;--green:#4ade80;--red:#ff4d6d;--gold:#ffd60a;--text:#fff;--text2:#c8b8f0;--glass:rgba(255,255,255,.07);--line:rgba(255,255,255,.16);--f:'Fredoka',system-ui,sans-serif;--n:'Nunito',system-ui,sans-serif;--safe-b:env(safe-area-inset-bottom,0px)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--n);background:radial-gradient(1200px 800px at 80% -10%,var(--bg2),var(--bg));background-color:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden;line-height:1.35}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
#app{position:relative;z-index:1;min-height:100vh;min-height:100dvh}
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);animation:float 14s ease-in-out infinite}
.orb1{width:320px;height:320px;background:rgba(247,37,133,.22);top:-90px;right:-60px}
.orb2{width:380px;height:380px;background:rgba(76,201,240,.15);bottom:-120px;left:-90px;animation-delay:-5s}
.orb3{width:260px;height:260px;background:rgba(114,9,183,.3);top:40%;left:55%;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.12)}}
#confetti{position:fixed;inset:0;z-index:90;pointer-events:none;width:100%;height:100%}

/* ── Base ── */
.grow{flex:1}.row{display:flex;align-items:center}.gap{gap:10px}.center{justify-content:center;text-align:center}.wrap{flex-wrap:wrap}
.muted{color:var(--text2)}.small{font-size:.85rem}.err{color:var(--red);font-weight:700;min-height:1.2em;text-align:center;font-size:.92rem}
.hint{color:var(--text2);font-size:.82rem;opacity:.8}
.kicker{font-family:var(--f);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c1)}
.page{max-width:980px;margin:0 auto;padding:16px 16px calc(40px + var(--safe-b));display:flex;flex-direction:column;gap:18px}
.page.narrow{max-width:460px}
.center-page{min-height:100vh;display:grid;place-items:center;padding:20px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:24px;padding:22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:14px;animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.loader{width:46px;height:46px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--c0);border-right-color:var(--c1);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{display:flex;align-items:center;gap:6px}
.brand{font-family:var(--f);font-weight:700;font-size:1.2rem}

/* ── Boutons / champs ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:12px 20px;font-family:var(--f);font-weight:600;font-size:1.05rem;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s;background:var(--glass);border:1.5px solid var(--line);color:#fff;text-align:center;user-select:none}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:linear-gradient(135deg,var(--c0),var(--c3));border-color:transparent;box-shadow:0 6px 24px rgba(247,37,133,.35)}
.btn.accent{background:linear-gradient(135deg,var(--c2),var(--c0));border-color:transparent;box-shadow:0 6px 24px rgba(248,150,30,.3)}
.btn.danger{background:var(--red);border-color:transparent}
.btn.ghost{background:transparent}
.btn.link{background:none;border:0;padding:8px 10px;color:var(--text2);font-weight:600}
.btn.big{font-size:1.35rem;padding:16px 26px;border-radius:20px;width:100%}
.btn.small{font-size:.9rem;padding:8px 14px;border-radius:12px}
.btn.dirty{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 24px rgba(247,37,133,.35)}50%{box-shadow:0 0 0 8px rgba(247,37,133,.15),0 6px 24px rgba(247,37,133,.6)}}
.icon-btn{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--glass);cursor:pointer;font-size:1.1rem;transition:transform .15s,background .2s}
.icon-btn:hover{background:rgba(255,255,255,.14)}.icon-btn:active{transform:scale(.9)}.icon-btn.danger:hover{background:var(--red)}
.inp{width:100%;background:rgba(255,255,255,.08);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;font-weight:700;font-size:1.05rem;transition:border-color .2s,background .2s}
.inp:focus{outline:0;border-color:var(--c1);background:rgba(255,255,255,.12)}.inp::placeholder{color:rgba(255,255,255,.35);font-weight:400}
textarea.inp{resize:vertical;min-height:64px;font-family:var(--n)}
select{background:rgba(255,255,255,.1);border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer}
select option{background:#1d1848;color:#fff}
.tabs{display:flex;background:rgba(0,0,0,.25);border-radius:14px;padding:4px}
.tabs button{flex:1;border:0;background:none;padding:10px;border-radius:11px;font-family:var(--f);font-weight:600;cursor:pointer;color:var(--text2)}
.tabs button.on{background:var(--glass);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3)}

/* ── Toasts / modales ── */
#toasts{position:fixed;left:0;right:0;bottom:calc(20px + var(--safe-b));z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:#241f4f;border:1px solid var(--line);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:rise .3s both;max-width:92vw}
.toast.ok{border-color:var(--green)}.toast.err{border-color:var(--red)}.toast.out{opacity:0;transform:translateY(10px);transition:.4s}
.modal{position:fixed;inset:0;z-index:150;background:rgba(5,3,15,.7);display:grid;place-items:center;padding:20px;animation:rise .2s both}
.modal-card{max-width:380px;width:100%}.modal-text{font-weight:700;font-size:1.1rem;text-align:center}.modal-card .row>*{flex:1}

/* ── Avatars / logo ── */
.avatar{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;font-size:1.4rem;flex:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.35)}
.avatar.lg{width:58px;height:58px;font-size:1.9rem}.avatar.xl{width:84px;height:84px;font-size:2.7rem;border:0;cursor:default}.avatar.mega{width:130px;height:130px;font-size:4.4rem}
.avatar.pick{cursor:pointer;background:var(--glass)}.avatar.spin{animation:wobble .5s}
@keyframes wobble{0%{transform:scale(.6) rotate(-30deg)}60%{transform:scale(1.2) rotate(8deg)}100%{transform:none}}
.bounce{animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.logo{font-family:var(--f);font-weight:700;font-size:clamp(3.2rem,12vw,5.6rem);line-height:.95;text-align:center;display:flex;flex-direction:column}
.logo span{background:linear-gradient(135deg,var(--c0),var(--c1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;animation:logo-in .8s cubic-bezier(.34,1.56,.64,1) both}
.logo span:nth-child(2){animation-delay:.15s;background:linear-gradient(135deg,var(--c2),var(--c0));-webkit-background-clip:text;background-clip:text}
.logo.small{font-size:2.6rem;flex-direction:row;gap:.3em;justify-content:center}
@keyframes logo-in{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.hero{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 4px}.hero.small{padding:0}
.tagline{color:var(--text2);font-weight:700;text-align:center;max-width:30ch}

/* ── Accueil / rejoindre ── */
.home .join-card,.join-card{max-width:440px;width:100%;margin:0 auto}
.code-inp{text-align:center;font-family:var(--f);font-size:2rem;letter-spacing:.35em;text-transform:uppercase;padding-left:calc(16px + .35em)}
.join-info{min-height:1.3em;text-align:center;font-weight:700;font-size:.95rem}.join-info.ok{color:var(--green)}.join-info.ko{color:var(--red)}
.cta{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:440px;width:100%;margin:0 auto}
.features{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:640px;margin:8px auto 0}
.features li{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:2px;font-size:.82rem;color:var(--text2);font-size:clamp(.72rem,2.6vw,.85rem)}
.features li:first-letter{font-size:1.8rem}.features b{color:#fff;font-family:var(--f)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.page-head h1{font-family:var(--f);font-size:2rem}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.quiz-card{animation-delay:calc(var(--i)*60ms)}.quiz-card h3{font-family:var(--f);font-size:1.3rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips span{background:rgba(255,255,255,.1);padding:3px 10px;border-radius:99px;font-size:.8rem;font-weight:700;color:var(--text2)}
.empty{align-items:center;text-align:center;padding:40px 20px}.big-emoji{font-size:4rem;animation:bounce 2s infinite}

/* ── Éditeur ── */
.editor .ed-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin:0 -12px;background:rgba(13,11,30,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ed-bar h1{font-family:var(--f);font-size:1.25rem}
.ed-bar .btn{padding:9px 14px;font-size:.95rem}
.ed-meta .title{font-family:var(--f);font-size:1.4rem}
.tcard{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:12px;animation:rise .4s both}
.tcard-head{display:flex;gap:8px;align-items:center}.emoji-sel{font-size:1.5rem;padding:6px}.theme-name{font-family:var(--f);font-size:1.25rem}
.qcard{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px}
.qcard-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.qnum{font-family:var(--f);color:var(--c1);font-weight:600}.timer-sel{font-size:.9rem}
.qcard-head .icon-btn{min-width:34px;height:34px;font-size:.95rem}
.img-zone{border:2px dashed var(--line);border-radius:16px;padding:10px;display:grid;place-items:center;min-height:56px;position:relative}
.img-zone.has{border-style:solid;padding:6px}.img-zone img{max-width:100%;max-height:200px;border-radius:12px;display:block}
.img-zone .rm{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6)}
.img-zone.busy::after{content:'';position:absolute;inset:0;border-radius:16px;background:rgba(13,11,30,.7) center/36px no-repeat}
.img-zone.busy{animation:pulse 1s infinite}
.ans-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ans-row{display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;border:2px solid transparent;background:rgba(0,0,0,.2)}
.ans-row.ok{border-color:var(--green);background:rgba(74,222,128,.1)}
.ans-row .inp{padding:10px 12px;font-size:.95rem}
.radio{position:relative;flex:none}.radio input{position:absolute;opacity:0;inset:0;cursor:pointer}
.radio span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-family:var(--f);font-weight:700}
.ans-row.c0 .radio span{background:var(--c0)}.ans-row.c1 .radio span{background:var(--c1);color:#0d0b1e}.ans-row.c2 .radio span{background:var(--c2);color:#0d0b1e}.ans-row.c3 .radio span{background:var(--c3)}
.ans-row.ok .radio span{background:var(--green);color:#0d0b1e;transform:scale(1.1)}
.add-q,.add-theme{align-self:stretch}
@media(max-width:640px){.ans-list{grid-template-columns:1fr}.editor .ed-bar{margin:0 -16px;padding:10px 16px}}

/* ═══════ ÉCRAN GÉANT ═══════ */
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:14px 22px 18px}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px}
.code-chip,.theme-chip,.qn{background:var(--glass);border:1px solid var(--line);padding:6px 14px;border-radius:99px;font-weight:800;font-size:.95rem}
.code-chip b{font-family:var(--f);letter-spacing:.2em;color:var(--c1);font-size:1.15rem}
.conn-dot{width:12px;height:12px;border-radius:50%;background:var(--red)}.conn-dot.on{background:var(--green);box-shadow:0 0 10px var(--green)}
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;animation:stage-in .5s both;min-height:0}
@keyframes stage-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.host-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);margin-top:10px}
.host-bar .btn.big{width:auto;min-width:260px;font-size:1.25rem;animation:pulse 2s infinite}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;color:var(--text2)}
.switch input{appearance:none;width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.18);position:relative;transition:.2s;cursor:pointer}
.switch input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked{background:var(--green)}.switch input:checked::after{left:23px}

/* Lobby */
.lobby{display:grid;grid-template-columns:minmax(300px,1fr) 1.2fr;gap:28px;align-items:center}
.lobby-left{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lobby-left .kicker{font-size:1.2rem}
.big-label{color:var(--text2);font-weight:800}
.big-code{display:flex;gap:8px}
.big-code span{font-family:var(--f);font-weight:700;font-size:clamp(2.6rem,7vw,5rem);line-height:1;min-width:1.05em;text-align:center;padding:.12em .1em;border-radius:.2em;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid var(--line);animation:pop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i)*.09s);color:var(--c1)}
.big-code.small span{font-size:2.2rem}.big-code.small{justify-content:center}
@keyframes pop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.qr-box{display:flex;gap:14px;align-items:center;background:var(--glass);border:1px solid var(--line);padding:12px;border-radius:20px}
.qr-box img{background:#fff;border-radius:12px;padding:6px;width:150px;height:150px}.join-url{font-family:var(--f);font-weight:600;font-size:1.1rem;word-break:break-all}
.share-row{display:flex;gap:8px;flex-wrap:wrap}.btn.share{padding:8px 14px;font-size:.9rem;border-radius:12px}
.btn.share.wa{background:#25d366;color:#06240f;border-color:transparent}.btn.share.fb{background:#1877f2;border-color:transparent}.btn.share.ms{background:linear-gradient(135deg,#0099ff,#a033ff,#ff5280);border-color:transparent}.btn.share.x{background:#000}
.link{color:var(--c1);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.lobby-right{display:flex;flex-direction:column;gap:14px;align-items:center;min-height:50vh;justify-content:center}
.lobby-count{font-family:var(--f);font-size:1.5rem;color:var(--text2)}
.bubbles{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-height:52vh;overflow:auto;padding:10px;width:100%}
.bubble{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;position:relative;max-width:96px;animation:bubble-in .7s cubic-bezier(.34,1.56,.64,1) both;transform:rotate(var(--r))}
.bubble>span{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.bubble.off{opacity:.4}.bubble.bye{transition:.3s;transform:scale(0);opacity:0}
.bubble .kick{position:absolute;top:-6px;right:-2px;width:22px;height:22px;border-radius:50%;border:0;background:var(--red);cursor:pointer;opacity:0;transition:.2s}.bubble:hover .kick{opacity:1}
@keyframes bubble-in{from{transform:scale(0) translateY(60px) rotate(var(--r));opacity:0}to{transform:rotate(var(--r));opacity:1}}
.bubble:nth-child(odd){animation-name:bubble-in,wiggle;animation-duration:.7s,4s;animation-delay:0s,1s;animation-iteration-count:1,infinite}
@keyframes wiggle{0%,100%{transform:rotate(var(--r)) translateY(0)}50%{transform:rotate(calc(var(--r)*-1)) translateY(-6px)}}
.start-btn{width:auto!important;min-width:280px;animation:pulse 2s infinite}

/* Intro de thème */
.intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.intro-emoji{font-size:clamp(5rem,18vw,10rem);animation:intro-emoji 1.2s cubic-bezier(.34,1.56,.64,1) both}
@keyframes intro-emoji{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.2) rotate(10deg)}100%{transform:none}}
.intro-kicker{font-family:var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--c1);animation:rise .6s .4s both}
.intro-name{font-family:var(--f);font-size:clamp(2.2rem,8vw,5rem);background:linear-gradient(135deg,var(--c0),var(--c2),var(--c1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rise .7s .6s both;max-width:90vw;overflow-wrap:anywhere}
.intro-sub{color:var(--text2);font-weight:800;animation:rise .6s .9s both}

/* Question */
.qview{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;min-height:0}
.qview:has(.mini-board){grid-template-columns:1fr minmax(240px,300px)}
.qmain{display:flex;flex-direction:column;gap:14px;min-width:0}
.qhead{display:flex;align-items:center;gap:16px}
.qtext{font-family:var(--f);font-weight:600;font-size:clamp(1.4rem,3.4vw,2.6rem);line-height:1.2;flex:1;animation:rise .5s both;overflow-wrap:anywhere}
.ring{position:relative;width:84px;height:84px;flex:none}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}.ring-fg{fill:none;stroke:url(#g);stroke:var(--c1);stroke-width:9;stroke-linecap:round;transition:stroke .3s}
.ring.hot .ring-fg{stroke:var(--red)}.ring.hot{animation:shake .5s infinite}
.ring-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f);font-weight:700;font-size:2rem}
.ring.done{display:grid;place-items:center;font-size:2.4rem;color:var(--green);background:rgba(74,222,128,.15);border-radius:50%}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}
.q-img{display:grid;place-items:center;background:rgba(0,0,0,.25);border-radius:20px;padding:6px;animation:img-in .6s both}
.q-img img{max-width:100%;max-height:34vh;border-radius:16px;object-fit:contain;display:block}
@keyframes img-in{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answers.n2{grid-template-columns:1fr 1fr}
.tile{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;border:0;border-radius:18px;padding:18px 18px;font-family:var(--f);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.8rem);text-align:left;color:#fff;cursor:default;animation:tile-in .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i)*.1s + .15s);box-shadow:0 6px 0 rgba(0,0,0,.28);min-height:72px}
button.tile{cursor:pointer;transition:transform .12s,box-shadow .12s}button.tile:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
@keyframes tile-in{from{opacity:0;transform:translateX(-40px) scale(.9)}to{opacity:1;transform:none}}
.tile.c0{background:var(--c0)}.tile.c1{background:#1b9ac9}.tile.c2{background:#d97d0c}.tile.c3{background:var(--c3)}
.tile .shape{font-size:1.5em;line-height:1;opacity:.9;flex:none}.tile .txt{flex:1;overflow-wrap:anywhere;position:relative;z-index:1}
.tile .cnt{font-size:1.4em;position:relative;z-index:1;background:rgba(0,0,0,.28);border-radius:12px;padding:0 12px}
.tile .bar{position:absolute;left:0;bottom:0;height:7px;width:100%;background:rgba(255,255,255,.7);transform-origin:left;transition:transform 1s .3s cubic-bezier(.2,.8,.2,1)}
.tile.wrong{filter:grayscale(.85) brightness(.6);transform:scale(.97);transition:.5s}
.tile.correct{animation:correct .8s both;box-shadow:0 0 0 5px var(--green),0 0 40px rgba(74,222,128,.7)}
.tile .check{font-size:1.8em;color:#fff;background:var(--green);width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;animation:pop .5s .2s both;flex:none}
@keyframes correct{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.tile.mine{outline:4px solid #fff;outline-offset:2px}
.progress{font-family:var(--f);color:var(--text2);text-align:center;font-size:1.2rem}
.mini-board{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:8px;animation:rise .6s .3s both}
.mini-board h3{font-family:var(--f);color:var(--c1)}
.mini-row{display:flex;align-items:center;gap:10px;font-weight:800;animation:slide-r .5s both;animation-delay:calc(var(--i)*.1s + .5s)}
.mini-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-row .rk{font-family:var(--f);width:1.2em;color:var(--gold)}.mini-row .sc{font-family:var(--f);color:var(--c1)}
.mini-row .avatar{width:34px;height:34px;font-size:1.1rem}
@keyframes slide-r{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* Podium */
.podium-view{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 10px;width:100%;max-width:900px;margin:0 auto}
.pod-title{font-family:var(--f);font-size:clamp(1.8rem,5vw,3.4rem);text-align:center;animation:rise .6s both;background:linear-gradient(135deg,var(--gold),var(--c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vw,18px);width:100%;min-height:clamp(250px,42vh,420px);margin-top:6px}
.pod-col{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;--h:130px}
.pod-col.place1{--h:clamp(150px,26vh,260px)}.pod-col.place2{--h:clamp(110px,19vh,190px)}.pod-col.place3{--h:clamp(80px,14vh,140px)}
.pod-who{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;max-width:100%;opacity:0;animation:drop .8s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--d) + .6s)}
@keyframes drop{from{opacity:0;transform:translateY(-120px) scale(.5)}to{opacity:1;transform:none}}
.pod-name{font-family:var(--f);font-weight:600;font-size:clamp(1rem,2.4vw,1.6rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-score{font-weight:800;color:var(--c1)}
.pod-crown{font-size:2.4rem;height:2.4rem;animation:bounce 1.4s infinite;margin-bottom:-8px}
.pod-who .avatar.xl{width:clamp(56px,10vw,96px);height:clamp(56px,10vw,96px);font-size:clamp(1.8rem,5vw,3.2rem)}
.pod-bar{width:100%;height:0;border-radius:18px 18px 0 0;display:grid;place-items:start center;padding-top:10px;font-size:clamp(1.8rem,5vw,3rem);animation:grow 1s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d);margin-top:8px}
@keyframes grow{to{height:var(--h)}}
.place1 .pod-bar{background:linear-gradient(180deg,#ffd60a,#c98d00)}.place2 .pod-bar{background:linear-gradient(180deg,#d9dde6,#8e94a3)}.place3 .pod-bar{background:linear-gradient(180deg,#e0955a,#a05a28)}
.place1 .pod-who{animation-name:drop,glow}.pod-col.me .pod-name{color:var(--gold)}
@keyframes glow{}
.rank-list{list-style:none;width:100%;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rank-row{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:6px 14px 6px 10px;font-weight:800;animation:slide-r .5s both;animation-delay:calc(3s + var(--i)*70ms)}
.rank-row.me{border-color:var(--gold);background:rgba(255,214,10,.12)}
.rank-row .rk{font-family:var(--f);width:1.8em;text-align:center;color:var(--gold);font-size:1.2rem}
.rank-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-row .sc{font-family:var(--f);font-size:1.2rem;color:var(--c1)}
.rank-row .avatar{width:38px;height:38px;font-size:1.2rem}
.delta{color:var(--green);font-size:.9rem}.move{font-size:.85rem;font-weight:800}.move.up{color:var(--green)}.move.down{color:var(--red)}
.final-actions{margin-top:16px;animation:rise .6s 4s both}

/* ═══════ JOUEUR (mobile) ═══════ */
.player{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:10px 14px calc(14px + var(--safe-b));gap:10px;max-width:640px;margin:0 auto}
.p-head{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:6px 8px 6px 8px}
.p-me{display:flex;align-items:center;gap:8px;font-weight:800;flex:1;min-width:0}.p-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-me .avatar{width:38px;height:38px;font-size:1.2rem}
.p-score{display:flex;flex-direction:column;align-items:flex-end;line-height:1}.p-score small{color:var(--text2);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.p-score b{font-family:var(--f);font-size:1.4rem;color:var(--c1)}
.p-status{display:none;text-align:center;background:var(--red);border-radius:12px;padding:6px;font-weight:800}.p-status.show{display:block}
.p-body{flex:1;display:flex;flex-direction:column;animation:stage-in .4s both}
.p-body.still,.p-body.still *{animation:none!important}
.p-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.p-center h2{font-family:var(--f);font-size:1.8rem}
.dots::after{content:'...';display:inline-block;width:1.2em;text-align:left;animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
.mini-bubbles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:1.6rem;max-width:300px;margin-top:8px}.mini-bubbles span{animation:pop .5s both}
.p-q{flex:1;display:flex;flex-direction:column;gap:10px}
.p-qtop{display:flex;align-items:center;justify-content:space-between}.p-qtop .ring{width:64px;height:64px}.p-qtop .ring-num{font-size:1.5rem}
.p-qtext{font-family:var(--f);font-weight:600;font-size:1.35rem;line-height:1.25;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:14px 16px;animation:rise .4s both}
.p-q .q-img img{max-height:24vh}
.p-q .answers{grid-template-columns:1fr;gap:10px;flex:1;align-content:stretch}
.p-q .tile{min-height:64px;font-size:1.15rem;padding:12px 16px}
.p-q .answers.n4,.p-q .answers.n3{grid-template-columns:1fr 1fr}
@media(max-width:380px){.p-q .answers.n4,.p-q .answers.n3{grid-template-columns:1fr}}
.p-q .answers.n4 .tile,.p-q .answers.n3 .tile{flex-direction:column;justify-content:center;text-align:center;gap:4px;min-height:96px}
.p-q .tile .shape{font-size:1.4rem}
.locked-msg{text-align:center;font-weight:800;color:var(--green);background:rgba(74,222,128,.12);border-radius:14px;padding:8px}
.p-q .tile:not(.mine):not(button){opacity:.45}
.result .res-icon{font-size:6rem;animation:res-pop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes res-pop{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
.result.good h2{color:var(--green)}.result.bad h2{color:var(--red)}
.pts{font-family:var(--f);font-weight:700;font-size:3rem;color:var(--gold);animation:pop .6s .2s both}.pts small{font-size:.9rem;color:var(--text2);font-weight:700}
.streak{background:linear-gradient(135deg,#ff6b00,#f72585);padding:4px 14px;border-radius:99px;font-weight:800;animation:pop .5s .5s both}
.res-score{display:flex;flex-direction:column;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:10px 40px}.res-score small{color:var(--text2);text-transform:uppercase;font-size:.7rem;letter-spacing:.12em}
.big-score{font-family:var(--f);font-size:2.8rem;color:var(--c1)}.res-rank{font-family:var(--f);font-size:1.3rem;color:var(--text2)}
.good-answer{background:rgba(74,222,128,.14);border:1px solid var(--green);border-radius:14px;padding:8px 14px}
.p-podium{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.my-rank{font-family:var(--f);font-size:2rem;font-weight:700;color:var(--gold);animation:pop .6s .2s both}
.p-podium .podium{min-height:260px}.p-podium .pod-bar{font-size:2rem}.p-podium .rank-row{animation-delay:calc(3s + var(--i)*50ms)}

/* ── Impression du classement ── */
@media print{body{background:#fff!important;color:#000}.orb,.topbar,.host-bar,.final-actions,#confetti,#toasts{display:none!important}.rank-row,.pod-score,.pod-name{color:#000!important;background:none!important;border-color:#999!important;animation:none!important;opacity:1!important}.pod-who,.pod-bar{animation:none!important;opacity:1!important;height:auto}.pod-bar{height:var(--h)!important}.pod-title,.kicker{-webkit-text-fill-color:#000;color:#000}}

/* ── Responsive grand écran / mobile ── */
@media(max-width:860px){
  .lobby{grid-template-columns:1fr}.lobby-right{min-height:0}.qview:has(.mini-board){grid-template-columns:1fr}
  .screen{padding:10px 12px}.qr-box img{width:110px;height:110px}.answers{gap:8px}
}
@media(max-width:560px){.qhead{flex-wrap:wrap}.features{grid-template-columns:1fr 1fr 1fr}.host-bar .btn.big{min-width:0;flex:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pod-who{opacity:1}.pod-bar{height:var(--h)}}

.emo{-webkit-text-fill-color:initial;display:inline-block}
.p-q .answers.n4 .tile .txt,.p-q .answers.n3 .tile .txt{flex:0 1 auto}