/* Écran joueur (mobile d'abord) */
.player{display:flex;flex-direction:column;min-height:100%}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:15px}
.me{font-weight:700;font-stretch:112%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-score strong{font-stretch:125%;font-size:18px;font-variant-numeric:tabular-nums}
.screen{flex:1;display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;padding:20px 16px 28px}
.screen>section{flex:1;display:flex;flex-direction:column}
.kicker{color:var(--ink-soft);font-weight:500;margin:0 0 .4em;font-size:15px}
h1{font-stretch:125%;font-weight:800;font-size:clamp(34px,10vw,56px);line-height:.95;letter-spacing:-.02em;margin:0 0 28px}
label{display:block;font-weight:700;margin:0 0 8px}
.hint{color:var(--ink-soft);font-size:14px;margin:8px 0 0}
.pin-field{font-stretch:125%;font-weight:800;font-size:34px;letter-spacing:.12em;text-align:center;font-variant-numeric:tabular-nums}
.btn.wide{width:100%;margin-top:12px;font-size:18px}
.join .btn.quiet{width:100%;margin-top:8px}
.join{justify-content:center}

.center{justify-content:center;text-align:center;align-items:center}
.big-word{font-stretch:125%;font-weight:800;font-size:clamp(32px,9vw,48px);line-height:1;letter-spacing:-.01em;margin:0 0 16px;overflow-wrap:anywhere}
.sub{color:var(--ink-soft);margin:0;max-width:26em}
.dots{display:flex;gap:8px;margin-top:28px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:blink 1.2s infinite both}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* Question */
.q-head{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--ink-soft);margin-bottom:8px}
.q-head strong{color:var(--ink);font-stretch:125%}
.qclock{font-stretch:125%;font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.qclock.low{color:var(--ko)}
.q-text{font-stretch:112%;font-weight:700;font-size:clamp(20px,5.6vw,26px);line-height:1.18;margin:16px 0 14px}
.q-img{display:flex;justify-content:center;margin:0 0 14px}
.q-img img{max-height:22vh;width:auto;background:#fff;border-radius:2px}
.q-img.small img{max-height:13vh}
.q-img:empty{display:none}
.ready{font-weight:700;font-stretch:112%;font-size:20px;margin:6px 0 0;text-align:center}
.ready:empty{display:none}
.tiles{display:grid;gap:10px;margin-top:auto}
.tiles .tile{min-height:68px;font-size:17px;width:100%}
.tiles .tile:active{transform:scale(.98)}
.tiles .tile .pic{width:76px;height:76px}
.tiles.has-pics .tile{min-height:96px}
.tiles.tf{grid-template-columns:1fr 1fr}
.tiles.tf .tile{min-height:110px;justify-content:center;font-size:22px;font-stretch:112%;font-weight:800}
.tiles.tf .tile .txt{flex:none}
.lead .tiles{visibility:hidden}

.echo{width:100%;max-width:420px;margin:12px 0 20px}
.echo .tile{width:100%;min-height:64px;font-size:17px}
.echo .tile .pic{width:64px;height:64px}

/* Résultat */
.verdict{font-stretch:125%;font-weight:800;font-size:clamp(40px,12vw,64px);line-height:.95;margin:0 0 10px;letter-spacing:-.02em}
.result.good .verdict{color:var(--ok)}
.result.bad .verdict{color:var(--ko)}
.gain{font-stretch:125%;font-weight:800;font-size:30px;margin:0 0 20px;font-variant-numeric:tabular-nums;background:var(--signal);color:#22201F;padding:.1em .5em}
.gain:empty{display:none}
.right-answer{width:100%;max-width:420px;margin:0 0 18px;text-align:left}
.right-answer p{margin:0 0 6px;color:var(--ink-soft);font-size:14px}
.right-answer .tile{width:100%;min-height:56px;font-size:16px;margin-bottom:8px}
.right-answer .tile .pic{width:56px;height:56px}
.rank{font-weight:600;font-size:18px;margin:0 0 10px;max-width:24em}

.end .place{font-stretch:125%;font-weight:800;font-size:clamp(90px,30vw,150px);line-height:.85;margin:0 0 10px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.end .place sup{font-size:.35em;vertical-align:top;position:relative;top:.35em;margin-left:.05em}
.end.top .place{background:linear-gradient(transparent 60%,var(--signal) 60%,var(--signal) 88%,transparent 88%);padding:0 .08em}
.end .btn{margin-top:28px}

.net{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:2px;font-size:14px;margin:0}

/* Choix multiple : tuiles cochables + validation */
.multi-hint{margin:0 0 10px;font-weight:700;font-size:15px;text-align:center;background:var(--signal);color:#22201F;padding:6px 10px}
.tiles.multi .tile .key{border-radius:4px}
.tiles.multi .tile.on{outline:4px solid var(--signal);outline-offset:2px}
.tiles.multi .tile.on .key{background:var(--signal);border-color:var(--signal);color:#22201F;font-size:0}
.tiles.multi .tile.on .key::after{content:"✓";font-size:18px;font-weight:800}
.validate{position:sticky;bottom:12px;z-index:2}
.lead .validate,.lead .multi-hint{visibility:hidden}
.echo .tile+.tile{margin-top:8px}
.partial{margin:-4px 0 14px;font-weight:600}