/* Quiz MS2 — jeu de quiz en direct : tuiles colorées, chrono, points à la rapidité, podium.
   Inspiré des quiz de classe de type « buzzer » ; aucune ressource externe (polices système, SVG maison). */
:root{
  --bg1:#46178f; --bg2:#2b0d63; --card:#fff; --ink:#1f1535; --muted:#6b6485;
  --red:#e0334c; --blue:#1b6fd1; --yellow:#e0a100; --green:#2a9134;
  --ok:#26a653; --ko:#e0334c; --gold:#ffc83d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,Arial,sans-serif;color:#fff;background:var(--bg1);overflow:hidden;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
.app{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:10px 14px;gap:10px;max-width:1280px;margin:0 auto;
  background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.10) 0,transparent 35%),radial-gradient(circle at 90% 90%,rgba(255,255,255,.08) 0,transparent 40%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(160deg,var(--bg1),var(--bg2))}
.deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.deco i{position:absolute;opacity:.07;background:#fff;animation:drift 18s ease-in-out infinite alternate}
.deco .a{width:90px;height:90px;left:6%;top:18%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.deco .b{width:80px;height:80px;right:8%;top:12%;transform:rotate(45deg);animation-duration:22s}
.deco .c{width:100px;height:100px;left:12%;bottom:12%;border-radius:50%;animation-duration:26s}
.deco .d{width:84px;height:84px;right:14%;bottom:20%;animation-duration:20s}
@keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-30px) rotate(20deg)}}
.app>*{position:relative;z-index:1}
.app{overflow-y:auto;overflow-x:hidden}

