/* Random Duck Race — Rooms.
   Everything a room puts on screen: the Room entry modal, the host's lobby
   (projector view), the room banner in the Setup panel, and the guest's
   join screens (shared by the in-game layer and join.html). Colours fall
   back to the game's own values so join.html works without css/game.css. */

.rj, .qs, #roomLobby, #roomModal, #roomBanner, #joinLayer {
  --r-ink: var(--ink, #E9F2F0);
  --r-dim: var(--dim, rgba(233,242,240,.56));
  --r-amber: var(--amber, #F1C40F);
  --r-amber-bd: var(--amber-bd, #F39C12);
  --r-amber-sh: var(--amber-sh, #B9770E);
  --r-disp: var(--disp, 'Nunito', system-ui, sans-serif);
  --r-mono: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  --r-card: rgba(233,242,240,.07);
  --r-line: rgba(233,242,240,.14);
  --r-bg: linear-gradient(180deg, #19154A 0%, #0E1030 55%, #080A1C 100%);
}

/* ── the Room button's modal: host or join (card from css/game.css) ── */
.rm-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-opt { --cut: 16px; --bw: 2px; --bg: rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left; cursor: pointer; padding: 18px 16px 16px; color: #fff; font: inherit; transition: transform .15s; }
.rm-opt:hover { --bg: rgba(255,255,255,.11); --bd: var(--rm-c); transform: translateY(-2px); }
.rm-opt:focus-visible { outline: 2px solid var(--r-amber); outline-offset: 2px; }
.rm-opt svg { --cut: 10px; --bg: var(--rm-bg); width: 48px; height: 48px; padding: 10px; color: var(--rm-c); }
#roomCreateOpt { --rm-c: #C4AAFF; --rm-bg: rgba(142,92,240,.22); }
#roomJoinOpt { --rm-c: var(--r-amber); --rm-bg: rgba(241,196,15,.16); }
/* "Back to room" — only offered while the room you just left is still open */
.rm-back { --rm-c: #4ADE80; --rm-bg: rgba(74,222,128,.16); grid-column: 1 / -1; }
.rm-back[hidden] { display: none; }
#roomRejoinCode { font-family: var(--r-mono); letter-spacing: .12em; color: #4ADE80; }
.rm-opt b { font: 900 19px var(--r-disp); }
.rm-opt span { font: 600 13px/1.5 var(--r-disp); color: rgba(226,224,255,.68); }
.rm-note { font: 700 12.5px var(--r-disp); color: #FF8F84; margin-top: 12px; min-height: 16px; }
@media (max-width: 560px) {
  .rm-options { grid-template-columns: 1fr; }
  .rm-opt { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; }
  .rm-opt svg { grid-row: 1 / 3; }
}

/* ── the room banner in Setup (it stands in for the runners and theme) ── */
#roomBanner { --cut: 16px; --bd: rgba(196,170,255,.35); --bg: linear-gradient(135deg, rgba(142,92,240,.3), rgba(79,46,160,.18));
  display: none; grid-column: 1 / -1; padding: 18px; }
body.room-on #roomBanner { display: block; }
body.room-on .cfg-runners, body.room-on .cfg-theme, body.room-on .tp-fold { display: none !important; }
body.room-on .cfg.tp-shut .cfg-body { grid-template-columns: 1fr; }
.rb-live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rb-dot { width: 12px; height: 12px; background: #4ADE80; flex: none; transform: rotate(45deg);
  animation: rbBlink 1.6s ease-in-out infinite; }
@keyframes rbBlink { 50% { opacity: .35; } }
.rb-pin { --cut: 10px; --bg: #fff; display: flex; flex-direction: column; padding: 8px 16px; color: #1B1A33; }
.rb-pin small { font: 800 11px var(--r-disp); color: #5A5A74; }
.rb-pin b { font: 900 30px/1 var(--r-disp); letter-spacing: .08em; }
.rb-meta { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.rb-meta b { font: 900 20px var(--r-disp); color: #fff; }
.rb-meta > span { font: 700 13px var(--r-disp); color: rgba(226,224,255,.68); word-break: break-all; }
.rb-note { margin: 14px 0 0; font: 600 13.5px/1.5 var(--r-disp); color: rgba(226,224,255,.68); }
.rb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rb-actions .big.ghost { font-size: 14px; padding: 10px 18px; }
/* the lobby's and the banner's buttons: an icon each; Close room in red */
.rb-actions .big.ghost, .rl-foot .big.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#roomBannerClose { color: #FF9C92; }

/* ── host lobby: full screen for the projector ─────────────────────────
   Laid out like a quiz-show lobby: the join details pinned to the top edge
   (address · PIN · QR), then a bar with the head count, the logo and the
   Start button, then everyone who has joined, centred and wrapping.
   The chat is a column of its own down the right-hand side; the tab on its
   edge slides it shut (the lobby takes the whole width) and open again.
   On a phone it sits under the lobby and folds down instead. */
#roomLobby, #joinLayer { z-index: 30; background: var(--lb-bg, var(--r-bg)); }
/* a phone in a themed room wears the room's background (join.html: the page) */
body[data-lobby] { background: var(--lb-bg); background-attachment: fixed; }
/* while a room screen is up, it is the only thing on screen */
body.room-overlay #config, body.room-overlay #topBar { visibility: hidden; }
/* .rl-lobby: the host's lobby (#roomLobby) and a guest's, which wears the same layout */
.rl-lobby { display: flex; overflow: hidden; }
.rl-stage { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 24px 18px; overflow: hidden; }
.rl-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rl-glow i { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; animation: rlFloat 14s ease-in-out infinite; }
.rl-glow i:nth-child(1) { width: 260px; height: 260px; left: 6%; top: 8%;
  background: radial-gradient(circle at 35% 35%, var(--lb-g1, rgba(190,160,255,.45)), transparent 70%); }
.rl-glow i:nth-child(2) { width: 180px; height: 180px; right: 9%; top: 30%; animation-delay: -5s;
  background: radial-gradient(circle at 35% 35%, var(--lb-g2, rgba(150,230,255,.35)), transparent 70%); }
.rl-glow i:nth-child(3) { width: 340px; height: 340px; left: 44%; bottom: -170px; animation-delay: -9s;
  background: radial-gradient(circle at 50% 40%, var(--lb-g3, rgba(255,216,74,.22)), transparent 70%); }
@keyframes rlFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -22px); } }
.rl-pin, .rl-bar, .rl-players, .rl-foot { position: relative; z-index: 1; }

.rl-pin { --cut: 18px; --bg: #fff; display: flex; align-items: stretch; color: #1B1A33; overflow: hidden; flex: none; margin: 20px 0;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); }
/* the lobby arrives in two short beats: the PIN drops in, then the rest */
.rl-lobby.on .rl-pin { animation: rlDrop .45s cubic-bezier(.2,.9,.3,1.15) both; }
.rl-lobby.on .rl-bar, .rl-lobby.on .rl-players, .rl-lobby.on .rl-foot { animation: rlRise .4s .12s ease-out both; }
@keyframes rlDrop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes rlRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rl-lobby.on .rl-pin, .rl-lobby.on .rl-bar, .rl-lobby.on .rl-players, .rl-lobby.on .rl-foot { animation: none; } }
.rl-pin small { display: block; font: 800 14px/1.2 var(--r-disp); color: #5A5A74; }
.rl-join { display: flex; flex-direction: column; justify-content: center; padding: 12px 22px; background: #F2F1F8; }
.rl-join b { font: 900 21px/1.2 var(--r-disp); color: #1B1A33; overflow-wrap: anywhere; }
.rl-code { display: flex; flex-direction: column; justify-content: center; padding: 8px 26px 10px; }
.rl-code b { font: 900 clamp(40px, 5.2vw, 64px)/1 var(--r-disp); letter-spacing: .08em; color: #1B1A33; }
.rl-qr { appearance: none; border: 0; border-left: 2px solid #ECEBF3; background: #fff; padding: 8px; width: 116px; flex: none;
  cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.rl-qr img, .rl-qr canvas, #rlQrBigCode img, #rlQrBigCode canvas, [data-el="qrBigCode"] img, [data-el="qrBigCode"] canvas { width: 100% !important; height: auto !important; image-rendering: pixelated; }
.rl-qr:hover { background: #F7F6FC; }
/* the site's mark in the middle of a QR code (js: qrMark) */
.rl-qr, #rlQrBigCode, [data-el="qrBigCode"], #shareQrBox, #shareQrBigCode { position: relative; }
.qr-mark { position: absolute; left: 50%; top: 50%; width: 21%; height: 21%; transform: translate(-50%, -50%); pointer-events: none;
  background: #fff url(/images/favicon-192.png) center / 84% no-repeat; border-radius: 16%; box-shadow: 0 0 0 2px #fff; }

.rl-bar { width: min(1200px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 0 0 18px; flex: none; }
.rl-count { --cut: 9px; --bg: rgba(0,0,0,.34); justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  color: #fff; font: 900 24px/1 var(--r-disp); }
.rl-count small { font: 700 13px var(--r-mono); color: var(--r-dim); }
.rl-logo { height: clamp(36px, 4.6vw, 60px); width: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.rl-ctrl { justify-self: end; display: flex; align-items: center; gap: 12px; }
.rl-icon { --cut: 10px; --bg: rgba(255,255,255,.14); width: 46px; height: 46px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.rl-icon:hover { --bg: rgba(255,255,255,.24); transform: translateY(-2px); }
.rl-icon .ic-shut, .rl-icon.on .ic-open { display: none; }
.rl-icon.on .ic-shut { display: block; }
.rl-icon.on { --bg: #E74C3C; }
.rl-icon:active { transform: scale(.9); }
.rl-icon svg { transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.rl-icon.on svg { transform: rotate(-12deg) scale(1.08); }
#rlStart { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; padding: 12px 34px; white-space: nowrap; }
#rlStart svg { flex: none; }
#rlStart[disabled] { opacity: .5; cursor: not-allowed; }

/* the chat column. It slides in and out by transform alone (no width
   changing frame by frame, which had the whole lobby laid out again on
   every frame); the stage gives up or takes back its room once, and
   js eases its content across (see slideStage in room-host/room-join). */
.rl-lobby { --chat-w: 360px; --chat-ease: cubic-bezier(.22,.8,.24,1); }
.rl-stage { margin-right: var(--chat-w); }
.rl-lobby.chat-hidden .rl-stage { margin-right: 0; }
.rl-chat { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: var(--chat-w); overflow: hidden;
  background: linear-gradient(180deg, rgba(10,8,38,.82), rgba(6,5,26,.9)); border-left: 1px solid rgba(196,178,255,.16);
  box-shadow: -18px 0 40px rgba(0,0,0,.25); transition: transform .36s var(--chat-ease), visibility 0s; }
.rl-chat-body { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 18px 16px 16px;
  transition: opacity .3s ease-out; }
.rl-lobby.chat-hidden .rl-chat { transform: translateX(100%); visibility: hidden; box-shadow: none;
  transition: transform .32s var(--chat-ease), visibility 0s .32s; }
.rl-lobby.chat-hidden .rl-chat-body { opacity: 0; transition-duration: .18s; }
.rl-lobby.on .rl-chat-body { animation: rlSlide .45s .1s ease-out both; }
@keyframes rlSlide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* the tab on the chat's edge */
.rl-chat-tab { position: absolute; z-index: 3; top: 50%; right: 0; width: 34px; height: 92px; margin-top: -46px; padding: 0;
  transform: translateX(calc(-1 * var(--chat-w)));
  appearance: none; border: 1px solid rgba(196,178,255,.22); border-right: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #2B2470, #1A1650);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: transform .36s var(--chat-ease), background .15s, color .15s; }
.rl-chat-tab:hover { background: linear-gradient(180deg, #3A3190, #241E68); color: var(--r-amber); }
.rl-chat-ic { flex: none; color: var(--r-amber); filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.rl-chat-ic .b { fill: currentColor; }
.rl-chat-ic .d { fill: #211B5E; }
.rl-tab-count, .rl-tab-lbl, .rl-tab-off { display: none; }
.rl-chat-ic .x { display: none; fill: none; stroke: #FF6B5E; stroke-width: 2.6; stroke-linecap: round; }
.rl-lobby.chat-off .rl-chat-ic { color: rgba(226,224,255,.5); }
.rl-lobby.chat-off .rl-chat-ic .x { display: inline; }
.rl-lobby.chat-off .rl-tab-off { display: block; padding: 2px 5px; border-radius: 4px; background: #C0392B; color: #fff;
  font: 900 9px var(--r-mono); letter-spacing: .08em; text-transform: uppercase; }
.rl-chat-offtag { padding: 3px 8px; border-radius: 5px; background: rgba(192,57,43,.25); color: #FFB4AC; font: 800 11px var(--r-disp); }
.rl-chat-offtag[hidden] { display: none; }
.rl-chat-tab:focus-visible { outline: 2px solid var(--r-amber); outline-offset: -3px; }
.rl-chev { transition: transform .36s var(--chat-ease); }
.rl-lobby.chat-hidden .rl-chat-tab { transform: none; transition-duration: .32s; }
.rl-lobby.chat-hidden .rl-chev { transform: rotate(180deg); }
.rl-unread { position: absolute; top: 6px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: #E74C3C; color: #fff; font: 900 10px/18px var(--r-disp); text-align: center; animation: rlPop .3s cubic-bezier(.3,1.6,.5,1); }
.rl-unread[hidden] { display: none; }
@keyframes rlPop { from { transform: scale(0); } to { transform: none; } }

.rl-chat-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rl-chat-hd b { flex: 1; font: 900 20px var(--r-disp); color: #fff; }
.rl-icon.sm { width: 34px; height: 34px; --cut: 7px; }

/* on/off switch: always there, so a chat turned off can be turned back on */
.rl-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font: 900 12px var(--r-mono); letter-spacing: .08em; text-transform: uppercase; color: #4ADE80; }
.rl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rl-switch i { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #22C55E; transition: background .2s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.rl-switch i::after { content: ''; position: absolute; top: 3px; left: 21px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: left .2s cubic-bezier(.3,1.4,.5,1); }
.rl-switch input:not(:checked) + i { background: rgba(255,255,255,.18); }
.rl-switch input:not(:checked) + i::after { left: 3px; }
.rl-switch input:not(:checked) ~ span { color: rgba(226,224,255,.5); }
.rl-switch input:focus-visible + i { outline: 2px solid var(--r-amber); outline-offset: 2px; }

.rl-chat-off { --cut: 9px; --bg: rgba(231,76,60,.14); --bd: rgba(231,76,60,.45); display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px;
  margin-bottom: 10px; font: 700 13px/1.35 var(--r-disp); color: #FFC9C2; }
.rl-chat-off[hidden] { display: none; }
.rl-chat-off span { flex: 1; }
.rl-chat-off button { --cut: 7px; --bg: #fff; flex: none; padding: 7px 12px; cursor: pointer; color: #1B1A33; font: 900 12px var(--r-disp); }
.rl-chat-off button:hover { --bg: var(--r-amber); }

/* the pinned message */
.rl-pinned { --cut: 10px; --bg: linear-gradient(135deg, rgba(241,196,15,.2), rgba(241,196,15,.07)); --bd: rgba(241,196,15,.5);
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; margin-bottom: 10px; animation: rlDrop2 .3s ease-out; }
.rl-pinned[hidden] { display: none; }
@keyframes rlDrop2 { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rl-pin-ic { display: flex; flex: none; color: #F1C40F; }
.rl-pinned > div { flex: 1; min-width: 0; }
.rl-pinned small { display: block; font: 800 10px var(--r-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r-amber); }
.rl-pinned p { margin: 3px 0 0; font: 700 15px/1.4 var(--r-disp); color: #fff; word-break: break-word; }
.rl-pinned button { appearance: none; border: 0; background: none; color: rgba(255,255,255,.55); width: 24px; height: 24px; flex: none;
  font: 900 17px/1 var(--r-disp); cursor: pointer; }
.rl-pinned button:hover { color: #FF8F84; }

/* messages: the room's on the left, the host's own on the right */
.rl-msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 2px 4px 2px 0; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.rl-msgs:empty::before { content: attr(data-empty); margin: auto; text-align: center; font: 700 13px var(--r-disp); color: rgba(226,224,255,.45); }
.rl-m { --cut: 9px; --bg: rgba(255,255,255,.08); position: relative; align-self: flex-start; max-width: 86%; min-width: 96px; box-sizing: border-box;
  padding: 6px 11px 8px; font: 600 14px/1.42 var(--r-disp); color: #fff; word-break: break-word; animation: rlMsg .22s ease-out; }
@keyframes rlMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rl-m.mine { align-self: flex-end; --bg: linear-gradient(135deg, rgba(241,196,15,.3), rgba(241,196,15,.16)); }
.rl-m-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.rl-m-hd b { flex: 1; min-width: 0; font: 900 12px var(--r-disp); color: #C4AAFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-m.mine .rl-m-hd b { color: var(--r-amber); }
.rl-m time { flex: none; font: 700 10px var(--r-mono); color: rgba(226,224,255,.45); font-variant-numeric: tabular-nums; }
.rl-m-act { position: absolute; top: 3px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.rl-m:hover .rl-m-act, .rl-m:focus-within .rl-m-act { opacity: 1; }
.rl-m:hover time, .rl-m:focus-within time { visibility: hidden; }
.rl-m-act button { appearance: none; border: 0; width: 22px; height: 22px; border-radius: 4px; padding: 0; background: rgba(8,6,30,.75);
  color: rgba(255,255,255,.7); font: 900 15px/1 var(--r-disp); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rl-m-act .pin:hover { color: var(--r-amber); }
.rl-m-act .del:hover { color: #FF8F84; }
.rl-chat-in { display: flex; gap: 6px; margin-top: 10px; }
.rl-chat-in input { --cut: 8px; --bw: 2px; --bd: rgba(255,255,255,.14); --bg: rgba(0,0,0,.35); flex: 1; min-width: 0; height: 44px; padding: 0 12px;
  color: #fff; font: 700 14px var(--r-disp); outline: none; }
.rl-chat-in input:focus { --bd: var(--r-amber); }
.rl-chat-in button { --cut: 8px; --bg: var(--r-amber); width: 46px; height: 44px; flex: none; color: #2C1F0A; cursor: pointer; display: flex; align-items: center; justify-content: center; }

@media (max-width: 1100px) { .rl-lobby { --chat-w: 310px; } }
@media (max-width: 760px) {
  .rl-lobby { flex-direction: column; }
  .rl-chat { transition: transform .34s var(--chat-ease), visibility 0s; }
  .rl-lobby.chat-hidden .rl-chat { transition: transform .3s var(--chat-ease), visibility 0s .3s; }
  .rl-stage { flex: 1 1 auto; min-height: 0; }
  /* the chat comes up from the bottom edge, the tab riding on top of it */
  .rl-lobby { --chat-h: 40vh; --tab-h: 42px; }
  .rl-stage, .rl-lobby.chat-hidden .rl-stage { margin-right: 0; }
  .rl-stage { margin-bottom: calc(var(--tab-h) + var(--chat-h)); }
  .rl-lobby.chat-hidden .rl-stage { margin-bottom: var(--tab-h); }
  .rl-chat { top: auto; left: 0; width: 100%; height: var(--chat-h); border-left: 0; border-top: 1px solid rgba(196,178,255,.16); box-shadow: none; }
  .rl-chat-body { width: 100%; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .rl-lobby.chat-hidden .rl-chat { transform: translateY(100%); border-top: 0; }
  .rl-lobby.on .rl-chat-body { animation: none; }
  .rl-chat-tab { position: absolute; top: auto; right: 0; left: 0; bottom: 0; margin: 0; width: 100%; height: var(--tab-h); flex-direction: row; gap: 7px;
    clip-path: none; border: 0; border-top: 1px solid rgba(196,178,255,.16);
    transform: translateY(calc(-1 * var(--chat-h))); }
  .rl-lobby.chat-hidden .rl-chat-tab { transform: none; }
  .rl-tab-lbl { display: inline; font: 900 13px var(--r-disp); letter-spacing: .08em; text-transform: uppercase; }
  .rl-lobby.chat-off .rl-tab-lbl { color: rgba(226,224,255,.5); }
  .rl-tab-count { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.3); color: #fff; font: 900 15px var(--r-disp); }
  .rl-tab-count svg { color: var(--r-dim); }
  .rl-chat-tab .rl-chev { position: absolute; right: 14px; top: 50%; margin-top: -8px; }
  .rl-chev { transform: rotate(90deg); }
  .rl-lobby.chat-hidden .rl-chev { transform: rotate(-90deg); }
  /* the bar's pieces go elsewhere: the count into the chat tab, the theme,
     lock and Start into a slim rail down the right-hand edge */
  .rl-bar { display: contents; }
  .rl-bar .rl-count { display: none; }
  .rl-ctrl { position: absolute; z-index: 4; right: 8px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 8px; padding: 6px;
    background: rgba(10,8,34,.62); border: 1px solid rgba(196,178,255,.18); border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .rl-ctrl:empty { display: none; }
  .rl-ctrl .rl-icon { width: 40px; height: 40px; --cut: 8px; }
  .rl-ctrl #rlStart { --chamfer: 9px; width: 40px; height: 46px; padding: 0; font-size: 0; letter-spacing: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .rl-ctrl #rlStart svg { display: none; }
  .rl-ctrl #rlStart::after { content: ''; order: -1; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent currentColor; margin-left: 3px; }

  .rl-unread { position: static; }
  .rl-chat-hd { padding-bottom: 8px; margin-bottom: 8px; }
  .rl-chat-hd b { font-size: 17px; }
  .rl-m { padding-right: 60px; }
  .rl-m-act { opacity: 1; top: 50%; transform: translateY(-50%); }
  .rl-m-act button { width: 24px; height: 24px; background: rgba(8,6,30,.45); }
  .rl-m:hover time, .rl-m:focus-within time { visibility: visible; }
  .rl-chat-in input { font-size: 16px; }
}
/* reactions rising over the big screen */
.rx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147482990; overflow: hidden; }
.rx { position: absolute; bottom: -60px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: rxRise 3.2s cubic-bezier(.2,.6,.4,1) forwards; }
.rx i { font-style: normal; font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.rx i img { display: block; width: 64px; height: 64px; object-fit: contain; }
.rx small { font: 900 12px var(--disp, 'Nunito', sans-serif); color: #fff; background: rgba(8,6,30,.7); padding: 2px 7px; white-space: nowrap; }
@keyframes rxRise { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translate(0, -60px) scale(1.1); }
  100% { transform: translate(var(--dx), -62vh) scale(1); opacity: 0; } }
.rl-players { width: min(1200px, 100%); flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap;
  justify-content: center; align-content: flex-start; gap: 14px; padding: 8px 4px 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.rl-p { --cut: 13px; --bg: rgba(255,255,255,.13); position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 340px;
  padding: 7px 18px 7px 7px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.28)); animation: rlIn .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes rlIn { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.rl-p img { --cut: 9px; --bg: rgba(0,0,0,.28); width: 62px; height: 62px; object-fit: contain; flex: none; padding: 3px; }
.rl-p b { min-width: 0; font: 900 24px/1.2 var(--r-disp); color: var(--fg, #fff); text-shadow: var(--ts, 0 1px 2px rgba(0,0,0,.35));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-p.away { opacity: .45; }
.rl-p button { --cut: 5px; --bg: #E74C3C; width: 22px; height: 22px; flex: none; margin-left: 2px; color: #fff;
  font: 900 14px/1 var(--r-disp); cursor: pointer; opacity: 0; transition: opacity .15s; }
.rl-p:hover button, .rl-p button:focus-visible { opacity: 1; }
/* make this player the host */
.rl-p .rl-crown { --bg: #F5B700; color: #2C1F0A; display: grid; place-items: center; }
.rl-p .rl-crown[hidden] { display: none; }
.rl-host-who { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 12px; border-radius: 10px; background: rgba(255,255,255,.07); }
.rl-host-who img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.rl-host-who b { min-width: 0; font: 900 19px/1.2 var(--r-disp); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-host-btns { display: flex; gap: 10px; }
.rl-host-btns > button { margin: 0; white-space: nowrap; }
.rl-host-btns .rl-add-go { flex: 1; }
.rl-host-no { --cut: 9px; --bg: rgba(255,255,255,.1); height: 46px; padding: 0 18px; color: #fff; font: 900 14px var(--r-disp); text-transform: uppercase; cursor: pointer; }
.rl-host-no:hover { --bg: rgba(255,255,255,.18); }
.rl-theme-pop.rl-host-pop { position: fixed; z-index: 30; }
/* a player's card, tapped on a phone: its actions */
.rl-card-pop .rl-host-who { margin-right: 40px; }
.rl-card-act { --cut: 9px; --bg: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px;
  margin-top: 8px; cursor: pointer; color: #fff; font: 900 15px var(--r-disp); text-transform: uppercase; }
.rl-card-act[hidden] { display: none; }
.rl-card-act:not(.danger) { --bg: var(--r-amber); color: #2C1F0A; }
.rl-card-act.danger { --bg: rgba(231,76,60,.22); color: #FF9B90; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .rl-p { cursor: pointer; }
  .rl-p button, .rl-p .rl-crown { display: none; }
}
/* the room changing hands: a spinner over the lobby */
.rl-swap { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(10,8,34,.78); backdrop-filter: blur(4px); animation: rlShadeIn .2s ease-out; }
.rl-swap[hidden] { display: none; }
.rl-swap i { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,.18); border-top-color: var(--r-amber); animation: rlSpin .8s linear infinite; }
.rl-swap b { font: 900 18px var(--r-disp); color: #fff; }
@keyframes rlSpin { to { transform: rotate(360deg); } }
#joinLayer.rl-swap-wait, #joinLayer.rl-swap-wait * { visibility: hidden !important; pointer-events: none !important; }
/* the room's own lines in the chat */
.rl-m.rl-sys, .rj-m.rj-sys { align-self: center; max-width: 92%; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: none;
  color: rgba(233,242,240,.7); font: 700 12px/1.4 var(--r-disp); text-align: center; clip-path: none; }
.rl-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px; }
.rl-empty img { width: 120px; height: 120px; object-fit: contain; animation: rjBob 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.rl-empty b { font: 900 28px var(--r-disp); color: #fff; }
.rl-empty small { font: 600 13px/1.6 var(--r-mono); color: var(--r-dim); max-width: 420px; }
@media (max-width: 760px) { .rl-empty small { max-width: 220px; } }

.rl-foot { width: min(1200px, 100%); display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: none; }
.rl-foot .big.ghost { font-size: 13px; padding: 8px 16px; }
/* the lobby's own buttons (Back to setup, Close room; a guest's Reactions,
   Edit, Leave; the set start time's Edit, Cancel): flat, like the player count */
.rl-fbtn { --cut: 9px; --bg: rgba(0,0,0,.34); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px;
  flex: none; cursor: pointer; color: #fff; font: 900 14px var(--r-disp); white-space: nowrap; transition: transform .12s; }
.rl-fbtn svg { flex: none; }
.rl-fbtn:hover { --bg: rgba(0,0,0,.52); transform: translateY(-1px); }
.rl-fbtn:active { transform: translateY(1px); }
.rl-fbtn:focus-visible { outline: 2px solid var(--r-amber); outline-offset: 2px; }
/* the host has no duck in the room yet: "Add my duck", lit amber */
.rl-fbtn.rl-add-me { --bg: rgba(241,196,15,.18); --bw: 1px; --bd: rgba(255,216,74,.7); color: #FFD84A; animation: rlAddMe 2.4s ease-in-out 3; }
.rl-fbtn.rl-add-me:hover { --bg: rgba(241,196,15,.3); }
@keyframes rlAddMe { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 10px rgba(255,216,74,.55)); } }
.rl-fbtn.danger svg { color: #FF8F84; }
.rl-fbtn.danger:hover { --bg: rgba(200,48,64,.9); }
.rl-fbtn.danger:hover svg { color: #fff; }
.rl-foot .big.ghost.danger { color: #fff; background-color: rgba(255,128,112,.6); filter: drop-shadow(0 4px 0 #4E0E1C); }
.rl-foot .big.ghost.danger::before { background-color: #9E2236;
  background-image: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 9px, rgba(255,255,255,0) 9px 18px); }
.rl-foot .big.ghost.danger:hover { filter: drop-shadow(0 6px 0 #4E0E1C); }
.rl-foot .big.ghost.danger:hover::before { background-color: #BC2C44; }
.rl-foot .big.ghost.danger:active { filter: drop-shadow(0 1px 0 #4E0E1C); }
.rl-msg { margin-right: auto; font-family: var(--r-mono); font-size: 12px; color: var(--r-dim); }

.rl-qr-big { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5,6,20,.5); cursor: zoom-out; }
.rl-qr-big[hidden] { display: none; }
.rl-qr-big { animation: rlShadeIn .3s ease-out; }
.rl-qr-big.out { animation: rlShadeOut .32s ease-in forwards; pointer-events: none; }
.rl-qr-big.out .rl-qr-card { animation: rlZoomOut .32s cubic-bezier(.5,0,.75,.2) forwards; }
@keyframes rlShadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rlShadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes rlZoomOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.55) translateY(14px); } }
.rl-qr-card { --cut: 18px; --bg: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; color: #1B1A33;
  animation: rlIn .3s ease-out; }
#rlQrBigCode, [data-el="qrBigCode"] { width: min(68vh, 80vw); aspect-ratio: 1; }
.rl-qr-card b { font: 900 48px/1 var(--r-disp); letter-spacing: .08em; }
.rl-qr-card small { font: 700 12px var(--r-mono); color: #6A6A84; }

@media (max-width: 760px) {
  .rl-stage { padding: 0 12px 10px; }
  .rl-pin { --cut: 14px; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code join qr"; }
  .rl-code { grid-area: code; padding: 8px 14px 9px; }
  .rl-code small { font-size: 11px; }
  .rl-code b { font-size: 31px; letter-spacing: .06em; }
  .rl-join { grid-area: join; min-width: 0; gap: 2px; padding: 8px 10px; border-left: 2px solid #ECEBF3; }
  .rl-join small { font-size: 10px; }
  .rl-join b { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rl-qr { grid-area: qr; width: 66px; padding: 5px; }
  .rl-bar { grid-template-columns: auto 1fr; margin: 14px 0 12px; }
  .rl-logo { display: none; }
  .rl-count { font-size: 20px; padding: 7px 12px; }
  .rl-icon { width: 42px; height: 42px; }
  #rlStart { font-size: 18px; padding: 10px 26px; }
  .rl-players { gap: 10px; }
  .rl-p { padding-right: 14px; gap: 10px; max-width: 100%; }
  .rl-p img { width: 48px; height: 48px; }
  .rl-p b { font-size: 19px; }
  .rl-p button { opacity: 1; }
  .rl-empty b { font-size: 22px; }
  .rl-foot { flex-wrap: wrap; gap: 8px; }
  .rl-msg { flex-basis: 100%; text-align: center; }
  .rl-foot .big.ghost, .rl-foot .rl-fbtn { flex: 1; }
}

/* ── guest: join screens (in the game's #joinLayer, or join.html) ──── */
#joinLayer { display: flex; overflow-y: auto; padding: 24px 16px; }
#joinRoot { margin: auto; }
/* on a phone the join screens start at the top instead of floating in the middle */
@media (max-width: 640px) { #joinLayer { padding: 16px 14px; } #joinRoot { margin: 0 auto; } }
.rj { position: relative; width: min(460px, 100%); color: var(--r-ink); font-family: var(--r-disp); -webkit-tap-highlight-color: transparent; }
.rj-card { display: flex; flex-direction: column; }
.rj-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin-bottom: 18px; }
.rj-logo { grid-column: 2; grid-row: 1; justify-self: center; height: 48px; width: auto; max-width: 100%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.rj-lang { --cut: 9px; --bg: rgba(22,19,64,.84); --bd: rgba(196,178,255,.35); grid-column: 3; grid-row: 1; width: 42px; height: 42px; padding: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: transform .12s; }
.rj-lang:hover { --bg: rgba(40,34,110,.94); transform: translateY(-2px); }
.rj-preview .rj-room { align-self: flex-start; margin: 0 0 2px; }
.rj-room[hidden] { display: none; }
/* two buttons side by side (Scan + Leave, Join another room + Leave) */
.rj-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.rj-row:has(> .rj-exit[hidden]) { grid-template-columns: 1fr; }
.rj-row .rj-btn { width: auto; margin-top: 14px; }
.rj-or + .rj-row .rj-btn { margin-top: 14px; }
.rj-btn[hidden] { display: none; }
.rj-exit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-left: 20px; padding-right: 20px; }
.rj-room { --cut: 7px; --bg: #fff; margin-left: auto; font: 900 13px var(--r-mono); letter-spacing: .18em; color: #1B1A33;
  text-transform: uppercase; padding: 6px 11px; }
.rj-screen { display: none; flex-direction: column; flex: 1; animation: rjIn .28s ease-out; }
.rj-screen.on { display: flex; }
@keyframes rjIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rj-title { margin: 4px 0 6px; font: 900 28px/1.15 var(--r-disp); color: #fff; text-align: center; }
.rj-sub { margin: 0 0 18px; font: 600 14px/1.55 var(--r-disp); color: rgba(226,224,255,.68); text-align: center; }
.rj-label { display: block; margin: 18px 0 8px; font: 800 11px var(--r-disp); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(226,224,255,.68); }
.rj-input { --cut: 12px; --bw: 2px; --bd: rgba(255,255,255,.12); --bg: rgba(0,0,0,.32); width: 100%; box-sizing: border-box;
  font: 800 20px var(--r-disp); color: #fff; padding: 13px 16px; outline: none; }
.rj-input:focus { --bd: var(--r-amber); }
.rj-code::placeholder { font-size: 22px; letter-spacing: .14em; color: rgba(226,224,255,.3); text-transform: none; }
.rj-code { text-align: center; font-family: var(--r-mono); font-size: 40px; letter-spacing: .32em; text-transform: uppercase; padding: 14px 8px; color: var(--r-amber); }
/* buttons: the same chamfered, striped amber button as Start Race in the
   game (.big there), with its border ring, drop and shine sweep */
.rj-btn { --chamfer: 16px; --bw: 3px; position: relative; isolation: isolate; appearance: none; border: 0; width: 100%; margin-top: 18px;
  padding: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; overflow: hidden;
  font: 900 20px var(--r-disp); text-transform: uppercase; letter-spacing: .01em; color: #2C1F0A; text-shadow: 1px 1px 0 rgba(255,255,255,.25);
  background-color: var(--r-amber-bd);
  clip-path: polygon(0 0, calc(100% - calc(var(--chamfer) * var(--cut-k))) 0, 100% calc(var(--chamfer) * var(--cut-k)), 100% 100%, calc(var(--chamfer) * var(--cut-k)) 100%, 0 calc(100% - calc(var(--chamfer) * var(--cut-k))));
  filter: drop-shadow(0 5px 0 var(--r-amber-sh)); transition: transform .12s, filter .12s; }
.rj-btn::before { content: ''; position: absolute; inset: var(--bw); z-index: -1;
  clip-path: polygon(0 0, calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))) 0, 100% calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)),
    100% 100%, calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)) 100%, 0 calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))));
  background-color: var(--r-amber);
  background-image: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.1) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 9px, rgba(255,255,255,0) 9px 18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.rj-btn:not(.ghost)::after { content: ''; position: absolute; top: -30%; left: 0; width: 26%; height: 160%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75) 45%, rgba(255,255,255,.75) 55%, transparent);
  transform: translateX(-220%) skewX(-22deg); animation: rjShine 3.4s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes rjShine { 0% { transform: translateX(-220%) skewX(-22deg); } 32%, 100% { transform: translateX(480%) skewX(-22deg); } }
.rj-btn:hover { transform: translateY(-2px); filter: brightness(1.08) drop-shadow(0 7px 0 var(--r-amber-sh)); }
.rj-btn:active { transform: translateY(3px); filter: brightness(.97) drop-shadow(0 2px 0 var(--r-amber-sh)); }
.rj-btn[disabled] { opacity: .55; cursor: wait; }
.rj-btn.ghost { --chamfer: 12px; color: #fff; font-size: 16px; padding: 12px; text-shadow: none; margin-top: 14px;
  background-color: rgba(196,178,255,.34); filter: drop-shadow(0 4px 0 rgba(8,6,30,.6)); }
.rj-btn.ghost::before { background-color: rgba(28,24,80,.92);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,0) 9px 18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.rj-btn.ghost:hover { filter: drop-shadow(0 6px 0 rgba(8,6,30,.6)); }
.rj-btn.ghost:hover::before { background-color: rgba(46,40,120,.96); }
.rj-btn.ghost:active { filter: drop-shadow(0 1px 0 rgba(8,6,30,.6)); }
.rj-btn.ghost.danger { color: #fff; background-color: rgba(255,128,112,.6); filter: drop-shadow(0 4px 0 #4E0E1C); }
.rj-btn.ghost.danger::before { background-color: #9E2236;
  background-image: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 9px, rgba(255,255,255,0) 9px 18px); }
.rj-btn.ghost.danger:hover { filter: drop-shadow(0 6px 0 #4E0E1C); }
.rj-btn.ghost.danger:hover::before { background-color: #BC2C44; }
.rj-btn.ghost.danger:active { filter: drop-shadow(0 1px 0 #4E0E1C); }
/* "Scan the QR code": teal, apart from the plain and the red buttons */
.rj-btn.ghost.scan { background-color: rgba(120,240,220,.55); filter: drop-shadow(0 4px 0 #063C3A); }
.rj-btn.ghost.scan::before { background-color: #138A80;
  background-image: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 9px, rgba(255,255,255,0) 9px 18px); }
.rj-btn.ghost.scan:hover { filter: drop-shadow(0 6px 0 #063C3A); }
.rj-btn.ghost.scan:hover::before { background-color: #18A397; }
.rj-btn.ghost.scan:active { filter: drop-shadow(0 1px 0 #063C3A); }
.rj-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font: 800 11px var(--r-mono); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(226,224,255,.45); }
.rj-or::before, .rj-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.rj-or + .rj-btn { margin-top: 14px; }
/* the QR scanner (js/qr-scan.js): the camera full screen, a box to aim at */
.qs { position: fixed; inset: 0; z-index: 2147483600; display: flex; flex-direction: column; align-items: center; background: #000;
  color: #fff; font-family: var(--r-disp); -webkit-tap-highlight-color: transparent; }
.qs[hidden] { display: none; }
.qs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs.nocam .qs-video { display: none; }
.qs.nocam { background: var(--r-bg, #0E1030); }
.qs-top { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 14px 14px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.qs-top b { font: 900 17px var(--r-disp); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.qs-btn { --cut: 10px; --bg: rgba(0,0,0,.45); --bd: rgba(255,255,255,.25); width: 46px; height: 46px; display: flex; align-items: center;
  justify-content: center; color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qs-btn[hidden] { visibility: hidden; display: flex; }
.qs-btn.on { --bg: var(--r-amber); color: #2C1F0A; }
.qs-view { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 5vh, 44px); }
.qs-logo { position: relative; z-index: 2; width: min(300px, 70vw); height: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
/* everything outside the box is dimmed; the corners and the sweep mark it */
.qs-box { position: relative; width: min(72vw, 300px); aspect-ratio: 1; box-shadow: 0 0 0 200vmax rgba(0,0,0,.55); }
.qs.nocam .qs-box { box-shadow: none; opacity: .5; }
.qs-box i { position: absolute; width: 42px; height: 42px; border: 5px solid var(--r-amber); transition: border-color .2s; }
.qs-box i:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.qs-box i:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.qs-box i:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.qs-box i:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.qs-line { position: absolute; left: 6%; right: 6%; top: 8%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--r-amber), transparent); box-shadow: 0 0 14px var(--r-amber);
  animation: qsSweep 2.2s ease-in-out infinite alternate; }
@keyframes qsSweep { to { top: 92%; } }
.qs.nocam .qs-line { display: none; }
.qs.ok .qs-box i { border-color: #4ADE80; }
.qs.ok .qs-line { background: #4ADE80; box-shadow: 0 0 18px #4ADE80; }
.qs-hint { position: relative; z-index: 2; max-width: 340px; margin: 0 24px 18px; text-align: center; font: 700 15px/1.5 var(--r-disp);
  text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.qs-hint.bad { color: #FFB4AC; }
.qs-bottom { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center;
  padding: 10px 16px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }
.qs-upload { --cut: 12px; --bg: rgba(0,0,0,.5); --bd: rgba(255,255,255,.3); display: flex; align-items: center; gap: 10px; padding: 13px 22px;
  color: #fff; cursor: pointer; font: 900 15px var(--r-disp); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qs.nocam .qs-upload { --bg: var(--r-amber); --bd: var(--r-amber); color: #2C1F0A; }
.rj-err { color: #FF8F84; font: 700 13px var(--r-disp); min-height: 18px; margin-top: 12px; text-align: center; }
.rj-conn { font-family: var(--r-mono); font-size: 10px; letter-spacing: .1em; color: var(--r-dim); text-align: center; min-height: 14px; margin-top: 10px; }
.rj-conn.bad { color: #F87171; }
.rj-tabs { --cut: 11px; --bg: rgba(0,0,0,.32); --bd: rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 12px; }
.rj-tabs button { --cut: 8px; flex: 1 1 auto; cursor: pointer; padding: 8px 12px; color: rgba(226,224,255,.68);
  font: 800 13px var(--r-disp); white-space: nowrap; transition: color .15s; }
.rj-tabs button:hover { --bg: rgba(255,255,255,.07); color: #fff; }
.rj-tabs button[aria-selected="true"] { --bg: #fff; color: #1B1A40; }
/* fixed-size tiles: a 192-px thumbnail shown at 64 px stays sharp up to 3x
   screens and is never blown up on a big monitor */
.rj-grid { display: grid; grid-template-columns: repeat(auto-fill, 76px); justify-content: center; gap: 8px;
  max-height: 300px; overflow-y: auto; padding: 2px 6px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(241,196,15,.55) rgba(233,242,240,.06); }
.rj-grid::-webkit-scrollbar { width: 8px; }
.rj-grid::-webkit-scrollbar-track { background: rgba(233,242,240,.06); border-radius: 8px; }
.rj-grid::-webkit-scrollbar-thumb { background: rgba(241,196,15,.55); border-radius: 8px; }
.rj-grid button { --cut: 12px; --bw: 2px; --bg: rgba(255,255,255,.07); width: 76px; height: 76px; padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.rj-grid button:hover { --bg: rgba(255,255,255,.12); transform: translateY(-2px); }
.rj-grid button[aria-pressed="true"] { --bd: var(--r-amber); --bg: rgba(241,196,15,.16); }
.rj-grid img { width: 64px; height: 64px; object-fit: contain; }
.rj-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 0; }
.rj-pill { --cut: 7px; --bg: var(--r-amber); display: inline-block; margin-bottom: 14px; padding: 7px 14px; font: 900 18px var(--r-mono);
  letter-spacing: .2em; text-transform: uppercase; color: #2C1F0A; }
.rj-hero { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); animation: rjBob 2.4s ease-in-out infinite; }
.rj-hero[hidden] { display: none; }
@keyframes rjBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.rj-emoji { font-size: 56px; line-height: 1; margin-bottom: 8px; }
.rj-rank-num { font: 900 96px/1 var(--r-disp); letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; color: #fff; }
.rj-rank-num small { font-size: 28px; color: var(--r-dim); font-weight: 800; }
.rj-trend { font: 800 15px var(--r-mono); min-height: 22px; }
.rj-trend.up { color: #4ADE80; } .rj-trend.dn { color: #F87171; }
.rj-gap { font: 700 13px var(--r-mono); color: var(--r-dim); margin: 8px 0 12px; }
.rj-win { font: 900 40px/1.1 var(--r-disp); color: #FFD84A; text-shadow: 0 0 30px rgba(255,201,74,.45); margin-top: 6px; }
/* the phone: reactions and chat under the waiting / race / result screens */
.rj-rx { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.rj-rx button { --cut: 7px; --bg: rgba(255,255,255,.08); min-width: 0; height: 44px; padding: 0; font-size: 21px; line-height: 1; cursor: pointer; transition: transform .1s; }
.rj-rx button:active { transform: scale(.86); --bg: rgba(241,196,15,.25); }
.rj[data-screen="race"] .rj-chat { display: none; }
.rj-chat-shut .rj-chat { display: none; }
.rj-chat { animation: rjIn .25s ease-out; }
.rj-chat { --cut: 14px; --bg: rgba(4,4,24,.34); --bd: rgba(255,255,255,.1); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rj-msgs { list-style: none; margin: 0; padding: 0; max-height: 210px; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.rj-msgs:empty::before { content: attr(data-empty); margin: auto; font: 700 13px var(--r-disp); color: rgba(226,224,255,.45); }
.rj-m { --cut: 8px; --bg: rgba(255,255,255,.08); position: relative; align-self: flex-start; max-width: 85%; min-width: 84px; box-sizing: border-box; padding: 5px 10px 7px;
  font: 600 14px/1.4 var(--r-disp); color: #fff; word-break: break-word; }
.rj-m-hd { display: flex; align-items: baseline; gap: 8px; }
.rj-m-hd b { flex: 1; min-width: 0; font: 900 11px var(--r-disp); color: #C4AAFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rj-m time { flex: none; margin-left: auto; font: 700 10px var(--r-mono); color: rgba(226,224,255,.45); font-variant-numeric: tabular-nums; }
.rj-m.me { align-self: flex-end; --bg: rgba(142,92,240,.38); }
.rj-m.me .rj-m-hd b { display: none; }
.rj-m.host { --bg: rgba(241,196,15,.16); }
.rj-m.host b { color: var(--r-amber); }
/* the message the host pinned */
.rj-pinned { --cut: 9px; --bg: linear-gradient(135deg, rgba(241,196,15,.22), rgba(241,196,15,.08)); --bd: rgba(241,196,15,.5);
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; }
.rj-pinned[hidden] { display: none; }
.rj-pinned > div { flex: 1; min-width: 0; }
.rj-pinned small { display: block; font: 800 10px var(--r-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r-amber); }
.rj-pinned p { margin: 2px 0 0; font: 700 14px/1.4 var(--r-disp); color: #fff; word-break: break-word; }
.rj-chat-in { display: flex; gap: 6px; }
.rj-chat-in[hidden] { display: none; }
.rj-chat-in .rj-input { font-size: 16px; padding: 10px 12px; }
.rj-send { --cut: 10px; --bg: var(--r-amber); flex: none; width: 50px; color: #2C1F0A; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rj-chat-note { font: 700 12px var(--r-disp); color: rgba(226,224,255,.6); text-align: center; min-height: 0; }
.rj-chat-note:empty { display: none; }
.rj[data-screen="result"] .rj-hero { width: 130px; height: 130px; }
.rj-floats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 38; }
.rj-float { position: absolute; bottom: 60px; display: flex; flex-direction: column; align-items: center; animation: rxRise 2.6s cubic-bezier(.2,.6,.4,1) forwards; }
.rj-float i { font-style: normal; font-size: 36px; line-height: 1; }
.rj-float i img { display: block; width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.rj-float small { font: 900 11px var(--r-disp); color: #fff; background: rgba(8,6,30,.7); padding: 1px 6px; white-space: nowrap; }
/* the live map of the race */
.rj.rj-live .rj-rank { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.rj.rj-live .rj-rank[hidden] { display: none; }
.rj.rj-live .rj-rank-num { font-size: 54px; margin: 0; }
.rj.rj-live .rj-rank-num small { font-size: 20px; }
.rj.rj-live .rj-rank-side { text-align: left; }
.rj.rj-live .rj-gap { margin: 2px 0 0; }
.rj-count { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8,6,30,.88); z-index: 40; }
.rj-count.on { display: flex; }
/* the big screen's own countdown figures: condensed, near-white, Go in gold */
.rj-count b { font-family: 'Barlow Condensed', Impact, var(--r-disp), sans-serif; font-size: min(42vw, 210px); font-weight: 700; line-height: .8;
  letter-spacing: -.01em; text-transform: uppercase; color: #E9F2F0; text-align: center;
  text-shadow: 0 4px 30px rgba(3,6,10,.85), 0 0 70px rgba(3,6,10,.75); animation: rjBeat .7s cubic-bezier(.15,1.3,.3,1) both; }
.rj-count.go b { color: #FFC94A; }
@keyframes rjBeat { 0% { transform: scale(1.55); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rjPop { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.rj-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 39; }
.rj-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: rjFall linear forwards; }
@keyframes rjFall { to { transform: translateY(110vh) rotate(720deg); } }

/* ── a guest's lobby: the host's lobby layout (.rl-lobby above), full
   screen over the join card. Only what differs is here: no theme, lock or
   Start, Edit and Leave in the footer, the chat column holds the guest's
   chat (moved in by js/room-join.js), and a ghost button style of its own,
   since join.html doesn't load the game's stylesheet. ── */
.rj-lobbyview { position: fixed; inset: 0; z-index: 35; background: var(--lb-bg, var(--r-bg)); color: var(--r-ink); text-align: left;
  font-family: var(--r-disp); overscroll-behavior: contain; }
.rj-lobbyview[hidden] { display: none; }
/* the host has paused the race: the standings say so */
.rj-st-pz { list-style: none; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,216,74,.16);
  box-shadow: inset 0 0 0 1px rgba(255,216,74,.5); color: #FFD84A; font: 800 13px var(--r-disp); }
body:has(.rj-in-lobby) { overflow: hidden; }
.rj-lobbyview .rl-qr[hidden] { display: none; }
.rj-lobbyview .big.ghost { --chamfer: 12px; --bw: 3px; position: relative; isolation: isolate; appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; color: #fff;
  font: 900 13px var(--r-disp); letter-spacing: .01em; text-transform: uppercase; background-color: rgba(196,178,255,.34);
  clip-path: polygon(0 0, calc(100% - calc(var(--chamfer) * var(--cut-k))) 0, 100% calc(var(--chamfer) * var(--cut-k)), 100% 100%, calc(var(--chamfer) * var(--cut-k)) 100%, 0 calc(100% - calc(var(--chamfer) * var(--cut-k))));
  filter: drop-shadow(0 4px 0 rgba(8,6,30,.6)); transition: filter .12s, transform .12s; }
.rj-lobbyview .big.ghost::before { content: ''; position: absolute; inset: var(--bw); z-index: -1;
  clip-path: polygon(0 0, calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))) 0, 100% calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)), 100% 100%,
    calc(calc(var(--chamfer) * var(--cut-k)) - var(--bw)) 100%, 0 calc(100% - (calc(var(--chamfer) * var(--cut-k)) - var(--bw))));
  background-color: rgba(28,24,80,.92);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.12) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,0) 9px 18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.rj-lobbyview .big.ghost:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 0 rgba(8,6,30,.6)); }
.rj-lobbyview .big.ghost:hover::before { background-color: rgba(46,40,120,.96); }
.rj-lobbyview .big.ghost:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(8,6,30,.6)); }
.rj-lobbyview .big.ghost.danger { color: #fff; background-color: rgba(255,128,112,.6); filter: drop-shadow(0 4px 0 #4E0E1C); }
.rj-lobbyview .big.ghost.danger::before { background-color: #9E2236;
  background-image: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.16) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 9px, rgba(255,255,255,0) 9px 18px); }
.rj-lobbyview .big.ghost.danger:hover::before { background-color: #BC2C44; }
.rj-lstatus { display: flex; align-items: center; gap: 8px; min-width: 0; font: 800 13px/1.35 var(--r-disp); color: rgba(226,224,255,.78); }
.rj-lstatus i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: rjLive 1.8s ease-out infinite; }
@keyframes rjLive { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } }
/* the guest's chat, dressed as the host's column */
.rj-lobbyview .rj-msgs { flex: 1; min-height: 0; max-height: none; gap: 8px; padding: 2px 4px 2px 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.rj-lobbyview .rj-msgs:empty::before { margin: auto; text-align: center; }
.rj-lobbyview .rj-m { --cut: 9px; max-width: 86%; min-width: 96px; padding: 6px 11px 8px; }
.rj-lobbyview .rj-m.me { --bg: linear-gradient(135deg, rgba(142,92,240,.55), rgba(110,70,220,.34)); }
.rj-lobbyview .rj-m.me .rj-m-hd b { display: block; color: #E2D6FF; }
.rj-m.me { --bg: linear-gradient(135deg, rgba(142,92,240,.55), rgba(110,70,220,.34)); }
.rj-lobbyview .rj-pinned { margin-bottom: 10px; }
.rj-lobbyview .rj-rx { gap: 4px; margin-top: 10px; }
.rj-lobbyview .rj-rx button { height: 36px; font-size: 18px; --cut: 6px; }
.rj-lobbyview .rj-chat-in { margin-top: 10px; }
.rj-lobbyview .rj-chat-in .rj-input { --cut: 8px; height: 44px; padding: 0 12px; font: 700 14px var(--r-disp); }
.rj-lobbyview .rj-send { width: 46px; height: 44px; --cut: 8px; }
.rj-lobbyview .rj-chat-note { margin-top: 6px; }
@media (max-width: 760px) {
  .rj-lobbyview .rj-chat-in .rj-input { font-size: 16px; }
  .rj-lobbyview .rl-foot .big.ghost, .rj-lobbyview .rl-foot .rl-fbtn { flex: 1; }
  .rj-lobbyview .rl-msg { justify-content: center; }
}
.rl-p.me { --bw: 2px; --bd: var(--r-amber); }
/* the host's own duck: a HOST chip after the name */
.rl-p.is-host b::after { content: 'HOST'; display: inline-block; margin-left: 8px; padding: 3px 6px; vertical-align: 3px; border-radius: 4px;
  background: #8E5CF0; color: #fff; font: 900 9px/1 var(--r-mono); letter-spacing: .12em; }
.rj-you { flex: none; padding: 3px 6px; background: var(--r-amber); color: #2C1F0A; font: 900 9px/1 var(--r-mono); letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }

/* ── the profile: a preview of the lobby card, and the card styles ──── */
.rj-preview { --cut: 16px; --bg: rgba(4,4,24,.34); --bd: rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 14px 16px; }
.rj-preview small { font: 800 11px var(--r-disp); letter-spacing: .1em; text-transform: uppercase; color: rgba(226,224,255,.6); }
.rj-preview .rl-p { max-width: 100%; animation: none; transition: transform .15s; }
/* the profile's two tabs: the ducks, or the card styles */
.rj-ptabs { margin-top: 18px; flex-wrap: nowrap; }
.rj-ptabs button { flex: 1 1 0; }
.rj-grid[hidden], .rj-looks-wrap[hidden] { display: none; }
.rj-looks-wrap { max-height: 300px; overflow-y: auto; padding: 2px 6px 4px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(241,196,15,.55) rgba(233,242,240,.06); }
.rj-looks-hd { display: block; margin: 10px 0 7px; font: 800 11px var(--r-disp); letter-spacing: .1em; text-transform: uppercase; color: rgba(226,224,255,.55); }
.rj-looks-hd:first-child { margin-top: 2px; }
.rj-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 7px; }
.rj-looks button { --cut: 8px; position: relative; height: 36px; padding: 0; cursor: pointer; transition: transform .12s; }
.rj-looks button:hover { transform: translateY(-2px); }
.rj-looks button[aria-pressed="true"] { --bw: 3px; --bd: #fff; transform: scale(1.06); }
.rj-looks button[aria-pressed="true"]::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 900 16px var(--r-disp); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ── card styles (the same list is in js/room-join.js and worker/index.js) ── */
.lk-ruby      { --bg: linear-gradient(135deg, #F0525A, #B4232A); }
.lk-tangerine { --bg: linear-gradient(135deg, #FF8A3D, #CF4E0E); }
.lk-sun       { --bg: linear-gradient(135deg, #FFDE5C, #F1A90F); --fg: #2C1F0A; --ts: none; }
.lk-lime      { --bg: linear-gradient(135deg, #B5F04A, #5DA516); --fg: #16290A; --ts: none; }
.lk-emerald   { --bg: linear-gradient(135deg, #34D399, #047857); }
.lk-teal      { --bg: linear-gradient(135deg, #2DD4BF, #0F766E); }
.lk-sky       { --bg: linear-gradient(135deg, #56C8F5, #0B6BA8); }
.lk-royal     { --bg: linear-gradient(135deg, #4F8DF7, #1D45C9); }
.lk-indigo    { --bg: linear-gradient(135deg, #8285F8, #4338CA); }
.lk-grape     { --bg: linear-gradient(135deg, #B76CF8, #7E22CE); }
.lk-rose      { --bg: linear-gradient(135deg, #F472B6, #BE185D); }
.lk-coal      { --bg: linear-gradient(135deg, #4B5568, #161B28); }
.lk-snow      { --bg: linear-gradient(135deg, #FFFFFF, #CBD3E2); --fg: #1B1A33; --ts: none; }
.lk-sunset    { --bg: linear-gradient(120deg, #FF4E6A, #FF9F55); }
.lk-ocean     { --bg: linear-gradient(120deg, #2E3192, #17BCD6); }
.lk-aurora    { --bg: linear-gradient(120deg, #00B894, #6C5CE7 55%, #E056A0); }
.lk-candy     { --bg: repeating-linear-gradient(135deg, #FF6F9F 0 9px, #FF97BB 9px 18px); }
.lk-galaxy    { --bg: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.7px) 3px 4px / 27px 19px,
                      radial-gradient(circle, rgba(255,255,255,.4) 0 .8px, transparent 1.4px) 14px 11px / 37px 23px,
                      linear-gradient(135deg, #1B1450, #5B2A86 60%, #2A1B6B); }
.lk-fire      { --bg: linear-gradient(0deg, #D92B00, #FF7A00 55%, #FFC400); }
.lk-stripes   { --bg: repeating-linear-gradient(-45deg, rgba(255,255,255,.17) 0 7px, transparent 7px 14px), linear-gradient(135deg, #3B6CF6, #1E3FA8); }
.lk-dots      { --bg: radial-gradient(rgba(255,255,255,.3) 1.6px, transparent 2.2px) 0 0 / 10px 10px, linear-gradient(135deg, #12A8E0, #6D5DF0); }
.lk-checker   { --bg: conic-gradient(rgba(255,255,255,.17) 25%, transparent 0 50%, rgba(255,255,255,.17) 0 75%, transparent 0) 0 0 / 14px 14px,
                      linear-gradient(135deg, #22B455, #11743A); }
.lk-neon      { --bg: linear-gradient(135deg, #0B0B22, #17173E); --bd: #22D3EE; --bw: 2px; --fg: #8AF0FF; --ts: 0 0 8px rgba(34,211,238,.85); }
.lk-gold      { --bg: linear-gradient(135deg, #B8862F, #F8E7A0 32%, #C9962E 58%, #F6E3A1 82%, #A8761C); --fg: #3A2A05; --ts: none; }
.lk-rainbow   { --bg: linear-gradient(100deg, #FF5F6D, #FFB347 25%, #3DDC97 50%, #45B5F5 75%, #9B7BFF); }
.lk-coral     { --bg: linear-gradient(135deg, #FF8A7A, #E2453C); }
.lk-mint      { --bg: linear-gradient(135deg, #9BF2D2, #2FBF8F); --fg: #0C2A20; --ts: none; }
.lk-lavender  { --bg: linear-gradient(135deg, #CDB8FF, #8C6AE8); }
.lk-berry     { --bg: linear-gradient(135deg, #D6337A, #7A1450); }
.lk-cocoa     { --bg: linear-gradient(135deg, #A87452, #5B3622); }
.lk-slate     { --bg: linear-gradient(135deg, #7C8BA6, #3F4A61); }
.lk-cyan      { --bg: linear-gradient(135deg, #52E7FF, #0A96C2); --fg: #062633; --ts: none; }
.lk-magenta   { --bg: linear-gradient(135deg, #FF5CE1, #B0189A); }
.lk-camo      { --bg: radial-gradient(ellipse 9px 6px at 20% 30%, #3C4A23 98%, transparent) 0 0 / 26px 22px,
                      radial-gradient(ellipse 8px 5px at 70% 70%, #6B5A35 98%, transparent) 0 0 / 30px 24px,
                      radial-gradient(ellipse 7px 5px at 40% 80%, #2A3418 98%, transparent) 0 0 / 22px 28px, #57683A; }
.lk-waves     { --bg: radial-gradient(circle at 50% 100%, transparent 6px, rgba(255,255,255,.22) 7px 9px, transparent 10px) 0 0 / 20px 10px,
                      linear-gradient(135deg, #1B87D6, #0B4E95); }
.lk-zigzag    { --bg: linear-gradient(135deg, rgba(255,255,255,.2) 25%, transparent 25%) -8px 0 / 16px 16px,
                      linear-gradient(225deg, rgba(255,255,255,.2) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(135deg, #F29A2E, #D6501E); }
.lk-plaid     { --bg: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 4px, transparent 4px 16px), repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 4px, transparent 4px 16px),
                      linear-gradient(135deg, #C8312F, #8E1D1B); }
.lk-bubbles   { --bg: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 0 2px, transparent 3px) 0 0 / 18px 18px,
                      radial-gradient(circle, transparent 4px, rgba(255,255,255,.25) 5px 6px, transparent 7px) 6px 9px / 26px 26px, linear-gradient(135deg, #36C6E8, #2A63D8); }
.lk-lava      { --bg: radial-gradient(circle at 25% 40%, #FFC23D 0 6px, transparent 9px) 0 0 / 34px 30px,
                      radial-gradient(circle at 70% 70%, #FF7A1A 0 5px, transparent 8px) 0 0 / 28px 26px, linear-gradient(135deg, #7A1206, #3A0703); }
.lk-ice       { --bg: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 41% 43%, transparent 44%) 0 0 / 40px 40px,
                      linear-gradient(135deg, #DFF6FF, #8FCBEA); --fg: #0C2A3E; --ts: none; }
.lk-holo      { --bg: linear-gradient(115deg, #FF9DE2, #A0E9FF 30%, #C7FFB0 50%, #FFE58F 70%, #D7A6FF); --fg: #2A1650; --ts: none; }

/* ── lobby themes ─────────────────────────────────────────────────────
   The same list is in js/room-host.js, js/room-join.js and worker/index.js.
   Each sets the background (--lb-bg) and the three glows' colours; a
   custom colour sets the same variables inline. */
[data-lobby="night"]  { --lb-bg: linear-gradient(180deg, #19154A 0%, #0E1030 55%, #080A1C 100%);
  --lb-g1: rgba(190,160,255,.45); --lb-g2: rgba(150,230,255,.35); --lb-g3: rgba(255,216,74,.22); }
[data-lobby="ocean"]  { --lb-bg: radial-gradient(circle, rgba(160,230,255,.10) 0 2px, transparent 3px) 0 0 / 46px 46px,
    radial-gradient(circle, rgba(160,230,255,.06) 0 1.5px, transparent 2.5px) 23px 23px / 46px 46px,
    linear-gradient(180deg, #0A3E5C 0%, #062A45 55%, #03172B 100%);
  --lb-g1: rgba(79,208,232,.4); --lb-g2: rgba(64,160,255,.35); --lb-g3: rgba(120,255,214,.2); }
[data-lobby="pond"]   { --lb-bg: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.045) 0 2px, transparent 2px 28px),
    repeating-radial-gradient(circle at 80% 75%, rgba(255,255,255,.04) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #0E4A5E 0%, #0A3546 55%, #06202C 100%);
  --lb-g1: rgba(120,220,255,.35); --lb-g2: rgba(255,216,74,.28); --lb-g3: rgba(140,255,200,.2); }
[data-lobby="forest"] { --lb-bg: radial-gradient(ellipse at 50% 0%, rgba(140,230,120,.16), transparent 60%),
    linear-gradient(180deg, #123F2C 0%, #0A2A1E 55%, #051710 100%);
  --lb-g1: rgba(120,230,140,.35); --lb-g2: rgba(200,255,120,.25); --lb-g3: rgba(255,216,74,.2); }
[data-lobby="sunset"] { --lb-bg: linear-gradient(180deg, #2B1250 0%, #6B1F5C 45%, #A63E40 80%, #C9643A 100%);
  --lb-g1: rgba(255,140,190,.4); --lb-g2: rgba(255,200,120,.35); --lb-g3: rgba(255,120,80,.3); }
[data-lobby="candy"]  { --lb-bg: radial-gradient(circle, rgba(255,170,220,.12) 0 3px, transparent 4px) 0 0 / 38px 38px,
    linear-gradient(180deg, #5B2079 0%, #3E1559 55%, #250B38 100%);
  --lb-g1: rgba(255,140,210,.45); --lb-g2: rgba(180,140,255,.4); --lb-g3: rgba(255,220,240,.2); }
[data-lobby="galaxy"] { --lb-bg: radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.6px) 0 0 / 97px 89px,
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.6px) 40px 60px / 131px 113px,
    radial-gradient(circle, rgba(200,180,255,.6) 0 .8px, transparent 1.4px) 70px 20px / 59px 71px,
    radial-gradient(ellipse at 70% 20%, rgba(120,60,200,.35), transparent 60%),
    linear-gradient(180deg, #0B0A26 0%, #120C36 55%, #05040F 100%);
  --lb-g1: rgba(160,110,255,.4); --lb-g2: rgba(90,140,255,.35); --lb-g3: rgba(255,120,220,.2); }
[data-lobby="synth"]  { --lb-bg: repeating-linear-gradient(90deg, rgba(255,92,205,.11) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,92,205,.11) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #1A0B3B 0%, #2E0D52 55%, #4A1258 100%);
  --lb-g1: rgba(255,92,205,.4); --lb-g2: rgba(70,220,255,.35); --lb-g3: rgba(255,180,90,.25); }
[data-lobby="ember"]  { --lb-bg: radial-gradient(ellipse at 50% 120%, rgba(255,110,40,.35), transparent 60%),
    linear-gradient(180deg, #3A1010 0%, #250909 55%, #140404 100%);
  --lb-g1: rgba(255,140,60,.38); --lb-g2: rgba(255,80,60,.3); --lb-g3: rgba(255,200,80,.25); }
[data-lobby="arctic"] { --lb-bg: radial-gradient(circle, rgba(255,255,255,.22) 0 1.5px, transparent 2.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 2px) 27px 30px / 54px 54px,
    linear-gradient(180deg, #1C4470 0%, #12305A 55%, #0A1C38 100%);
  --lb-g1: rgba(200,240,255,.35); --lb-g2: rgba(140,200,255,.3); --lb-g3: rgba(255,255,255,.18); }
[data-lobby="gold"]   { --lb-bg: repeating-linear-gradient(135deg, rgba(241,196,15,.05) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #2A1F0A 0%, #18120A 55%, #0C0905 100%);
  --lb-g1: rgba(255,216,74,.35); --lb-g2: rgba(255,170,60,.28); --lb-g3: rgba(255,240,180,.2); }

[data-lobby="sakura"] { --lb-bg: radial-gradient(ellipse 5px 3px at 50% 50%, rgba(255,200,225,.55) 98%, transparent) 0 0 / 61px 53px,
    radial-gradient(ellipse 4px 2.5px at 50% 50%, rgba(255,230,240,.45) 98%, transparent) 30px 26px / 83px 71px,
    linear-gradient(180deg, #5A2348 0%, #3E1838 55%, #230B20 100%);
  --lb-g1: rgba(255,170,210,.45); --lb-g2: rgba(255,220,235,.3); --lb-g3: rgba(255,216,74,.2); }
[data-lobby="desert"] { --lb-bg: radial-gradient(ellipse 140% 40% at 30% 100%, rgba(235,160,80,.35), transparent 70%),
    radial-gradient(ellipse 120% 35% at 80% 105%, rgba(200,110,50,.35), transparent 70%),
    linear-gradient(180deg, #4A2A4E 0%, #8A4A3A 55%, #C07A3E 100%);
  --lb-g1: rgba(255,190,110,.4); --lb-g2: rgba(255,140,90,.3); --lb-g3: rgba(255,230,160,.25); }
[data-lobby="lagoon"] { --lb-bg: radial-gradient(ellipse at 50% 0%, rgba(120,255,230,.22), transparent 60%),
    linear-gradient(180deg, #0B6A6A 0%, #06474F 55%, #032833 100%);
  --lb-g1: rgba(110,255,220,.4); --lb-g2: rgba(80,200,255,.3); --lb-g3: rgba(255,240,170,.2); }
[data-lobby="meadow"] { --lb-bg: radial-gradient(circle, rgba(255,240,140,.3) 0 1.5px, transparent 2.5px) 0 0 / 44px 40px,
    radial-gradient(ellipse at 50% 0%, rgba(220,255,140,.2), transparent 60%),
    linear-gradient(180deg, #3D6A22 0%, #284A16 55%, #15290B 100%);
  --lb-g1: rgba(200,255,120,.38); --lb-g2: rgba(255,230,120,.3); --lb-g3: rgba(140,230,255,.2); }
[data-lobby="storm"]  { --lb-bg: repeating-linear-gradient(105deg, rgba(200,220,255,.07) 0 1px, transparent 1px 14px),
    radial-gradient(ellipse at 70% 0%, rgba(150,170,220,.25), transparent 55%),
    linear-gradient(180deg, #2B3346 0%, #1A2030 55%, #0C1019 100%);
  --lb-g1: rgba(170,200,255,.35); --lb-g2: rgba(255,240,170,.25); --lb-g3: rgba(120,140,190,.25); }
[data-lobby="aurora"] { --lb-bg: radial-gradient(ellipse 80% 40% at 30% 20%, rgba(70,255,170,.28), transparent 70%),
    radial-gradient(ellipse 70% 35% at 75% 30%, rgba(170,100,255,.3), transparent 70%),
    linear-gradient(180deg, #0B1E33 0%, #0A1426 55%, #050A14 100%);
  --lb-g1: rgba(80,255,180,.4); --lb-g2: rgba(170,110,255,.38); --lb-g3: rgba(100,200,255,.25); }
[data-lobby="neon"]   { --lb-bg: linear-gradient(0deg, rgba(255,60,200,.18) 0 2px, transparent 2px) 0 100% / 100% 48px,
    radial-gradient(ellipse at 50% 110%, rgba(40,220,255,.3), transparent 55%),
    linear-gradient(180deg, #120A2A 0%, #1B0D3E 55%, #0A0618 100%);
  --lb-g1: rgba(255,70,210,.42); --lb-g2: rgba(40,230,255,.38); --lb-g3: rgba(255,220,90,.22); }
[data-lobby="cocoa"]  { --lb-bg: repeating-linear-gradient(45deg, rgba(255,220,180,.05) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #4A2C1E 0%, #331D13 55%, #1C0F09 100%);
  --lb-g1: rgba(255,190,140,.35); --lb-g2: rgba(255,230,190,.25); --lb-g3: rgba(255,170,90,.25); }

/* the theme picker, under the palette button */
.rl-theme-pop { --cut: 14px; --bg: rgba(16,13,48,.97); --bd: rgba(196,178,255,.28); position: absolute; z-index: 6; width: 344px;
  padding: 14px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); animation: rlPopIn .18s ease-out; }
.rl-theme-pop[hidden] { display: none; }
@keyframes rlPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rl-tp-hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding-right: 40px; }
.rl-tp-x { --cut: 8px; --bg: rgba(255,255,255,.1); position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; cursor: pointer;
  color: #fff; font: 900 21px/1 var(--r-disp); display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.rl-tp-x:hover { --bg: #E74C3C; transform: translateY(-1px); }
.rl-tp-hd b { font: 900 17px var(--r-disp); color: #fff; }
.rl-tp-hd small { font: 700 12px var(--r-disp); color: rgba(226,224,255,.55); }
.rl-tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rl-tp-grid button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  color: rgba(226,224,255,.75); font: 800 12px var(--r-disp); text-align: left; }
.rl-tp-grid button i { position: relative; display: block; height: 52px; background: var(--lb-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); transition: transform .12s; }
.rl-tp-grid button i::after { content: ''; position: absolute; left: 18%; top: 22%; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--lb-g1), transparent 70%); }
.rl-tp-grid button:hover i { transform: translateY(-2px); }
.rl-tp-grid button:hover { color: #fff; }
.rl-tp-grid button[aria-pressed="true"] { color: var(--r-amber); }
.rl-tp-grid button[aria-pressed="true"] i { box-shadow: inset 0 0 0 3px var(--r-amber); }
.rl-tp-grid button[aria-pressed="true"] i::before { content: '✓'; position: absolute; right: 8px; bottom: 5px; font: 900 15px var(--r-disp); color: var(--r-amber);
  text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.rl-tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.rl-tp-note { display: block; margin-top: 8px; font: 700 12px/1.4 var(--r-disp); color: #FF9C92; }
.rl-tp-note[hidden] { display: none; }
.rl-tp-note.ok { color: #4ADE80; }
/* Add a duck */
.rl-add-pop { width: 360px; }
.rl-add-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.rl-add-duck { --cut: 10px; --bg: rgba(255,255,255,.08); position: relative; width: 64px; height: 64px; padding: 4px; cursor: pointer; }
.rl-add-duck img { width: 56px; height: 56px; object-fit: contain; display: block; }
.rl-add-duck span { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 6px; background: var(--r-amber); color: #2C1F0A;
  display: flex; align-items: center; justify-content: center; }
.rl-add-form .u-input { height: 46px; min-width: 0; }
.rl-add-go { --cut: 9px; --bg: var(--r-amber); height: 46px; padding: 0 18px; cursor: pointer; color: #2C1F0A; font: 900 14px var(--r-disp); text-transform: uppercase; }
.rl-add-go:hover { filter: brightness(1.08); }
.rl-p.by-host::after { content: ''; position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--r-amber);
  box-shadow: 0 0 0 2px rgba(10,8,34,.7); }
.rl-tp-up b { width: 30px; height: 22px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12) var(--tp-img, none) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.rl-tp-up.on b svg { opacity: 0; }
.rl-tp-custom { --cut: 9px; --bg: rgba(255,255,255,.07); --bd: rgba(255,255,255,.12); position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; cursor: pointer; color: #fff; font: 800 13px var(--r-disp); }
.rl-tp-custom:hover { --bg: rgba(255,255,255,.12); }
.rl-tp-custom.on { --bd: var(--r-amber); --bw: 2px; color: var(--r-amber); }
.rl-tp-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.rl-tp-custom i { width: 30px; height: 22px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  background: conic-gradient(#FF5F6D, #FFC371, #47E891, #45B5F5, #9B7BFF, #FF5F6D); }
.rl-tp-custom.on i { background: var(--tp-c); }
#rlThemeBtn[aria-expanded="true"] { --bg: rgba(241,196,15,.25); color: var(--r-amber); }
/* on a phone the theme and Add panels are bottom sheets */
@media (max-width: 760px) {
  .rl-theme-pop { --cut: 0px; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto; max-height: 82vh; overflow: auto;
    padding: 10px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; clip-path: none;
    background: #18144A; box-shadow: 0 -18px 40px rgba(0,0,0,.5); animation: rlSheet .28s cubic-bezier(.2,.9,.3,1); }
  .rl-theme-pop::before { content: ''; display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: rgba(255,255,255,.25); }
  .rl-theme-pop .rl-tp-x { top: 22px; right: 14px; }
  .rl-tp-grid { grid-template-columns: repeat(3, 1fr); }
}
@keyframes rlSheet { from { transform: translateY(100%); } to { transform: none; } }
/* flags: the flag itself, a little darker at the left where the name sits */

/* the host's reactions, above the chat box */
.rl-rx { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.rl-rx button { --cut: 6px; --bg: rgba(255,255,255,.08); min-width: 0; height: 36px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1;
  transition: transform .12s; }
.rl-rx button:hover { --bg: rgba(255,255,255,.16); transform: translateY(-2px); }
.rl-rx button:active { transform: scale(.86); --bg: rgba(241,196,15,.25); }

/* ── a loading screen for the join screens: the game's own (css/game.css
   #loadingScreen), repeated here because join.html loads only this file ── */
.rj-loader { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 30%, #2A2270 0%, #19154A 35%, #0E1030 70%, #080A1C 100%); animation: rjLdIn .1s ease-out;
  transition: opacity .25s; }
.rj-loader[hidden] { display: none; }
.rj-loader.done { opacity: 0; }
@keyframes rjLdIn { from { opacity: 0; } to { opacity: 1; } }
.rj-loader .ld-logo { width: min(380px, 74vw); height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 30px rgba(241,196,15,.18)); animation: rjLdBob 3s ease-in-out infinite; }
@keyframes rjLdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rj-loader .ld-track { --cut: 12px; --bw: 2px; --bd: rgba(196,178,255,.5);
  --bg: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,0) 9px 18px), rgba(20,16,60,.94);
  width: min(320px, 72vw); height: 32px; position: relative; overflow: hidden;
  filter: drop-shadow(0 6px 0 rgba(8,6,30,.65)) drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.rj-loader .ld-fill { --cut: 8px; --cut-b: 0px; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; overflow: hidden;
  transform: translateX(-96%); }
.rj-loader .ld-fill > i { position: absolute; inset: 0; overflow: hidden; transform: translateX(96%);
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.12) 100%), #F1C40F; }
.rj-loader .ld-fill > i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -25.46px; right: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 9px, rgba(255,255,255,0) 9px 18px); animation: rjLdStripe .8s linear infinite; }
@keyframes rjLdStripe { to { transform: translateX(25.46px); } }
.rj-loader.go .ld-fill, .rj-loader.go .ld-fill > i { transition: transform 2.4s cubic-bezier(.16,1,.3,1); }
.rj-loader.go .ld-fill { transform: translateX(-30%); }
.rj-loader.go .ld-fill > i { transform: translateX(30%); }
.rj-loader.done .ld-fill, .rj-loader.done .ld-fill > i { transition: transform .22s ease-out; transform: none; }
.rj-loader .ld-status-row { width: min(320px, 72vw); display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.rj-loader .ld-status-text { font: 900 17px var(--r-disp); color: #fff; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rj-loader .ld-status-pct { font: 900 17px var(--r-mono); color: var(--r-amber); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rj-loader .ld-caption { font: 800 12.5px var(--r-disp); letter-spacing: .14em; text-transform: uppercase; color: rgba(236,234,255,.7);
  text-shadow: 0 2px 8px rgba(0,0,0,.5); text-align: center; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { .rj-loader .ld-fill > i::after, .rj-loader .ld-logo { animation: none; } }

/* ── a guest's race and result, in the lobby's stage ──────────────── */
.rj-slot { display: none; position: relative; z-index: 1; flex: 1; min-height: 0; width: min(920px, 100%); flex-direction: column; }
.rj-lobbyview[data-phase="race"] .rj-slot, .rj-lobbyview[data-phase="result"] .rj-slot { display: flex; }
.rj-lobbyview[data-phase="race"] .rl-players, .rj-lobbyview[data-phase="result"] .rl-players,
.rj-lobbyview[data-phase="race"] .rl-pin, .rj-lobbyview[data-phase="result"] .rl-pin { display: none; }
.rj-lobbyview[data-phase="race"] .rl-bar, .rj-lobbyview[data-phase="result"] .rl-bar { margin-top: 20px; }
.rj-lobbyview[data-phase="race"] [data-el="editBtn"] { display: none; }
.rj-slot .rj-screen.on { flex: 1; min-height: 0; }
.rj-slot .rj-center { flex: 1; min-height: 0; padding: 4px 0 10px; }
@media (max-width: 760px) { .rj-slot { padding-top: 16px; } }

/* ── the logo's placeholder until it has loaded ── */
img.sk-logo:not(.ok) { color: transparent; font-size: 0; border-radius: 8px;
  background: linear-gradient(100deg, rgba(255,255,255,.08) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.08) 70%) 0 0 / 250% 100%;
  animation: skSweep 1.3s linear infinite; }
img.sk-logo.ok { animation: skIn .35s ease-out; }

/* the profile's Join and Leave, side by side, held on the bottom edge
   while the page scrolls (fixed to the screen on a phone) */
.rj-actions { position: sticky; z-index: 30; bottom: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-top: 8px;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(14,12,46,0), rgba(14,12,46,.92) 30%, #0E0C2E); }
.rj-actions .rj-btn { margin-top: 0; padding-top: 14px; padding-bottom: 14px; }
.rj-actions .rj-btn.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
@media (max-width: 640px) {
  .rj-actions { position: fixed; left: 0; right: 0; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); }
  .rj-actions .rj-btn { font-size: 19px; }
  .rj-actions .rj-btn.ghost { font-size: 15px; }
  .rj-screen[data-screen="profile"] { padding-bottom: 96px; }
}

/* ── "Create a room", step two: the room's settings ── */
#roomModal[data-step="setup"] .rm-options, #roomModal[data-step="setup"] .m-sub { display: none; }
.rm-setup { display: flex; flex-direction: column; gap: 14px; }
.rm-setup[hidden] { display: none; }
.rm-f { display: flex; flex-direction: column; gap: 8px; }
.rm-l { font: 800 11px var(--r-disp); letter-spacing: .1em; text-transform: uppercase; color: rgba(226,224,255,.55); }
.rm-themes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rm-themes button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  color: rgba(226,224,255,.7); font: 800 10px var(--r-disp); text-align: center; }
.rm-themes button i { display: block; height: 38px; background: var(--lb-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.rm-themes button[aria-pressed="true"] { color: var(--r-amber); }
.rm-themes button[aria-pressed="true"] i { box-shadow: inset 0 0 0 3px var(--r-amber); }
.rm-themes span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-max { display: grid; grid-template-columns: 42px 86px 42px 1fr; gap: 8px; align-items: center; }
.rm-max .u-input { height: 42px; text-align: center; padding: 0 6px; font: 900 16px var(--r-disp); -moz-appearance: textfield; }
.rm-max .u-input::-webkit-inner-spin-button, .rm-max .u-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rm-step { --cut: 8px; --bg: rgba(255,255,255,.1); height: 42px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; }
.rm-step:hover { --bg: rgba(255,255,255,.18); }
.rm-step[disabled] { opacity: .35; cursor: not-allowed; --bg: rgba(255,255,255,.06); }
.rm-sw { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); }
.rm-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rm-sw i { flex: none; width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.18); position: relative; transition: background .2s; }
.rm-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s cubic-bezier(.3,1.4,.5,1); }
.rm-sw input:checked + i { background: #22C55E; }
.rm-sw input:checked + i::after { left: 21px; }
.rm-sw input:focus-visible + i { outline: 2px solid var(--r-amber); outline-offset: 2px; }
.rm-sw span { display: flex; flex-direction: column; gap: 2px; }
.rm-sw b { font: 900 15px var(--r-disp); color: #fff; }
.rm-sw small { font: 600 12.5px/1.4 var(--r-disp); color: rgba(226,224,255,.65); }
/* Back and Open the room stay at the bottom of the sheet while it scrolls */
#roomModal[data-step="setup"] .m-card { padding-bottom: 0; }
.rm-setup-btns { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 4px -26px 0;
  padding: 14px 26px 22px; background: linear-gradient(180deg, rgba(22,19,64,0), rgba(22,19,64,.96) 22%, #16133F); }
.rm-setup-btns .big { font-size: 17px; padding: 12px; }
.rm-setup-btns .big.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.rm-cols { display: flex; flex-direction: column; gap: 14px; }
.rm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rm-col-look { gap: 8px; }
.rm-prev { display: none; }
#roomModal[data-step="setup"] .rm-note:empty { display: none; }
/* the step's choices, each with where it leads */
.rm-go { display: none; }
@media (max-width: 640px) {
  .rm-setup-btns { margin: 4px -18px 0;
    padding: 12px 18px max(16px, env(safe-area-inset-bottom)); }
}
/* a computer: a wider sheet; the first step as two large cards, the second
   in two columns (the lobby's look on the left, the room's rules on the right) */
@media (min-width: 861px) {
  #roomModal .m-card { width: min(760px, calc(100vw - 48px)); padding: 30px 32px 30px; }
  #roomModal[data-step="setup"] .m-card { width: min(940px, calc(100vw - 48px)); }
  #roomModal .m-sub { font-size: 15px; margin-bottom: 20px; }
  .rm-options { gap: 16px; }
  .rm-opt { min-height: 230px; padding: 26px 24px 22px; gap: 12px; }
  .rm-opt svg { width: 64px; height: 64px; padding: 14px; }
  .rm-opt b { font-size: 22px; }
  .rm-opt span { font-size: 14px; }
  .rm-back { min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: center; padding: 18px 22px; }
  .rm-back svg { grid-row: 1 / 3; width: 52px; height: 52px; padding: 11px; }
  .rm-opt:not(.rm-back) .rm-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 900 13px var(--r-disp); font-style: normal;
    letter-spacing: .06em; text-transform: uppercase; color: var(--rm-c); }
  .rm-opt:not(.rm-back) .rm-go::after { content: '→'; font-size: 16px; transition: transform .15s; }
  .rm-opt:hover .rm-go::after { transform: translateX(4px); }
  .rm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .rm-col-look { gap: 10px; }
  .rm-prev { --cut: 14px; --bw: 1px; --bd: rgba(255,255,255,.14); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lb-bg, #19154A); transition: background .3s; }
  .rm-prev-pin { display: flex; flex-direction: column; align-items: center; padding: 8px 18px 10px; border-radius: 10px; background: #fff; color: #1B1A33;
    box-shadow: 0 6px 18px rgba(0,0,0,.3); }
  .rm-prev-pin small { font: 800 9px var(--r-disp); letter-spacing: .14em; text-transform: uppercase; color: #6B6890; }
  .rm-prev-pin b { font: 900 26px/1.05 var(--r-mono); letter-spacing: .14em; }
  .rm-prev-ps { display: flex; gap: 8px; }
  .rm-prev-ps span { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 8px; background: rgba(10,8,34,.55); }
  .rm-prev-ps img { width: 24px; height: 24px; object-fit: contain; }
  .rm-prev-ps i { display: block; width: 34px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.55); }
  .rm-themes { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .rm-themes button i { height: 44px; }
  .rm-col-opts { gap: 12px; }
  .rm-setup-btns { margin: 10px -32px 0; padding: 16px 32px 26px; grid-template-columns: 1fr 1.6fr; }
  .rm-col-opts .rm-time { grid-template-columns: 1fr; }
  .rm-setup-btns .big { font-size: 18px; padding: 14px; }
}
@media (max-width: 560px) { .rm-themes { grid-template-columns: repeat(4, 1fr); } .rm-max { grid-template-columns: 42px 1fr 42px; } .rm-max .seg { grid-column: 1 / -1; } }

/* players waiting for the host (Approve players on) */
.rl-pending { position: relative; z-index: 1; width: min(1200px, 100%); margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(241,196,15,.1); box-shadow: inset 0 0 0 1px rgba(241,196,15,.4); }
.rl-pending[hidden] { display: none; }
.rl-pending-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 900 13px var(--r-disp); color: var(--r-amber); text-transform: uppercase; letter-spacing: .06em; }
.rl-pending-hd span { padding: 1px 8px; border-radius: 9px; background: var(--r-amber); color: #2C1F0A; }
.rl-pending-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-wait { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-radius: 10px; background: rgba(10,8,34,.6); animation: rlIn .35s cubic-bezier(.2,.9,.3,1.4); }
.rl-wait img { width: 40px; height: 40px; object-fit: contain; }
.rl-wait b { font: 900 16px var(--r-disp); color: #fff; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.rl-wait button { width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer; font: 900 18px/1 var(--r-disp); color: #fff; }
.rl-wait .ok { background: #22C55E; }
.rl-wait .no { background: #C0392B; }
.rl-wait button:hover { filter: brightness(1.12); }

/* the join screen's "Create a room" */
.rj-create { margin-top: 14px; }
.rj-create svg { flex: none; }
/* waiting for the host: the hourglass tips over and over */
.rj-wait-ic { animation: rjTip 2.4s ease-in-out infinite; }
@keyframes rjTip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rj-wait-ic { animation: none; } }

/* "Start at a set time" in the room's settings */
.rm-sched { display: flex; flex-direction: column; gap: 8px; }
.rm-time { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; padding: 0 2px; }
.rm-time[hidden] { display: none; }
.rm-time .u-input { height: 42px; text-align: center; padding: 0 8px; font: 900 17px var(--r-disp); color-scheme: dark; }
.rm-time .seg button { font-size: 12.5px; }
.rm-time-in { grid-column: 1 / -1; font: 800 12.5px var(--r-disp); color: var(--r-amber); min-height: 16px; }
@media (max-width: 560px) { .rm-time { grid-template-columns: 1fr; } }

/* the lobby's countdown to a set start time */
.rl-sched { position: relative; z-index: 1; width: min(1200px, 100%); margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 12px; background: rgba(34,197,94,.12); box-shadow: inset 0 0 0 1px rgba(34,197,94,.45); color: #fff; }
.rl-sched[hidden] { display: none; }
.rl-sched-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #22C55E; color: #06210F; }
.rl-sched-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rl-sched-t b { font: 900 16px var(--r-disp); }
.rl-sched-t small { font: 900 22px/1.1 var(--r-mono, monospace); color: #7CF0A6; font-variant-numeric: tabular-nums; }
.rl-sched .big { flex: none; font-size: 14px; padding: 8px 14px; }
.rl-sched .rl-fbtn { height: 40px; padding: 0 14px; font-size: 13.5px; }
.rl-sched-clock { display: flex; align-items: center; gap: 10px; }
.rl-sched-pp { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; transition: background .15s, transform .12s; }
.rl-sched-pp:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.rl-sched-pp:focus-visible { outline: 2px solid var(--r-amber); outline-offset: 2px; }
.rl-sched-pp .ic-play, .rl-sched.paused .rl-sched-pp .ic-pause { display: none; }
.rl-sched.paused .rl-sched-pp .ic-play { display: block; }
.rl-sched.paused .rl-sched-pp { background: #22C55E; color: #06210F; }
.rl-sched.paused { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.rl-sched.paused .rl-sched-ic { background: rgba(255,255,255,.2); color: #fff; }
.rl-sched.paused .rl-sched-t small { color: rgba(255,255,255,.7); }
.rl-sched-pop .rm-time { grid-template-columns: 1fr; padding: 0; }
@media (max-width: 560px) { .rl-sched .rl-fbtn { padding: 0 11px; } .rl-sched .rl-fbtn svg { display: none; } }
.rl-sched.soon { background: rgba(241,196,15,.16); box-shadow: inset 0 0 0 2px var(--r-amber); animation: rlSoon 1s ease-in-out infinite; }
.rl-sched.soon .rl-sched-ic { background: var(--r-amber); }
.rl-sched.soon small { color: var(--r-amber); }
@keyframes rlSoon { 50% { box-shadow: inset 0 0 0 2px var(--r-amber), 0 0 22px rgba(241,196,15,.45); } }
@media (prefers-reduced-motion: reduce) { .rl-sched.soon { animation: none; } }

/* ── the lobby's More: Add, Theme and Language ── */
.rl-more { position: relative; display: flex; }
.rl-more.open #rlMoreBtn { --bg: rgba(241,196,15,.9); color: #2C1F0A; }
.rl-more-menu[hidden] { display: none; }
/* a dropdown under the button */
.rl-more-menu { --cut: 12px; --bg: rgba(16,13,48,.97); --bd: rgba(196,178,255,.28); position: absolute; z-index: 7; top: calc(100% + 10px); left: 0;
  min-width: 210px; padding: 6px; display: flex; flex-direction: column; gap: 4px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
  opacity: 0; transform: translateY(-6px); transition: opacity .16s ease-out, transform .16s ease-out; }
.rl-more-menu.in { opacity: 1; transform: none; }
.rl-mi { --cut: 8px; --bg: transparent; appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px;
  cursor: pointer; color: #fff; font: 800 15px var(--r-disp); text-align: left; white-space: nowrap; }
.rl-mi:hover, .rl-mi:focus-visible { --bg: rgba(255,255,255,.1); outline: none; }
.rl-mi i { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.1); }
.rl-mi[aria-expanded="true"] { --bg: rgba(241,196,15,.16); color: var(--r-amber); }

/* phones: the rail keeps More, Lock and Start; More fans its three out as a pie */
@media (max-width: 760px) {
  .rl-more-menu { --bg: transparent; --bd: transparent; clip-path: none; box-shadow: none; top: 50%; left: 50%; width: 0; height: 0; min-width: 0; padding: 0; overflow: visible;
    opacity: 1; transform: none; filter: none; }
  .rl-mi { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; clip-path: none;
    background: #2A2470; box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 2px rgba(196,178,255,.35);
    transform: translate(0, 0) scale(.3); opacity: 0;
    transition: transform .32s cubic-bezier(.3,1.5,.5,1), opacity .18s ease-out; transition-delay: calc(var(--i) * 40ms); }
  .rl-mi i { width: auto; height: auto; background: none; }
  .rl-mi span { position: absolute; top: 50%; right: calc(100% + 6px); transform: translateY(-50%); padding: 3px 9px; border-radius: 8px;
    background: rgba(10,8,34,.85); font: 800 11px var(--r-disp); color: #fff; pointer-events: none; }
  .rl-mi:hover, .rl-mi:focus-visible { background: #3A3290; }
  .rl-mi[aria-expanded="true"] { background: var(--r-amber); color: #2C1F0A; }
  .rl-mi:nth-child(1) { --i: 0; } .rl-mi:nth-child(2) { --i: 1; } .rl-mi:nth-child(3) { --i: 2; } .rl-mi:nth-child(4) { --i: 3; }
  /* a quarter-to-three-quarter arc to the left of the rail */
  .rl-more-menu.in .rl-mi { opacity: 1; }
  .rl-more-menu.in .rl-mi:nth-child(1) { transform: translate(-56px, -84px) scale(1); }
  .rl-more-menu.in .rl-mi:nth-child(2) { transform: translate(-96px, -29px) scale(1); }
  .rl-more-menu.in .rl-mi:nth-child(3) { transform: translate(-96px, 29px) scale(1); }
  .rl-more-menu.in .rl-mi:nth-child(4) { transform: translate(-56px, 84px) scale(1); }
  .rl-more.open #rlMoreBtn svg { transform: rotate(90deg); }
  /* a soft dark halo behind the pie, so its labels read over anything */
  .rl-more-menu::before { content: ''; position: absolute; left: -265px; top: -160px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(8,6,30,.82) 35%, rgba(8,6,30,0) 70%); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s; }
  .rl-more-menu.in::before { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rl-more-menu, .rl-mi { transition: none !important; } }
/* the bar sits above the cards and banners below it, so the More dropdown
   that hangs over them takes the clicks (the big QR, z-index 5, still covers it) */
.rl-bar { z-index: 3; }

/* the lobby while the room is opening */
.rl-loading { margin: auto; padding: 40px; display: flex; align-items: center; justify-content: center; }
.rl-loading i { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.14); border-top-color: var(--r-amber);
  animation: rlSpin .8s linear infinite; }
@keyframes rlSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rl-loading i { animation-duration: 2.4s; } }

/* the name, with the dice beside it */
.rj-name-row { display: flex; gap: 8px; }
.rj-name-row .rj-input { flex: 1; min-width: 0; }
.rj-dice { --cut: 12px; --bw: 2px; --bd: rgba(255,255,255,.12); --bg: rgba(255,255,255,.08); flex: none; width: 56px; cursor: pointer; color: var(--r-amber);
  display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.rj-dice:hover { --bg: rgba(255,255,255,.14); transform: translateY(-2px); }
.rj-dice:active { transform: translateY(1px); }
.rj-dice:focus-visible { outline: 2px solid var(--r-amber); outline-offset: 2px; }
.rj-dice.roll svg { animation: rjRoll .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes rjRoll { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }
/* the big duck while the next one loads: an empty, shimmering card */
.rj-pf-hero.sk-i:not(.sk-ok) { object-position: -9999px 0; border-radius: 22px; filter: none; }

/* ── the join profile (name and duck) ── */
.rj-side, .rj-pick { display: contents; }          /* a phone: one column, as before */
.rj-pf-hero { display: none; }
/* a computer: the player on the left (a big look at the chosen duck, the
   card the lobby will show, the name and the buttons), the choices on the
   right with room for many more ducks per row */
@media (min-width: 900px) and (min-height: 600px) {
  .rj[data-screen="profile"] { width: min(1120px, calc(100vw - 48px)); }
  .rj[data-screen="profile"] .rj-head { margin-bottom: 22px; }
  .rj .rj-logo { height: 66px; }
  .rj-screen[data-screen="profile"].on { display: grid; grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas: "side pick" "err pick" "actions pick"; grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; }
  .rj-screen[data-screen="profile"] .rj-side { grid-area: side; display: flex; flex-direction: column; }
  .rj-screen[data-screen="profile"] .rj-pick { grid-area: pick; display: flex; flex-direction: column; min-width: 0;
    --cut: 18px; --bg: rgba(4,4,24,.34); --bd: rgba(255,255,255,.1); padding: 16px 16px 18px; }
  .rj-screen[data-screen="profile"] .rj-err { grid-area: err; }
  .rj-screen[data-screen="profile"] .rj-actions { grid-area: actions; align-self: end; position: static; background: none; padding: 0; margin-top: 18px; }
  .rj-preview { padding: 16px 18px 20px; gap: 12px; }
  .rj-pf-hero { display: block; width: clamp(110px, calc(100dvh - 570px), 240px); height: clamp(110px, calc(100dvh - 570px), 240px); object-fit: contain; margin: 2px 0 4px;
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.45)); animation: rjBob 2.6s ease-in-out infinite; }
  .rj-ptabs { margin-top: 0; }
  .rj-screen[data-screen="profile"] .rj-grid { max-height: none; height: min(calc(100dvh - 250px), 640px);
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; justify-content: stretch; align-content: start; padding-right: 8px; }
  .rj-screen[data-screen="profile"] .rj-grid button { width: 100%; height: auto; aspect-ratio: 1; padding: 8px; }
  .rj-screen[data-screen="profile"] .rj-grid img { width: 86%; height: 86%; }
  .rj-screen[data-screen="profile"] .rj-looks-wrap { max-height: none; height: min(calc(100dvh - 250px), 640px); }
  .rj-screen[data-screen="profile"] .rj-looks { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 9px; }
}
@media (min-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: reduce) { .rj-pf-hero { animation: none; } }

/* ── the code and message screens ──
   A phone: one column, as before. A computer: one wide card; the code
   screen with how it works on the left and the form on the right, the
   message screens with the big emoji beside the words and the buttons. */
.rj-art { display: none; }
.rj-form { display: contents; }
/* the title's own language button, the corner ×, and the short button
   labels belong to a computer's layout; the code screen's Create shares
   the row with Scan there, and has a line of its own on a phone */
.rj-lang2, .rj-hx, .rj-s { display: none; }
.rj-row-code .rj-create { grid-column: 1 / -1; }
@media (min-width: 900px) and (min-height: 560px) {
  .rj[data-screen="code"], .rj[data-screen="msg"] { width: min(940px, calc(100vw - 48px)); }
  .rj[data-screen="msg"] { width: min(760px, calc(100vw - 48px)); }
  .rj[data-screen="code"] .rj-head, .rj[data-screen="msg"] .rj-head { margin-bottom: 26px; }
  .rj-screen[data-screen="code"].on, .rj-screen[data-screen="msg"].on {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    background: linear-gradient(160deg, rgba(40,34,110,.78), rgba(14,12,46,.9)); box-shadow: inset 0 0 0 1px rgba(196,178,255,.2); }
  .rj-screen[data-screen="code"].on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 0; }
  .rj-art { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 38px 36px;
    background: radial-gradient(ellipse at 50% 18%, rgba(241,196,15,.16), transparent 62%), linear-gradient(180deg, rgba(74,170,230,.10), rgba(8,8,30,.35)); }
  .rj-art-ducks { display: flex; align-items: flex-end; justify-content: center; gap: 0; margin-bottom: 6px; }
  .rj-art-ducks img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.4)); animation: rjBob 2.6s ease-in-out infinite; }
  .rj-art-ducks img:nth-child(2) { width: 150px; height: 150px; margin: 0 -14px; position: relative; z-index: 1; animation-delay: -1.2s; }
  .rj-art-ducks img:nth-child(3) { animation-delay: -.6s; }
  .rj-art-t { font: 900 13px var(--r-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--r-amber); }
  .rj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .rj-steps li { display: flex; align-items: center; gap: 12px; font: 700 15px/1.45 var(--r-disp); color: rgba(236,234,255,.86); }
  .rj-steps i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(241,196,15,.16); box-shadow: inset 0 0 0 2px rgba(241,196,15,.55); color: var(--r-amber); font: 900 14px var(--r-mono); font-style: normal; }
  .rj-form { display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 36px; border-left: 1px solid rgba(255,255,255,.08); }
  .rj-form .rj-title, .rj-form .rj-sub { text-align: left; }
  .rj[data-screen="code"] .rj-head [data-el="langBtn"] { display: none; }
  .rj[data-screen="code"] .rj-hx:not([hidden]) { display: flex; }
  .rj-hx:hover { --bg: #BC2C44; }
  .rj-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 6px; }
  .rj-title-row .rj-title { margin: 0; }
  .rj-lang2 { display: flex; flex: none; }
  .rj-form .rj-row-code { grid-template-columns: 1fr 1fr; }
  .rj-form .rj-row-code .rj-exit { display: none; }
  .rj-form .rj-row-code .rj-create { grid-column: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .rj-form .rj-l { display: none; }
  .rj-form .rj-s { display: inline; }
  .rj-form .rj-title { font-size: 32px; }
  .rj-form .rj-sub { font-size: 15px; margin-bottom: 22px; }
  .rj-form .rj-code { font-size: 44px; padding: 16px 8px; }
}
@media (min-width: 900px) and (min-height: 560px) and (prefers-reduced-motion: reduce) { .rj-art-ducks img { animation: none; } }

/* ── the lobby's background moves: a slow drift and breath (a Ken Burns
   pan), for the themes, a colour or an uploaded picture alike. It moves a
   layer a little larger than the screen with transform only, which the GPU
   does without repainting. ── */
#roomLobby::before, #joinLayer::before, .rj-lobbyview::before, body[data-lobby]::before {
  content: ''; position: fixed; inset: -7%; z-index: -1; pointer-events: none;
  background: var(--lb-bg, var(--r-bg)); background-attachment: scroll;
  animation: lbDrift 38s ease-in-out infinite alternate; will-change: transform; }
@keyframes lbDrift {
  0%   { transform: translate3d(-2.2%, -1.6%, 0) scale(1.02); }
  50%  { transform: translate3d(1.5%, 1.2%, 0) scale(1.07); }
  100% { transform: translate3d(2.2%, -1%, 0) scale(1.04); } }
/* the join page's own background is covered while its lobby is up */
body:has(.rj-in-lobby)::before { animation: none; display: none; }
.layer.off::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #roomLobby::before, #joinLayer::before, .rj-lobbyview::before, body[data-lobby]::before { animation: none; } }

/* ── the phone's race: the live standings ── */
.rj-stand { --cut: 14px; --bg: rgba(4,4,24,.4); --bd: rgba(255,255,255,.14); width: 100%; margin: 8px 0 4px; padding: 12px 12px 10px; text-align: left; }
.rj-stand[hidden] { display: none; }
.rj-stand-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rj-stand-hd b { font: 900 13px var(--r-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--r-amber); }
.rj-watch-btn { --cut: 9px; --bg: #138A80; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; cursor: pointer;
  color: #fff; font: 900 13px var(--r-disp); white-space: nowrap; transition: transform .12s; }
.rj-watch-btn:hover { --bg: #18A397; transform: translateY(-1px); }
.rj-stand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rj-stand-list:empty::before { content: attr(data-empty); display: block; padding: 18px 4px; text-align: center; font: 700 14px var(--r-disp); color: var(--r-dim); }
.rj-st { display: grid; grid-template-columns: 28px 6px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.05); font: 800 14px var(--r-disp); color: #fff; }
.rj-st .rk { font: 900 15px var(--r-mono); text-align: center; color: var(--medal, rgba(226,224,255,.7)); }
.rj-st i { width: 6px; height: 18px; border-radius: 3px; }
.rj-st b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rj-st .gp { font: 800 12px var(--r-mono); color: rgba(226,224,255,.7); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rj-st.home .gp { color: #7CF0A6; }
.rj-st.me { background: rgba(241,196,15,.16); box-shadow: inset 0 0 0 2px rgba(241,196,15,.7); }
.rj-st.sep { margin-top: 8px; position: relative; }
.rj-st.sep::before { content: '⋯'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--r-dim); }

/* ── the phone's race: the race itself, full screen ── */
.rj-watch { position: fixed; inset: 0; z-index: 2147483000; background: #0B0A24; }
.rj-watch iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rj-watch-bar { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; display: flex; gap: 8px; z-index: 2; }
.rj-watch-bar button { --cut: 9px; --bg: rgba(16,13,48,.86); --bd: rgba(196,178,255,.3); width: 42px; height: 42px; border: 0; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.rj-watch-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #0B0A24; color: #fff; font: 800 15px var(--r-disp); pointer-events: none; transition: opacity .4s; }
.rj-watch.live .rj-watch-wait { opacity: 0; }
/* closed: kept a while, out of sight, so it opens again at once */
.rj-watch.asleep { visibility: hidden; pointer-events: none; }
.rj-watch.asleep * { visibility: hidden; }
.rj-watch-wait i { width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(255,255,255,.14); border-top-color: var(--r-amber); animation: rlSpin .8s linear infinite; }
body.rj-watching { overflow: hidden; }
/* the race and the result have the screen to themselves: the lobby's side
   rail (the language button) steps aside on a phone */
@media (max-width: 760px) { .rj-lobbyview[data-phase="race"] .rl-ctrl, .rj-lobbyview[data-phase="result"] .rl-ctrl { display: none; } }

/* a full room: the count turns red, on the big screen and on every phone */
.rl-lobby.room-full .rl-count { --bg: rgba(231,76,60,.9); }
.rl-lobby.room-full .rl-count small { color: rgba(255,255,255,.85); }
.rl-lobby.room-full .rl-tab-count { background: #E74C3C; }
.rl-lobby.room-full .rl-tab-count svg { color: #fff; }
.rl-count, .rl-tab-count { transition: background-color .3s; }

/* someone arriving: their name rises like a reaction, in gold */
.rx.arrive small, .rj-float.arrive small { background: var(--r-amber); color: #2C1F0A; font-size: 13px; padding: 3px 9px; }
.rj-float.arrive small { font-size: 12px; }
/* a duck the host added: the same rise, in the room's violet, so it reads apart from a player joining */
.rx.arrive.added small, .rj-float.arrive.added small { background: #8E5CF0; color: #fff; }

/* Room size (the host's More menu) */
/* a panel by More on a computer; on a phone the full-width bottom sheet every lobby panel is */
@media (min-width: 761px) { .rl-size-pop { width: 380px; } }
.rl-size-pop .rm-max { grid-template-columns: 42px 76px 42px 1fr; }
@media (max-width: 560px) { .rl-size-pop .rm-max { grid-template-columns: 52px 1fr 52px; } .rl-size-pop .rm-step { height: 46px; } .rl-size-pop .rm-max .u-input { height: 46px; } }
.rl-size-pop .seg button[disabled] { opacity: .35; cursor: not-allowed; }
.rl-size-go { width: 100%; margin-top: 12px; }
.rl-size-go[disabled] { opacity: .45; cursor: default; filter: none; }

/* the Reactions button beside Edit and Leave */
.rj-lobbyview .rl-foot .rj-react[aria-expanded="true"] { color: var(--r-amber); }
#rlReactBtn[aria-expanded="true"] { --bg: rgba(241,196,15,.9); color: #2C1F0A; }

/* the emoji panels: the room's reactions, and the answers to a message */
.rx-pick { position: fixed; z-index: 2147483200; display: flex; gap: 4px; padding: 6px; border-radius: 16px;
  background: rgba(20,16,58,.97); box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(196,178,255,.28);
  animation: rxPickIn .16s ease-out; }
.rx-pick[hidden] { display: none; }
@keyframes rxPickIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.rx-pick button { appearance: none; border: 0; width: 44px; height: 44px; padding: 0; border-radius: 11px; background: transparent; cursor: pointer;
  font-size: 25px; line-height: 1; transition: transform .12s, background .12s; }
.rx-pick button:hover { background: rgba(255,255,255,.12); transform: translateY(-2px) scale(1.12); }
.rx-pick button.hit { animation: rxHit .3s ease-out; }
@keyframes rxHit { 40% { transform: scale(1.35); background: rgba(241,196,15,.3); } }
.rx-pick-room { display: grid; grid-template-columns: repeat(4, 48px); }
.rx-pick-room button { width: 48px; height: 48px; font-size: 27px; }
.rx-pick-msg button { width: 40px; height: 40px; font-size: 22px; }
@media (min-width: 761px) { .rx-pick-room { grid-template-columns: repeat(8, 48px); } }

/* the answers under a message */
.mx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mx.has { margin-top: 5px; }
.mx-c { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px 0 5px; border-radius: 12px;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; cursor: pointer; animation: rlPop .22s ease-out; }
.mx-c i { font-style: normal; font-size: 14px; line-height: 1; }
.mx-c b { font: 800 11px var(--r-disp); color: rgba(255,255,255,.85); }
.mx-c:hover { background: rgba(0,0,0,.42); }
.mx-c.on { background: rgba(241,196,15,.24); box-shadow: inset 0 0 0 1px rgba(241,196,15,.75); }
.mx-c.on b { color: var(--r-amber); }
.mx-add { appearance: none; border: 0; width: 24px; height: 24px; padding: 0; border-radius: 12px; background: rgba(0,0,0,.3); cursor: pointer;
  color: rgba(255,255,255,.75); display: inline-flex; align-items: center; justify-content: center; transition: opacity .12s; }
.mx-add:hover, .mx-add[aria-expanded="true"] { color: var(--r-amber); background: rgba(0,0,0,.45); }
/* no answers yet: the button waits in the corner until the pointer is over the message */
.mx:not(.has) .mx-add { position: absolute; right: 4px; bottom: 4px; opacity: 0; }
.rl-m:hover .mx-add, .rj-m:hover .mx-add, .mx-add:focus-visible, .mx-add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .mx:not(.has) .mx-add { display: none; } .rl-m, .rj-m { cursor: pointer; } }
.rl-m.has-rx, .rj-m.has-rx { padding-bottom: 7px; }

/* ── the room sheet on a phone ──
   Step one: two rows, each an icon, a title, two lines of what it does and
   an arrow. Step two: a small preview of the lobby with the backgrounds in
   one row that scrolls sideways; the room's rules grouped in one panel as
   rows (Most players with its stepper on the right, the switches under it);
   Back and Open the room held at the bottom. */
@media (max-width: 640px) {
  #roomModal .m-sub { font-size: 14px; margin-bottom: 14px; }
  .rm-options { gap: 10px; }
  #roomModal .rm-opt { display: grid; grid-template-columns: 50px minmax(0, 1fr) 16px; column-gap: 14px; row-gap: 3px; align-items: center;
    min-height: 0; padding: 14px 14px 14px 12px; }
  #roomModal .rm-opt svg { grid-row: 1 / 3; width: 50px; height: 50px; padding: 12px; }
  #roomModal .rm-opt b { font-size: 17px; align-self: end; }
  #roomModal .rm-opt span { font-size: 12.5px; line-height: 1.4; align-self: start;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #roomModal .rm-opt::after { content: ''; grid-column: 3; grid-row: 1 / 3; width: 9px; height: 9px; margin-left: -4px;
    border-top: 3px solid var(--rm-c); border-right: 3px solid var(--rm-c); transform: rotate(45deg); }
  #roomModal .rm-opt:active { transform: scale(.985); }

  .rm-setup { gap: 12px; }
  .rm-cols { gap: 16px; }
  .rm-col-look { gap: 8px; }
  .rm-prev { --cut: 12px; --bw: 1px; --bd: rgba(255,255,255,.14); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; height: 112px; overflow: hidden; background: var(--lb-bg, #19154A); transition: background .3s; }
  .rm-prev-pin { display: flex; flex-direction: column; align-items: center; padding: 5px 14px 6px; border-radius: 8px; background: #fff; color: #1B1A33;
    box-shadow: 0 4px 12px rgba(0,0,0,.3); }
  .rm-prev-pin small { font: 800 7px var(--r-disp); letter-spacing: .14em; text-transform: uppercase; color: #6B6890; }
  .rm-prev-pin b { font: 900 18px/1.05 var(--r-mono); letter-spacing: .14em; }
  .rm-prev-ps { display: flex; gap: 6px; }
  .rm-prev-ps span { display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 6px; background: rgba(10,8,34,.55); }
  .rm-prev-ps img { width: 18px; height: 18px; object-fit: contain; }
  .rm-prev-ps i { display: block; width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.55); }
  .rm-themes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; overflow-x: auto;
    margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .rm-themes::-webkit-scrollbar { display: none; }
  .rm-themes button { scroll-snap-align: start; }
  .rm-themes button i { height: 42px; }

  .rm-col-opts { gap: 0; padding: 2px 14px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .rm-col-opts .rm-f { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rm-col-opts .rm-f .rm-l { flex: 1; color: #fff; font: 900 14.5px var(--r-disp); letter-spacing: 0; text-transform: none; }
  .rm-col-opts .rm-max { display: contents; }
  .rm-col-opts .rm-step { width: 38px; height: 38px; flex: none; }
  .rm-col-opts .rm-max .u-input { flex: none; width: 62px; height: 38px; }
  .rm-col-opts .rm-max .seg { flex: 1 1 100%; margin-top: 6px; }
  .rm-col-opts .rm-max .seg button { padding-top: 7px; padding-bottom: 7px; }
  .rm-col-opts .rm-sw { padding: 12px 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rm-col-opts .rm-sched .rm-sw { border-bottom: 0; }
  .rm-col-opts .rm-sw b { font-size: 14.5px; }
  .rm-col-opts .rm-sw small { font-size: 12px; }
  .rm-col-opts .rm-time { padding: 0 0 12px; }
}

/* ── the PIN screen on a phone (and any screen too small for the two
   columns): one card like the computer's — the ducks over the form, the
   × to leave in the top corner, Scan and Create side by side, how it
   works in three short lines at the foot ── */
@media not all and (min-width: 900px) and (min-height: 560px) {
  .rj[data-screen="code"] .rj-head { margin-bottom: 14px; }
  .rj[data-screen="code"] .rj-hx:not([hidden]) { display: flex; grid-column: 1; }
  .rj-hx:hover { --bg: #BC2C44; }
  .rj-screen[data-screen="code"].on { display: flex; flex-direction: column; padding: 0; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    background: linear-gradient(165deg, rgba(40,34,110,.82), rgba(14,12,46,.92)); box-shadow: inset 0 0 0 1px rgba(196,178,255,.2); }
  .rj-screen[data-screen="code"] .rj-art { display: contents; }
  .rj-art-ducks { order: 0; display: flex; align-items: flex-end; justify-content: center; padding: 22px 16px 0;
    background: radial-gradient(ellipse at 50% 70%, rgba(241,196,15,.2), transparent 65%); }
  .rj-art-ducks img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.4)); animation: rjBob 2.6s ease-in-out infinite; }
  .rj-art-ducks img:nth-child(2) { width: 104px; height: 104px; margin: 0 -10px; position: relative; z-index: 1; animation-delay: -1.2s; }
  .rj-art-ducks img:nth-child(3) { animation-delay: -.6s; }
  .rj-screen[data-screen="code"] .rj-form { order: 1; display: flex; flex-direction: column; padding: 6px 18px 18px; }
  .rj-form .rj-title { font-size: 26px; margin-top: 8px; }
  .rj-form .rj-sub { margin-bottom: 16px; }
  .rj-form .rj-code { font-size: 34px; padding: 12px 8px; }
  .rj-form .rj-row-code { grid-template-columns: 1fr 1fr; }
  .rj-form .rj-row-code .rj-exit { display: none; }
  .rj-form .rj-row-code .rj-create { grid-column: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .rj-form .rj-l { display: none; }
  .rj-form .rj-s { display: inline; }
  .rj-art-t { order: 2; display: block; padding: 14px 18px 0; border-top: 1px solid rgba(255,255,255,.08);
    font: 900 11px var(--r-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--r-amber); }
  .rj-steps { order: 3; list-style: none; margin: 0; padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
  .rj-steps li { display: flex; align-items: center; gap: 10px; font: 700 13px/1.4 var(--r-disp); color: rgba(236,234,255,.8); }
  .rj-steps i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(241,196,15,.16); box-shadow: inset 0 0 0 2px rgba(241,196,15,.55); color: var(--r-amber); font: 900 12px var(--r-mono); font-style: normal; }
}
@media not all and (min-width: 900px) and (min-height: 560px) {
  @media (prefers-reduced-motion: reduce) { .rj-art-ducks img { animation: none; } }
}

/* ── the message screens (room closed, full, locked, you left…) ──
   One card, a computer's and a phone's alike: a lit band at the top with
   the emoji in a glowing badge between two ducks, the title and the words
   under it, the buttons full width. Leave is the × in the top corner, as on
   the code screen. */
.rj[data-screen="msg"] { width: min(560px, 100%); }
.rj[data-screen="msg"] .rj-head [data-el="exitX"]:not([hidden]) { display: flex; grid-column: 1; }
.rj[data-screen="msg"] .rj-hx:hover { --bg: #BC2C44; }
.rj-screen[data-screen="msg"] .rj-exit { display: none; }
.rj-screen[data-screen="msg"].on { display: flex; flex-direction: column; padding: 0 22px 24px; overflow: hidden; position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: linear-gradient(165deg, rgba(40,34,110,.84), rgba(14,12,46,.94)); box-shadow: inset 0 0 0 1px rgba(196,178,255,.2); }
.rj-screen[data-screen="msg"]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 168px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(241,196,15,.24), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,0) 12px 24px), linear-gradient(180deg, rgba(74,170,230,.12), rgba(8,8,30,0));
  border-bottom: 1px solid rgba(255,255,255,.07); }
.rj-screen[data-screen="msg"] .rj-center { position: relative; padding: 0; flex: none; }
.rj-msg-hero { display: flex; align-items: flex-end; justify-content: center; height: 168px; margin-bottom: 44px; }
.rj-msg-hero img { width: 76px; height: 76px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); animation: rjBob 2.8s ease-in-out infinite; }
.rj-msg-hero .d1 { transform-origin: bottom; animation-delay: -1.1s; }
.rj-msg-hero .d2 { animation-delay: -.4s; }
.rj-screen[data-screen="msg"] .rj-emoji { width: 116px; height: 116px; margin: 0 -4px -26px; position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 58px; line-height: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2E2780, #15123F 72%);
  box-shadow: 0 0 0 4px rgba(241,196,15,.85), 0 0 0 10px rgba(241,196,15,.16), 0 12px 30px rgba(0,0,0,.45), 0 0 50px rgba(241,196,15,.3); }
.rj-screen[data-screen="msg"] .rj-title { font-size: 28px; margin: 0 0 6px; }
.rj-screen[data-screen="msg"] .rj-sub { margin: 0 auto 6px; max-width: 400px; font-size: 15px; }
.rj-screen[data-screen="msg"] > .rj-btn { margin-top: 18px; }
.rj-screen[data-screen="msg"] > .rj-row { grid-template-columns: 1fr; }
.rj-screen[data-screen="msg"] > .rj-btn:not([hidden]) + .rj-row .rj-btn { margin-top: 10px; }
@media (min-width: 900px) and (min-height: 560px) {
  .rj[data-screen="msg"] .rj-head { margin-bottom: 22px; }
  .rj-screen[data-screen="msg"].on { padding: 0 44px 34px; }
  .rj-screen[data-screen="msg"]::before { height: 190px; }
  .rj-msg-hero { height: 190px; }
  .rj-msg-hero img { width: 92px; height: 92px; }
  .rj-screen[data-screen="msg"] .rj-emoji { width: 132px; height: 132px; font-size: 66px; }
  .rj-screen[data-screen="msg"] .rj-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .rj-msg-hero img { animation: none; } }

/* ── Create a room: the background picked on its own preview, and the
   host's own duck ── */
.rm-prev-wrap { position: relative; }
.rm-prev-wrap .rm-prev { display: flex; }
.rm-prev-name { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  background: rgba(10,8,34,.72); color: #fff; font: 800 12px var(--r-disp); letter-spacing: .04em; }
.rm-nav { margin-top: -19px; }
.rm-themes[hidden] { display: none !important; }
.rj-pick-only .rj-room { display: none; }
/* Back first, then the call to act */
.rj-pick-only .rj-actions { grid-template-columns: 1fr 1.6fr; }
.rj-pick-only [data-el="profLeave"] { order: -1; }
.rm-self-row { display: flex; align-items: center; gap: 10px; padding: 0 2px 4px; }
.rm-self-row[hidden] { display: none; }
.rm-self-row .u-input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: 800 15px var(--r-disp); }
.rm-self-duck { --cut: 9px; --bg: rgba(255,255,255,.1); position: relative; flex: none; width: 54px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rm-self-duck:hover { --bg: rgba(255,255,255,.18); }
.rm-self-duck img { width: 44px; height: 44px; object-fit: contain; }
.rm-self-duck span { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  background: var(--r-amber); color: #2C1F0A; }
@media (min-width: 861px) {
  .rm-cols { align-items: stretch; }
  .rm-col-look { display: flex; flex-direction: column; }
  .rm-prev-wrap { flex: 1; display: flex; min-height: 260px; }
  .rm-prev-wrap .rm-prev { flex: 1; aspect-ratio: auto; }
  .rm-prev-name { font-size: 13px; bottom: 12px; }
}
@media (max-width: 640px) {
  .rm-prev-wrap .rm-prev { height: 150px; }
  .rm-col-opts .rm-self { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rm-col-opts .rm-self > .rm-sw { padding: 0; border-bottom: 0; }
}