/* ───────── Appairage ───────── */
.logo.big { font-size: calc(9 * var(--u)); }
.pair-box { display: flex; gap: calc(4 * var(--u)); align-items: center; background: rgba(0,0,0,.25); border-radius: calc(3 * var(--u)); padding: calc(3 * var(--u)); backdrop-filter: blur(8px); text-align: left; animation: popin .8s .2s both; }
.pair-qr { background: #fff; border-radius: calc(2 * var(--u)); padding: calc(1.2 * var(--u)); }
.pair-qr img { width: calc(24 * var(--u)); display: block; }
.pair-txt { max-width: calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); }
.pair-t { font-size: calc(3.4 * var(--u)); font-weight: 900; }
.pair-s { font-size: calc(1.9 * var(--u)); color: var(--muted); font-weight: 700; line-height: 1.35; }
.pair-code { font-size: calc(11 * var(--u)); font-weight: 900; letter-spacing: .12em; color: var(--c); text-shadow: 0 .05em 0 var(--b), 0 0 40px rgba(255,255,255,.2); line-height: 1; }

/* ───────── Salle d'attente (version écran seul) ───────── */
#s-lobby { display: none; grid-template-columns: 1fr calc(30 * var(--u)); grid-template-rows: auto 1fr auto; gap: calc(2 * var(--u)) calc(4 * var(--u)); }
#s-lobby.on { display: grid; }
.lobby-head { display: flex; flex-direction: column; gap: calc(1.4 * var(--u)); }
.lobby-quiz { display: flex; align-items: center; gap: calc(1.6 * var(--u)); background: rgba(0,0,0,.22); border-radius: calc(2 * var(--u)); padding: calc(1.4 * var(--u)) calc(2 * var(--u)); backdrop-filter: blur(8px); }
.lobby-quiz .e { font-size: calc(6 * var(--u)); animation: bob 2s ease-in-out infinite; }
.lobby-quiz .n { font-size: calc(3.6 * var(--u)); font-weight: 900; }
.lobby-quiz .d { font-size: calc(1.7 * var(--u)); color: var(--muted); font-weight: 700; }
.lobby-quiz .tags { display: flex; gap: .5em; margin-top: .4em; flex-wrap: wrap; }
.lobby-quiz .tags span { font-size: calc(1.2 * var(--u)); background: rgba(255,255,255,.15); padding: .2em .7em; border-radius: 999px; font-weight: 800; }
.lobby-main { display: flex; gap: calc(3 * var(--u)); min-height: 0; }
#s-lobby .lobby-players { flex: 1; align-content: flex-start; justify-content: flex-start; grid-column: auto; }
#s-lobby .qr-card { grid-row: 1 / 3; grid-column: 2; align-self: center; }
#s-lobby #qr { width: calc(24 * var(--u)); }
.lobby-hint { grid-column: 1 / -1; text-align: center; font-size: calc(2 * var(--u)); font-weight: 800; color: var(--muted); animation: breathe 2.5s infinite; }
.champ { width: calc(28 * var(--u)); background: rgba(0,0,0,.22); border-radius: calc(1.6 * var(--u)); padding: calc(1.2 * var(--u)); align-self: flex-start; backdrop-filter: blur(6px); }
.champ:empty { display: none; }
.champ h3 { font-size: calc(1.7 * var(--u)); margin-bottom: .5em; }
.champ div { display: flex; justify-content: space-between; font-size: calc(1.4 * var(--u)); font-weight: 700; padding: .25em 0; border-top: 1px solid rgba(255,255,255,.1); }
.lp.host .pname::after { content: ' 👑'; }