/* barre du haut */
.top{flex:none;display:flex;align-items:center;gap:8px}
.top .sp{flex:1}
.pill{background:rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-weight:800;font-size:clamp(13px,2vh,17px);white-space:nowrap}
.pill.score{background:#fff;color:var(--ink)}
.ibtn{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:12px;min-width:40px;height:36px;padding:0 10px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ibtn:hover{background:rgba(255,255,255,.28)}
.ibtn:focus-visible,.tile:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chips{display:flex;gap:6px;overflow:hidden}
.chip{border-radius:999px;padding:5px 12px;font-weight:800;font-size:clamp(12px,1.9vh,16px);color:#fff;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.25)}

/* écrans génériques */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;overflow:auto;padding:6px}
.logo{font-weight:900;letter-spacing:-.02em;font-size:clamp(34px,8vh,72px);line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.logo small{display:block;font-size:.38em;letter-spacing:0;font-weight:700;opacity:.9;text-shadow:none;margin-top:8px}
.sub{max-width:60ch;opacity:.92;font-size:clamp(14px,2.3vh,19px)}
.btn{border:0;border-radius:14px;padding:14px 26px;font-weight:900;font-size:clamp(16px,2.8vh,24px);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.28);transition:transform .08s;color:#fff;background:#1368ce}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.btn.white{background:#fff;color:var(--ink)}
.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.gold{background:var(--gold);color:var(--ink)}
.btn.ghost{background:rgba(255,255,255,.16);box-shadow:none}
.btn small{display:block;font-weight:700;font-size:.62em;opacity:.9}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;width:min(780px,100%)}
.mode{padding:22px 18px;border-radius:20px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.mode i{font-style:normal;font-size:clamp(40px,8vh,70px);line-height:1}
.mode b{font-size:clamp(18px,3.2vh,26px)}
.mode span{font-weight:700;font-size:clamp(12px,2vh,15px);opacity:.92}
.card{background:var(--card);color:var(--ink);border-radius:18px;padding:16px 18px;box-shadow:0 8px 0 rgba(0,0,0,.2);width:min(640px,100%);text-align:left}
.card h3{margin:0 0 8px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.opt{border:2px solid #d6cdea;background:#fff;color:var(--ink);border-radius:12px;padding:8px 14px;font-weight:800;cursor:pointer}
.opt.sel{background:var(--bg1);color:#fff;border-color:var(--bg1)}
.tinput{font:inherit;font-weight:800;padding:8px 12px;border:2px solid #d6cdea;border-radius:12px;width:100%;color:var(--ink)}
.teamrow{display:flex;gap:8px;align-items:center;margin:6px 0}
.teamrow .dot{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:900}
.note{font-size:12.5px;opacity:.8;margin:0}

/* écran de jeu */
.qbox{flex:none;background:var(--card);color:var(--ink);border-radius:16px;padding:clamp(8px,1.6vh,16px) 18px;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.22)}
.qbox .q{font-weight:900;font-size:clamp(18px,3.8vh,36px);line-height:1.2}
.qbox .z{font-size:clamp(13px,2.3vh,20px);color:var(--muted);margin-top:2px}
.qbox .wk{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--bg1);border-radius:999px;padding:1px 9px;margin-bottom:4px}
.mid{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.media{flex:1;min-width:0;text-align:center;font-size:clamp(70px,24vh,200px);line-height:1;filter:drop-shadow(0 6px 0 rgba(0,0,0,.2))}
.media.none{font-size:0}
.ring{flex:none;position:relative;width:clamp(64px,13vh,110px);aspect-ratio:1}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .tr{stroke:rgba(255,255,255,.2)}.ring .br{stroke:#fff;stroke-linecap:round;transition:stroke .3s}
.ring.low .br{stroke:var(--gold)}.ring.crit .br{stroke:#ff6b6b}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(22px,4.6vh,40px);font-weight:900}
.side{flex:none;width:clamp(64px,13vh,110px);display:flex;justify-content:flex-end}
.side .ibtn{height:auto;padding:8px 10px;font-size:13px;text-align:center}
.tiles{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;height:min(40vh,340px)}
.tiles.two{height:min(30vh,240px)}
.tile{position:relative;border:0;border-radius:12px;color:#fff;display:flex;align-items:center;gap:12px;padding:8px 14px;text-align:left;cursor:pointer;
  font-weight:800;font-size:clamp(15px,3vh,28px);line-height:1.15;box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .08s,opacity .25s,filter .25s;min-width:0}
.tile:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.tile:disabled{cursor:default}
.tile svg{flex:none;width:clamp(28px,6vh,52px);height:clamp(28px,6vh,52px);fill:#fff}
.tile span{min-width:0;overflow-wrap:anywhere}
.tile .mark{position:absolute;right:10px;top:8px;font-size:clamp(20px,4vh,36px)}
.s0{background:var(--red)}.s1{background:var(--blue)}.s2{background:var(--yellow)}.s3{background:var(--green)}
.tile.ok{animation:pulse .5s}
.tile.dim{opacity:.35;filter:grayscale(.4)}
.tile.bad{opacity:.75}
@keyframes pulse{50%{transform:scale(1.04)}}
.wait{flex:none;height:min(40vh,340px);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(22px,5vh,44px);opacity:.95;animation:blink 1s ease-in-out infinite alternate}
@keyframes blink{from{opacity:.55}to{opacity:1}}

/* bandeau de résultat */
.res{flex:none;border-radius:14px;padding:8px 14px;font-weight:900;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;text-align:center}
.res.ok{background:var(--ok)}.res.ko{background:var(--ko)}.res.to{background:#5b4a8f}
.res big{font-size:clamp(18px,3.6vh,30px)}
.res small{display:block;font-weight:700;font-size:clamp(12px,2vh,16px);opacity:.95}
.award{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.award button{border:0;border-radius:12px;color:#fff;font-weight:900;padding:8px 14px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.28);opacity:.55}
.award button.on{opacity:1;outline:3px solid #fff}
.actions{flex:none;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}

/* fin */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:min(38vh,300px);width:min(560px,100%)}
.podium .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;font-weight:900}
.podium .bar{width:100%;border-radius:12px 12px 0 0;display:grid;place-items:start center;padding-top:6px;font-size:clamp(22px,5vh,44px);animation:rise .8s both}
.podium .nm{font-size:clamp(13px,2.4vh,20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@keyframes rise{from{height:0!important}}
.big{font-size:clamp(40px,12vh,96px);font-weight:900;line-height:1}
.rank{background:rgba(255,255,255,.14);border-radius:14px;padding:8px 16px;text-align:left;min-width:min(380px,100%)}
.rank h3{margin:0 0 4px;text-align:center}
.rank ol{margin:0;padding-left:1.4em}.rank li{display:flex;gap:8px;padding:2px 4px;border-radius:6px}
.rank li b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank li.me{background:rgba(255,200,61,.3)}
.namebox{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(440px,100%)}
.namebox input{flex:1;min-width:150px;border:0;border-radius:12px;padding:12px 14px;font-size:18px;font-weight:800;color:var(--ink)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.confetti i{position:absolute;top:-20px;font-style:normal;font-size:26px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media (max-height:560px){.qbox .wk{display:none}.mid{gap:6px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* écran de résultat : on libère de la place sur les écrans peu hauts */
@media (max-height:820px){
  .rv .mid{display:none}
  .rv .tiles{height:min(27vh,230px)}
  .rv .tiles.two{height:min(20vh,170px)}
  .rv .res big{font-size:clamp(16px,3.2vh,24px)}
  .rv .res small{font-size:12px}
  .rv .qbox .q{font-size:clamp(16px,3vh,28px)}
}

/* ---- défis spéciaux : chrono accéléré / cases effacées ---- */
.wk{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--bg1);border-radius:999px;padding:1px 9px;margin:0 3px 4px}
.wk.fast{background:#ff7a1a}.wk.mask{background:#7a3cff}
.qbox.fast{box-shadow:0 6px 0 rgba(0,0,0,.22),0 0 0 4px #ff7a1a}
.qbox.mask{box-shadow:0 6px 0 rgba(0,0,0,.22),0 0 0 4px #9b6bff}
.wait small{display:block;font-size:.45em;font-weight:800;opacity:.9;margin-top:4px}
.wait.fast{color:#ffb15c;animation:shake .35s infinite alternate}
.wait.mask{color:#cdb4ff}
@keyframes shake{from{transform:translateX(-4px) rotate(-.6deg)}to{transform:translateX(4px) rotate(.6deg)}}
.ring.fastring .br{stroke:#ffb15c}
.ring.fastring b{color:#ffb15c;animation:beat .5s infinite alternate}
@keyframes beat{to{transform:scale(1.18)}}

/* ---- bonus (mode maison) ---- */
.side{flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;width:clamp(70px,13vh,96px)}
.pw{border:0;border-radius:12px;background:var(--gold);color:#2b0d63;font-weight:900;font-size:clamp(13px,2.4vh,18px);padding:8px 10px;min-width:62px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.28)}
.pw:hover:not(:disabled){filter:brightness(1.08)}
.pw:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.pw.used{background:rgba(255,255,255,.18);color:rgba(255,255,255,.55);box-shadow:none;text-decoration:line-through;cursor:default}
.pw.act{background:#fff;color:#2b0d63;animation:glow .8s infinite alternate;text-decoration:none}
@keyframes glow{to{box-shadow:0 0 0 4px rgba(255,200,61,.8)}}
.ibtn.sm{height:30px;min-width:34px;padding:0 6px;font-size:14px}
.tile.gone{visibility:hidden}
.tiles.three .tile:nth-child(3){grid-column:1/-1}
.tiles.three{height:min(40vh,340px)}
@media (max-height:820px){.rv .tiles.three{height:min(27vh,230px)}}

/* écrans très peu hauts (téléphone en paysage, petite fenêtre) */
@media (max-height:520px){
  .app{gap:6px;padding:6px 10px}
  .qbox{padding:6px 12px}.qbox .z{display:none}
  .tiles,.tiles.three{height:min(34vh,150px)}.tiles.two{height:min(26vh,110px)}
  .rv .tiles,.rv .tiles.three{height:min(24vh,100px)}.rv .tiles.two{height:min(20vh,84px)}
  .tile{padding:4px 10px;font-size:clamp(13px,3.4vh,20px)}
  .res{padding:4px 10px;gap:6px}.res small{font-size:11px}
  .btn{padding:8px 18px;font-size:clamp(14px,3.4vh,18px)}
  .wait{height:auto;min-height:60px}
  .pw{padding:5px 8px;font-size:12px;min-width:50px}
  .media{font-size:clamp(50px,20vh,120px)}
}

/* ---- réglages avant la partie ---- */
.card.settings{width:min(760px,100%)}
.card.settings h3{margin:0 0 6px;text-align:center}
.srow{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed #e4dcf3}
.srow:last-child{border-bottom:0}
.srow>label{flex:0 0 150px;font-weight:800;font-size:14px}
.srow .row{flex:1 1 280px;gap:6px}
.shint{flex:1 1 100%;margin:0;font-size:12px;color:var(--muted)}
.opt.sm{padding:5px 10px;font-size:13px;border-radius:10px}
@media (max-width:520px){.srow>label{flex:1 1 100%}}

/* ---- images et plan dans les questions (G3 / G4) ---- */
.media.hasimg{height:100%;display:flex;align-items:center;justify-content:center;font-size:0}
.media .mimg{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:12px;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.mapq{position:relative;height:100%;max-width:100%;aspect-ratio:var(--ar,1.4);border-radius:12px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.25);background:#fff}
.mapq img{display:block;width:100%;height:100%;object-fit:fill}
.mapq .mk{position:absolute;transform:translate(-50%,-100%);font-size:clamp(18px,5vh,34px);filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:mkb 1s ease-in-out infinite}
@keyframes mkb{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-118%)}}
.mapq .hl{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:4px solid #e2532e;box-shadow:0 0 0 6px rgba(226,83,46,.28)}