/* GENERE depuis play.css (scope html.narrow) — ne pas éditer à la main */
html.narrow{font-size:18px}
html.narrow #ui{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100dvh)}
html.narrow .screen{padding:calc(64px + 8px) 18px 18px;overflow-y:auto;align-items:center;gap:14px;text-align:center}
html.narrow .pbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 70px 8px 12px;background:rgba(10,18,48,.85);backdrop-filter:blur(6px);border-bottom:3px solid rgba(255,255,255,.12);height:56px}
html.narrow .pbar .jersey{font-size:38px}
html.narrow .pbar .nm{flex:1;font-size:1.25rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
html.narrow .pbar .sc{font-family:var(--f-display);font-size:1.5rem;color:var(--yellow)}
html.narrow .pbar .rk{font-family:var(--f-display);font-size:1rem;background:var(--chalk);color:var(--ink);border-radius:6px;padding:0 .4em;white-space:nowrap}
html.narrow .pbar .rk small{font-size:.6em;margin-left:.2em;opacity:.7}
html.narrow .mute{width:42px;height:42px;top:7px;right:8px;font-size:1.1rem}
html.narrow .join{justify-content:flex-start;padding-top:56px;gap:8px}
html.narrow .join .logo{font-family:var(--f-display);font-size:2.4rem;line-height:.9;transform:rotate(-3deg);text-shadow:0 5px 0 #0a1230;margin:6px 0}
html.narrow .join .logo span{color:var(--yellow)}
html.narrow .join form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;flex:1}
html.narrow .join label{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:left;display:block;margin-bottom:3px}
html.narrow .preview{font-size:3.6rem;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));transition:transform .2s var(--ease-pop)}
html.narrow .preview.b{animation:bounce .5s var(--ease-pop)}
html.narrow .sw{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
html.narrow .sw button{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.3);cursor:pointer;transition:transform .15s var(--ease-pop)}
html.narrow .sw button.on{border-color:#fff;transform:scale(1.2);box-shadow:0 0 0 3px var(--yellow)}
html.narrow .num{display:flex;align-items:center;justify-content:center;gap:14px}
html.narrow .num button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.8rem;font-family:var(--f-display);cursor:pointer}
html.narrow .num output{font-family:var(--f-display);font-size:2.6rem;min-width:2.2em}
html.narrow .err{color:#ff8a8a;min-height:1.3em;font-size:1.1rem}
html.narrow .center{justify-content:center}
html.narrow .big-jersey{font-size:9rem;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));animation:floaty_n 2s ease-in-out infinite}
@keyframes floaty_n{50%{transform:translateY(-10px) rotate(3deg)}}
html.narrow .big-title{font-size:2.6rem}
html.narrow .sub{color:var(--chalk);font-size:1.3rem;background:rgba(10,18,48,.6);padding:.2em .8em;border-radius:99px}
html.narrow .intro{justify-content:center;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--lvl) 65%,transparent),transparent 70%)}
html.narrow .intro .bignum{font-family:var(--f-display);font-size:10rem;line-height:1;text-shadow:0 6px 0 #0a1230}
html.narrow .intro .bignum.tick{animation:tickPop_n .5s var(--ease-pop)}
@keyframes tickPop_n{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
html.narrow .intro .cat{font-size:2rem;text-shadow:0 3px 0 #0a1230}
html.narrow .intro .lvl{font-size:1.6rem}
html.narrow .qn{font-family:var(--f-display);font-size:1.4rem;background:var(--chalk);color:var(--ink);padding:.1em .6em;border-radius:6px;transform:rotate(-2deg)}
html.narrow .qtimer{position:fixed;top:56px;left:0;right:0;height:10px;background:rgba(255,255,255,.15);z-index:15}
html.narrow .qtimer i{display:block;height:100%;width:100%;background:var(--grass-lt);transform-origin:left}
html.narrow .qtimer.low i{background:var(--red)}
html.narrow .qhead{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
html.narrow .qtext{background:var(--chalk);color:var(--ink);border-radius:16px;padding:14px 16px;font-size:1.45rem;font-weight:700;line-height:1.12;border-bottom:8px solid var(--lvl);width:100%;max-width:560px;animation:pop .45s var(--ease-pop) both}
html.narrow .qimg{max-width:100%;max-height:32vh;border-radius:12px;border:3px solid var(--chalk)}
html.narrow .ans-form{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px;margin-top:auto}
html.narrow .ans-form input{font-size:1.5rem}
html.narrow .secs{font-family:var(--f-display);font-size:2rem}
html.narrow .locked{justify-content:center}
html.narrow .locked .mine{background:rgba(255,255,255,.12);padding:.5em 1em;border-radius:14px;font-size:1.6rem;font-weight:700;max-width:100%;word-break:break-word}
html.narrow .dots span{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--yellow);margin:0 4px;animation:dot_n 1s infinite}
html.narrow .dots span:nth-child(2){animation-delay:.15s}
html.narrow .dots span:nth-child(3){animation-delay:.3s}
@keyframes dot_n{50%{transform:translateY(-10px);opacity:.4}}
html.narrow .res{justify-content:center;width:100%}
html.narrow .res.ok{background:radial-gradient(circle,rgba(34,197,94,.7),transparent 70%)}
html.narrow .res.ko{background:radial-gradient(circle,rgba(255,59,74,.55),transparent 70%)}
html.narrow .res.check{background:radial-gradient(circle,rgba(255,210,31,.5),transparent 70%)}
html.narrow .res .icon{font-size:7rem;line-height:1;animation:stamp_n .5s var(--ease-pop) both}
@keyframes stamp_n{from{transform:scale(2.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
html.narrow .res .title{font-size:2.6rem}
html.narrow .res .gain{font-family:var(--f-display);font-size:4rem;color:var(--yellow);text-shadow:0 4px 0 #0a1230;animation:pop .6s var(--ease-pop) .2s both}
html.narrow .res .corr{background:var(--chalk);color:var(--ink);padding:.3em .9em;border-radius:12px;font-size:1.5rem;max-width:100%;word-break:break-word}
html.narrow .res .corr small{display:block;color:#4a5a8a;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
html.narrow .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
html.narrow .chip{background:rgba(10,18,48,.8);border:3px solid rgba(255,255,255,.18);padding:.1em .7em;border-radius:99px;font-size:1.2rem}
html.narrow .chip.fire{border-color:var(--orange);color:var(--orange)}
html.narrow .fact{font-size:1.1rem;color:var(--muted);max-width:480px}
html.narrow .pdm{justify-content:flex-start}
html.narrow .pdm .rankbig{font-family:var(--f-display);font-size:7rem;line-height:1;color:var(--yellow);text-shadow:0 6px 0 #0a1230;animation:stamp_n .6s var(--ease-pop) both}
html.narrow .pdm .list{width:100%;max-width:480px;display:flex;flex-direction:column;gap:6px}
html.narrow .pdm .row.me{background:var(--yellow);color:var(--ink)}
html.narrow .pdm .row.me .sc{color:var(--ink)}
html.narrow .row .jersey{font-size:1.8rem}
html.narrow .fixedmsg{position:fixed;inset:0;z-index:80;background:rgba(10,18,48,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
html.narrow .conn{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:70;background:var(--red);color:#fff;font-family:var(--f-display);padding:.2em .9em;border-radius:99px;font-size:.95rem}
html.narrow .join .field{font-size:1.5rem;padding:.35em .6em}
html.narrow .join .field.pin{font-size:1.9rem}
html.narrow .pinchip{display:flex;align-items:center;justify-content:center;gap:.6em;font-size:1.15rem;background:rgba(10,18,48,.7);border:3px solid rgba(255,255,255,.18);border-radius:99px;padding:.2em .5em .2em 1em;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
html.narrow .pinchip b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:var(--yellow);letter-spacing:.15em}
html.narrow .pinchip button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:99px;padding:.15em .7em;font-size:.95rem;cursor:pointer;font-family:inherit}
html.narrow .gobar{position:sticky;bottom:0;margin:auto -18px -18px;padding:10px 18px 18px;background:linear-gradient(180deg,transparent,rgba(10,18,48,.92) 40%);display:flex;justify-content:center}
html.narrow .gobar .btn{width:100%;max-width:420px;font-size:1.8rem}
html.narrow .join .sw button{width:36px;height:36px}
html.narrow .join .num button{width:46px;height:46px}
html.narrow .join .num output{font-size:2.2rem}
html.narrow body.kb .screen.question{padding-top:62px;gap:6px}
html.narrow body.kb .question .qhead,html.narrow body.kb .question .qimg{display:none}
html.narrow body.kb .question .qtext{font-size:1.1rem;padding:8px 12px;border-bottom-width:5px}
html.narrow body.kb .question .ans-form{margin-top:4px;gap:8px}
html.narrow body.kb .question .ans-form input{font-size:1.3rem;padding:.3em .5em}
html.narrow body.kb .question .ans-form .btn{font-size:1.4rem;padding:.3em 1em}
html.narrow body.kb .join{padding-top:50px}
html.narrow body.kb .join .preview,html.narrow body.kb .join .logo{display:none}
html.narrow .qimg.flip{animation:flipIn_n .5s var(--ease-pop)}
@keyframes flipIn_n{from{transform:scale(.92);filter:brightness(2)}to{transform:none;filter:none}}
html.narrow .qimg{background:rgba(255,255,255,.05);object-fit:contain}
html.narrow .question .secs{min-width:1.3em;display:inline-block;transition:color .2s}
html.narrow .question .secs.tk{animation:secTick_n .5s var(--ease-pop)}
@keyframes secTick_n{from{transform:scale(1.9)}to{transform:none}}
html.narrow .question.urgent .secs{color:#ff6b6b}
html.narrow .question.urgent::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;box-shadow:inset 0 0 0 4px rgba(255,59,59,.65),inset 0 0 60px rgba(255,59,59,.45);animation:urg_n .8s ease-in-out infinite alternate}
@keyframes urg_n{from{opacity:.35}to{opacity:1}}
html.narrow .qtimer.low{animation:lowBar_n .5s ease-in-out infinite alternate}
@keyframes lowBar_n{from{opacity:.55}to{opacity:1}}
html.narrow .lockbox{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:auto;margin-bottom:auto;width:100%;max-width:560px}
html.narrow .lockball{position:relative;width:84px;height:84px;display:grid;place-items:center}
html.narrow .lk-ball{font-size:3.2rem;animation:lkBounce_n 1s cubic-bezier(.3,0,.4,1) infinite;display:block}
@keyframes lkBounce_n{0%,100%{transform:translateY(8px) scale(1.12,.88)}50%{transform:translateY(-14px) rotate(180deg)}}
html.narrow .lk-ring{position:absolute;inset:0;border-radius:50%;border:5px solid var(--grass-lt);animation:lkRing_n 1.6s ease-out infinite}
@keyframes lkRing_n{from{transform:scale(.55);opacity:1}to{transform:scale(1.25);opacity:0}}
html.narrow .lk-title{font-family:var(--f-display);text-transform:uppercase;font-size:1.9rem;color:var(--grass-lt);letter-spacing:.03em}
html.narrow .lockbox .mine{background:rgba(255,255,255,.14);border:3px solid rgba(255,255,255,.25);padding:.35em .9em;border-radius:14px;font-size:1.6rem;font-weight:700;max-width:100%;word-break:break-word}
html.narrow .lk-took{color:var(--muted);font-size:1.05rem}
html.narrow .lk-cnt{width:100%;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:1.2rem}
html.narrow .lk-prog{width:100%;height:14px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
html.narrow .lk-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--grass-lt),var(--yellow));transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease-pop);border-radius:99px}
html.narrow .lk-crowd{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:center;max-width:100%}
html.narrow .lk-crowd span{font-size:1.7rem;opacity:.28;filter:grayscale(1);transition:opacity .3s,filter .3s}
html.narrow .lk-crowd span.on{opacity:1;filter:none}
html.narrow .lk-msg{font-size:1.25rem;color:var(--chalk);min-height:1.5em;font-style:italic}
html.narrow .lk-end{font-size:1.05rem;color:var(--muted)}
html.narrow .lk-end b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--yellow)}
html.narrow .reveal{justify-content:flex-start;padding-bottom:96px;gap:10px}
html.narrow .rv-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
html.narrow .rv-q{font-size:1.05rem;color:var(--chalk);max-width:520px;line-height:1.15;opacity:.9}
html.narrow .qimg.small{max-height:18vh}
html.narrow .rv-ans{background:var(--chalk);color:var(--ink);border-radius:12px;padding:.25em .9em;font-size:1.5rem;font-weight:700;max-width:100%;word-break:break-word;border-bottom:6px solid var(--lvl)}
html.narrow .rv-ans small{display:block;font-size:.72rem;letter-spacing:.14em;color:#4a5a8a}
html.narrow .rv-me{width:100%;max-width:520px;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px;border-radius:16px;background:rgba(10,18,48,.85);border:4px solid rgba(255,255,255,.2);box-shadow:var(--shadow)}
html.narrow .rv-me.ok{border-color:var(--grass-lt);background:linear-gradient(90deg,rgba(34,197,94,.35),rgba(10,18,48,.88))}
html.narrow .rv-me.ko,html.narrow .rv-me.none{border-color:var(--red);background:linear-gradient(90deg,rgba(255,59,74,.32),rgba(10,18,48,.88))}
html.narrow .rv-me.check{border-color:var(--yellow)}
html.narrow .rv-me.flip{animation:flipIn_n .5s var(--ease-pop)}
html.narrow .rv-sym{font-family:var(--f-display);font-size:2.8rem;line-height:1;width:1.1em;text-align:center}
html.narrow .rv-me.ok .rv-sym{color:var(--grass-lt)}
html.narrow .rv-me.ko .rv-sym,html.narrow .rv-me.none .rv-sym{color:#ff6b6b}
html.narrow .rv-me.check .rv-sym{color:var(--yellow)}
html.narrow .rv-mid{flex:1;min-width:0}
html.narrow .rv-mine{font-size:1.35rem;font-weight:700;word-break:break-word;line-height:1.05}
html.narrow .rv-sub{font-size:.95rem;color:var(--muted)}
html.narrow .rv-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
html.narrow .rv-gain{font-family:var(--f-display);font-size:1.7rem;color:var(--yellow)}
html.narrow .rv-rank{font-family:var(--f-display);font-size:1.5rem}
html.narrow .rv-pts{font-size:.95rem;color:var(--muted)}
html.narrow .rv-list-h{font-family:var(--f-display);text-transform:uppercase;font-size:1.05rem;color:var(--yellow);margin-top:4px}
html.narrow .rv-list-h span{font-family:var(--f-body);text-transform:none;color:var(--muted);font-size:.9rem}
html.narrow .rv-list{width:100%;max-width:520px;display:flex;flex-direction:column;gap:5px}
html.narrow .vrow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:12px;background:rgba(255,255,255,.08);font-size:1.1rem;text-align:left;border:2px solid transparent}
html.narrow .vrow.me{background:rgba(255,210,31,.18);border-color:rgba(255,210,31,.5)}
html.narrow .vrow.hot{border-color:var(--orange);animation:hot_n 1s ease-in-out infinite alternate}
@keyframes hot_n{from{background:rgba(255,138,31,.12)}to{background:rgba(255,138,31,.38)}}
html.narrow .vrow .jersey{font-size:1.6rem}
html.narrow .v-nm{font-weight:700;max-width:5.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.narrow .v-tx{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.narrow .v-st{font-family:var(--f-display);font-size:1.4rem;width:1.2em;text-align:center}
html.narrow .v-st[data-s=ok]{color:var(--grass-lt)}
html.narrow .v-st[data-s=ko]{color:#ff6b6b}
html.narrow .v-st[data-s=check]{color:var(--yellow)}
html.narrow .v-ct{display:inline-flex;align-items:center;gap:2px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:99px;min-width:44px;height:36px;justify-content:center;font-size:1.1rem;cursor:pointer;font-family:inherit}
html.narrow .v-ct b{font-family:var(--f-display);font-weight:400;font-size:.95rem;color:var(--orange)}
html.narrow .v-ct.on{background:var(--orange);border-color:#fff;color:var(--ink)}
html.narrow .v-ct.on b{color:var(--ink)}
html.narrow .v-ct.busy{opacity:.5}
html.narrow .reactbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:flex;gap:10px;padding:8px 12px;background:rgba(10,18,48,.92);border:3px solid rgba(255,255,255,.2);border-radius:99px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
html.narrow .reactbar button{width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.12);font-size:1.9rem;cursor:pointer;line-height:1}
html.narrow .reactbar button.hit{animation:rHit_n .4s var(--ease-pop)}
@keyframes rHit_n{0%{transform:scale(1)}40%{transform:scale(1.4) rotate(-8deg);background:var(--yellow)}100%{transform:scale(1)}}
html.narrow body.kb .reactbar{display:none}
html.narrow .pdm{padding-bottom:96px}
html.narrow .sw{flex-wrap:nowrap;gap:clamp(3px,1.6vw,9px);width:100%;justify-content:space-between}
html.narrow .sw button{flex:1 1 0;min-width:0;width:auto;max-width:42px;height:auto;aspect-ratio:1/1;border-width:3px;padding:0}
html.narrow .join .sw button{width:auto;height:auto}
html.narrow .sw button.on{transform:scale(1.14);box-shadow:0 0 0 2px var(--yellow);position:relative;z-index:1}
html.narrow .lk-msg{background:rgba(10,18,48,.72);padding:.15em .9em;border-radius:99px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5);font-weight:700}
html.narrow .lk-took,html.narrow .lk-end,html.narrow .lk-cnt{color:#e8eeff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
html.narrow .lk-end b{text-shadow:0 2px 0 rgba(0,0,0,.45)}
html.narrow .lk-crowd{gap:0 2px}
html.narrow .lk-crowd span{font-size:1.5rem}
html.narrow .intro .qn,html.narrow .intro .cat,html.narrow .intro .lvl,html.narrow .intro .bignum,html.narrow .intro .ihint{position:relative;z-index:3}
html.narrow .intro .ihint{font-size:1.15rem;background:rgba(10,18,48,.72);color:#fff;padding:.15em .9em;border-radius:99px;margin-top:4px}
html.narrow body.fk-hurrying .screen.question{padding-top:calc(72px + 40px)}
html.narrow .screen.question{transition:padding-top .3s}
html.narrow :root{--hy:70px}
html.narrow .lk-title{color:var(--yellow);text-shadow:0 3px 0 rgba(10,18,48,.85)}