/* ───────── Animateur ───────── */
#mascot { position: fixed; left: calc(1.5 * var(--u)); bottom: calc(1 * var(--u)); width: calc(11 * var(--u)); z-index: 45; transition: transform .6s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
#mascot .body { width: 100%; display: block; animation: mbob 2.2s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
@keyframes mbob { 50% { transform: translateY(-6px) rotate(-3deg); } }
#mascot .mouth-o { display: none; }
#mascot.talk .mouth { display: none; }
#mascot.talk .mouth-o { display: block; animation: talk .18s infinite alternate; transform-origin: 60px 82px; }
@keyframes talk { from { transform: scaleY(.3); } to { transform: scaleY(1.1); } }
#mascot.jump .body { animation: mjump .5s 3; }
@keyframes mjump { 50% { transform: translateY(-30px) scale(1.08); } }
#mascot.sad .body { animation: msad 1s 2; }
@keyframes msad { 50% { transform: translateY(6px) rotate(8deg); } }
#mascot .pupil { animation: look 6s infinite; }
@keyframes look { 0%, 40% { transform: translate(0,0); } 50%, 70% { transform: translate(3px,-2px); } 80%, 100% { transform: translate(-3px,1px); } }
#mascot .antenna { animation: blink 1.4s infinite; }
@keyframes blink { 50% { fill: #fff; } }
#mascot.hide { transform: translateY(150%); }
.bubble { position: absolute; left: 90%; bottom: 70%; background: #fff; color: #1a1030; font-weight: 900; font-size: calc(2 * var(--u)); padding: .6em 1em; border-radius: 1.2em 1.2em 1.2em .2em; width: max-content; max-width: 38vw; line-height: 1.25;
  box-shadow: 0 10px 40px rgba(0,0,0,.35); transform-origin: bottom left; transform: scale(0); transition: transform .35s cubic-bezier(.2,1.6,.4,1); }
.bubble.on { transform: scale(1); }

/* ───────── Réactions, transitions, compte à rebours ───────── */
#reactLayer { position: fixed; inset: 0; pointer-events: none; z-index: 44; overflow: hidden; }
.rx { position: absolute; bottom: -80px; display: flex; flex-direction: column; align-items: center; animation: rise 3.2s cubic-bezier(.3,.7,.5,1) forwards; }
.rx .e { font-size: calc(5.5 * var(--u)); filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.rx .av { --s: calc(3 * var(--u)); border-width: 2px; margin-top: -.6em; }
@keyframes rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 10% { opacity: 1; transform: translateY(-10vh) scale(1.1); } 100% { transform: translateY(-85vh) translateX(var(--dx)) scale(.9) rotate(var(--rot)); opacity: 0; } }
#curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: linear-gradient(115deg, var(--a), var(--b)); transform: translateX(-110%) skewX(-12deg); }
#curtain.go { animation: curtain .75s cubic-bezier(.7,0,.3,1); }
@keyframes curtain { 0% { transform: translateX(-120%) skewX(-12deg); } 45%, 55% { transform: translateX(0) skewX(-12deg); } 100% { transform: translateX(120%) skewX(-12deg); } }
#bigCount { position: fixed; inset: 0; display: grid; place-items: center; font-size: calc(30 * var(--u)); font-weight: 900; color: rgba(255,255,255,.18); pointer-events: none; z-index: 30; opacity: 0; }
#bigCount.on { animation: bigc .9s ease-out forwards; }
@keyframes bigc { from { transform: scale(1.6); opacity: 0; color: var(--ko); } 30% { opacity: 1; } to { transform: scale(.9); opacity: 0; } }
body.hurry #bg::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 160px 30px rgba(255,40,80,.3); }

@keyframes fadeout { to { opacity: 0; } }
.spots i { position: absolute; top: -20%; width: 30vw; height: 140%; background: linear-gradient(rgba(255,255,255,.12), transparent 70%); transform-origin: top center; filter: blur(10px); opacity: 0; transition: opacity 1s; }
.spots i:first-child { left: 10%; animation: sweep 7s ease-in-out infinite alternate; }
.spots i:last-child { right: 10%; animation: sweep 9s ease-in-out infinite alternate-reverse; }
@keyframes sweep { from { transform: rotate(25deg); } to { transform: rotate(-25deg); } }
body.party-on .spots i { opacity: 1; }
#soundGate { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: #fff; color: #222; padding: .6em 1.2em; border-radius: 999px; font-weight: 800; z-index: 80; display: none; cursor: pointer; }
#soundGate.on { display: block; animation: breathe 1.5s infinite; }
.intro-desc { font-size: calc(2.6 * var(--u)); font-weight: 800; color: var(--muted); max-width: 70%; animation: slidein .6s .4s both; }
.timer.small { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.timer.small span { font-size: calc(2.4 * var(--u)); }

/* ───────── Pixel / zoom / mémoire ───────── */
.m-img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(2 * var(--u)); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 6px solid #fff; background: #000; }
.m-img img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.m-emoji.blur { transition: filter linear; }
.memo-grid { display: grid; gap: calc(1.2 * var(--u)); }
.memo-grid span { width: calc(12 * var(--u)); height: calc(12 * var(--u)); display: grid; place-items: center; font-size: calc(8 * var(--u)); background: rgba(255,255,255,.12); border-radius: calc(1.6 * var(--u)); animation: popin .5s both; }
.memo-grid.hidden span { font-size: 0; }
.memo-grid.hidden span::after { content: '❓'; font-size: calc(6 * var(--u)); opacity: .4; }
.memo-label { font-size: calc(3 * var(--u)); font-weight: 900; color: var(--c); }
.m-emoji.rebus { font-size: calc(11 * var(--u)); letter-spacing: .08em; }

/* ───────── Défis micro / capteurs ───────── */
.live-head { font-size: calc(5.5 * var(--u)); font-weight: 900; display: flex; align-items: center; gap: .3em; }
.live-e { font-size: 1.5em; animation: bob 1.4s infinite; display: inline-block; }
.live-desc { font-size: calc(2.4 * var(--u)); font-weight: 800; color: var(--muted); max-width: 75%; }
.live-zone { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: calc(2 * var(--u)); min-height: 0; }
.mini-timer { font-size: calc(3 * var(--u)); font-weight: 900; color: var(--c); min-height: 1.2em; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: .5em; height: 100%; justify-content: flex-end; width: calc(10 * var(--u)); }
.gauge .tube { position: relative; width: 70%; flex: 1; max-height: calc(38 * var(--u)); background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; border: 3px solid rgba(255,255,255,.25); }
.gauge .fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #2fe08b, #ffd23f 60%, #ff4d6d); border-radius: 999px; transition: height .12s linear; }
.gauge .peak { position: absolute; left: -4px; right: -4px; height: 4px; background: #fff; transition: bottom .3s; }
.gauge .val { font-weight: 900; font-size: calc(2 * var(--u)); }
.gauge.win .av { box-shadow: 0 0 0 5px var(--c), 0 0 40px var(--c); }
.gauge.out { opacity: .35; filter: grayscale(1); }
.track-race { width: 90%; display: flex; flex-direction: column; gap: calc(1 * var(--u)); align-self: center; }
.lane { position: relative; height: calc(7 * var(--u)); background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 40px, rgba(255,255,255,.12) 40px 80px); border-radius: 999px; border-right: 8px dashed #fff; }
.lane .horse { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; transition: left .15s linear; font-size: calc(5 * var(--u)); }
.lane .horse .av { --s: calc(4.5 * var(--u)); border-width: 3px; margin-right: -.4em; }
.lane .horse .h { display: inline-block; transform: scaleX(-1); animation: gallop .3s infinite alternate; }
@keyframes gallop { to { transform: scaleX(-1) translateY(-6px) rotate(-6deg); } }
.reflex { width: 70%; height: 60%; border-radius: calc(3 * var(--u)); display: grid; place-items: center; font-size: calc(9 * var(--u)); font-weight: 900; background: #c9184a; box-shadow: 0 20px 80px rgba(0,0,0,.4); align-self: center; }
.reflex.go { background: #2fe08b; color: #053; animation: popin .2s; }
.result-list { display: flex; flex-direction: column; gap: calc(.8 * var(--u)); align-self: center; width: min(90%, calc(80 * var(--u))); }
.result-list .rr { display: flex; align-items: center; gap: calc(1.4 * var(--u)); background: var(--card); border-radius: 999px; padding: .3em 1.2em .3em .3em; font-size: calc(2.2 * var(--u)); font-weight: 800; animation: slidein .5s both; }
.result-list .rr .av { --s: calc(5 * var(--u)); }
.result-list .rr .rk { font-size: 1.4em; width: 1.6em; text-align: center; }
.result-list .rr .v { margin-left: auto; color: var(--c); }
.result-list .rr .g { color: var(--ok); width: 5em; text-align: right; }
.team-bars { display: flex; gap: calc(2 * var(--u)); justify-content: center; }
.team-bars div { padding: .3em 1em; border-radius: 999px; font-weight: 900; font-size: calc(2 * var(--u)); color: #111; }

/* ───────── Mini-jeux ───────── */
#s-game { flex-direction: column; gap: calc(1.4 * var(--u)); }
.gtitle { text-align: center; font-size: calc(3.8 * var(--u)); font-weight: 900; line-height: 1.2; text-shadow: 0 4px 20px rgba(0,0,0,.35); animation: qin .7s both; }
.gtitle .blank { display: inline-block; min-width: 4em; border-bottom: .12em solid var(--c); color: var(--c); }
.gzone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.6 * var(--u)); min-height: 0; overflow: hidden; }
.perf { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.perf .av { --s: calc(18 * var(--u)); animation: bob 1.2s infinite; }
.perf .prompt { font-size: calc(4 * var(--u)); font-weight: 900; max-width: calc(60 * var(--u)); color: var(--c); }
.stars { font-size: calc(8 * var(--u)); letter-spacing: .1em; }
.stars .s { display: inline-block; animation: popin .5s both; }
.big-note { font-size: calc(3 * var(--u)); font-weight: 800; color: var(--muted); text-align: center; }
.options-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.2 * var(--u)); width: 100%; }
.opt-card { background: var(--card); border-radius: calc(1.6 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); font-size: calc(2.6 * var(--u)); font-weight: 900; display: flex; align-items: center; gap: .6em; animation: choiceIn .5s both; position: relative; min-height: calc(7 * var(--u)); flex-wrap: wrap; backdrop-filter: blur(6px); }
.opt-card .k { background: rgba(255,255,255,.2); border-radius: .3em; width: 1.4em; text-align: center; flex: none; }
.opt-card.truth { background: linear-gradient(135deg, #2fe08b, #0b9a5b); box-shadow: 0 0 0 4px #fff, 0 0 50px #2fe08b; }
.opt-card.lie { opacity: .85; }
.opt-card .by { width: 100%; font-size: .55em; color: #fff; opacity: .9; display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.opt-card .by .av { --s: calc(3 * var(--u)); border-width: 2px; }
.top-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.8 * var(--u)) calc(2 * var(--u)); width: 100%; }
.top-list .it { display: flex; align-items: center; gap: .6em; background: var(--card); border-radius: 999px; padding: .3em .9em; font-size: calc(2.1 * var(--u)); font-weight: 800; animation: slidein .4s both; }
.top-list .it .n { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); color: #222; display: grid; place-items: center; font-size: .8em; flex: none; }
.top-list .it.miss { opacity: .45; }
.top-list .it .who { margin-left: auto; display: flex; }
.top-list .it .who .av { --s: calc(3 * var(--u)); border-width: 2px; margin-left: -.4em; }
.quote { font-size: calc(5 * var(--u)); font-weight: 900; text-align: center; max-width: 85%; color: var(--c); animation: popin .6s both; }
.quote::before { content: '« '; } .quote::after { content: ' »'; }
.photo-grid { display: flex; gap: calc(1.6 * var(--u)); flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.ph { position: relative; width: calc(22 * var(--u)); border-radius: calc(1.4 * var(--u)); overflow: hidden; border: 5px solid #fff; background: #000; animation: popin .6s both; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ph .k { position: absolute; top: 8px; left: 8px; background: var(--c); color: #222; font-weight: 900; padding: .1em .5em; border-radius: .4em; font-size: calc(2 * var(--u)); }
.ph .vt { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.7); font-weight: 900; padding: .1em .6em; border-radius: 999px; font-size: calc(2 * var(--u)); }
.ph .au { position: absolute; bottom: 8px; left: 8px; }
.ph .au .av { --s: calc(4 * var(--u)); border-width: 3px; }
.ph.win { border-color: var(--c); transform: scale(1.08); box-shadow: 0 0 60px var(--c); }
.espion-lieu { font-size: calc(7 * var(--u)); font-weight: 900; color: var(--c); }
.espion-order { display: flex; gap: calc(2 * var(--u)); justify-content: center; flex-wrap: wrap; }
.espion-order .eo { display: flex; flex-direction: column; align-items: center; gap: .3em; opacity: .5; transition: all .4s; }
.espion-order .eo.now { opacity: 1; transform: scale(1.25); }
.espion-order .eo .av { --s: calc(8 * var(--u)); }

/* ───────── Dessin ───────── */
#s-dessin { gap: calc(2 * var(--u)); }
.draw-side { width: calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); align-items: flex-start; }
.draw-who { display: flex; align-items: center; gap: .6em; font-size: calc(2.2 * var(--u)); font-weight: 900; }
.draw-who .av { --s: calc(6 * var(--u)); }
.draw-hint { font-size: calc(3.4 * var(--u)); font-weight: 900; letter-spacing: .1em; color: var(--c); font-family: ui-monospace, monospace; }
.draw-found { display: flex; flex-wrap: wrap; gap: .4em; }
.draw-found .av { --s: calc(4 * var(--u)); border-width: 3px; border-color: var(--ok); }
.draw-guesses { display: flex; flex-direction: column; gap: .4em; flex: 1; overflow: hidden; justify-content: flex-end; width: 100%; }
.draw-guesses div { background: var(--card); border-radius: 999px; padding: .25em .8em; font-size: calc(1.6 * var(--u)); font-weight: 800; display: flex; align-items: center; gap: .5em; animation: slidein .3s both; }
.draw-guesses div .av { --s: calc(2.6 * var(--u)); border-width: 2px; }
.draw-guesses div.ok { background: rgba(47,224,139,.3); }
.draw-board { flex: 1; position: relative; background: #fffdf6; border-radius: calc(2 * var(--u)); box-shadow: 0 20px 60px rgba(0,0,0,.45); overflow: hidden; border: 6px solid #fff; }
.draw-board canvas { width: 100%; height: 100%; display: block; }
.draw-word { position: absolute; inset: auto 0 6% 0; text-align: center; font-size: calc(6 * var(--u)); font-weight: 900; color: #7b2ff7; text-shadow: 0 4px 0 #fff; }
.draw-word:empty { display: none; }

/* ───────── Boss coop et corde ───────── */
.boss:empty { display: none; }
.boss { display: flex; align-items: center; gap: calc(3 * var(--u)); background: rgba(0,0,0,.25); border-radius: calc(2 * var(--u)); padding: calc(1.2 * var(--u)) calc(3 * var(--u)); }
.boss .mon { font-size: calc(10 * var(--u)); animation: bob 1.5s infinite; }
.boss.hit .mon { animation: shake .3s 4; filter: drop-shadow(0 0 20px #ff4d6d); }
.boss .hp { width: calc(50 * var(--u)); height: calc(3 * var(--u)); background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; border: 3px solid #fff; }
.boss .hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff4d6d, #ff9f1c); transition: width 1.5s cubic-bezier(.2,1,.3,1); }
.boss .info { font-size: calc(2.2 * var(--u)); font-weight: 900; }
.boss .hearts { font-size: calc(3 * var(--u)); }
.rope { width: min(100%, calc(100 * var(--u))); height: calc(5 * var(--u)); position: relative; margin: 0 auto; }
.rope .line { position: absolute; top: 50%; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(45deg, #c9a46b 0 8px, #8b5a2b 8px 16px); border-radius: 4px; }
.rope .flag { position: absolute; top: 0; font-size: calc(4 * var(--u)); transform: translateX(-50%); transition: left 1.5s cubic-bezier(.2,1.4,.4,1); }
.rope .mid { position: absolute; left: 50%; top: -10%; bottom: -10%; width: 3px; background: #fff; }
.sr.out { opacity: .4; filter: grayscale(1); }
.cursed { position: absolute; top: -6px; right: -6px; font-size: calc(2 * var(--u)); }
.qzone { padding-bottom: calc(1.6 * var(--u)); }
.lobby-quiz .rules { margin: .5em 0 0 1.2em; font-size: calc(1.45 * var(--u)); font-weight: 700; line-height: 1.35; display: flex; flex-direction: column; gap: .15em; }
.jk-legend:empty { display: none; }
.jk-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1 * var(--u)); width: min(96%, calc(130 * var(--u))); text-align: left; }
.jk-legend .h { grid-column: 1 / -1; text-align: center; font-size: calc(2.8 * var(--u)); font-weight: 900; }
.jk-legend .sub { grid-column: 1 / -1; text-align: center; font-size: calc(1.7 * var(--u)); color: var(--muted); font-weight: 700; margin-top: -.4em; }
.jk { display: flex; align-items: center; gap: .7em; background: rgba(255,255,255,.12); border-radius: calc(1.2 * var(--u)); padding: .5em .9em; font-size: calc(1.45 * var(--u)); font-weight: 700; line-height: 1.25; animation: popin .5s both; backdrop-filter: blur(6px); }
.jk b { display: block; font-size: 1.15em; }
.jk .e { font-size: calc(3.4 * var(--u)); }
.jk.malus { background: rgba(255,77,109,.2); }
#s-ready.legend .count321 { display: none; }
.tip:empty { display: none; }
.tip { display: flex; align-items: center; gap: 1em; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.2); border-radius: 999px; padding: .5em 1.6em; font-size: calc(1.9 * var(--u)); font-weight: 800; animation: slidein .6s 1.2s both; backdrop-filter: blur(6px); }
.tip .e { font-size: 1.8em; }
.fam-tag { font-size: .8em; background: rgba(255,255,255,.2); border-radius: 999px; padding: .1em .7em; margin-left: .4em; }
#s-ready.legend .ready-quiz { font-size: calc(2.6 * var(--u)); } #s-ready.legend .ready-quiz .e { display: none; } #s-ready.legend { gap: calc(1.2 * var(--u)); }
.lobby-quiz { align-items: flex-start; padding: calc(1.1 * var(--u)) calc(1.6 * var(--u)); }
.lobby-quiz .e { font-size: calc(4.5 * var(--u)); }
.lobby-quiz .n { font-size: calc(3 * var(--u)); }
.lobby-quiz .d { font-size: calc(1.5 * var(--u)); }
.lobby-quiz .rules { columns: 2; column-gap: 2.2em; display: block; font-size: calc(1.3 * var(--u)); margin-top: .5em; }
.lobby-quiz .rules li { break-inside: avoid; margin-bottom: .3em; }
.lobby-quiz .tags span { font-size: calc(1.1 * var(--u)); }
#s-lobby { grid-template-rows: auto minmax(0, 1fr) auto; }
.lobby-main { align-items: flex-end; }
.champ { max-height: 100%; overflow: hidden; }
#s-lobby .lobby-players { padding-left: calc(13 * var(--u)); }
.bubble { font-size: calc(1.7 * var(--u)); max-width: 32vw; }