/* =====================================================================================================================
   ROOMS — everything between «let's play together» and the first move, and the screens around every room game:
   the room's front door (the number, the QR, the site to type it into), who's in (each player in their own colour), the
   phone's way in, «you're in», the wait, a dropped line and its return, the ends of a room, the room clock, the generic
   answer and vote buttons on a phone, the host's own seat, the session bar, and the TV while the room waits.
   Loaded after app.css (and shell.css). Motion is transform/opacity only (old TVs), no blur, no fixed backgrounds, and every
   animation stops under prefers-reduced-motion. Colours come from the theme's and the game world's tokens, so a room reads
   the same in dark, light and every game's world.
   ===================================================================================================================== */

/* ---------- tokens ---------- */
:root {
  --rm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --rm-out: cubic-bezier(.2, .8, .2, 1);
  --rm-ink: #1A1030;                                                     /* the ink on a player's colour: dark on every fill */
}
/* the ten player colours: bright fills that keep 6:1 or better with the dark ink, one hue apart each */
.hu0 { --hc: #FF6B6B; } .hu1 { --hc: #FF9A3D; } .hu2 { --hc: #F4C03E; } .hu3 { --hc: #B5D94A; } .hu4 { --hc: #3FC48C; }
.hu5 { --hc: #33C6C4; } .hu6 { --hc: #5AA8F8; } .hu7 { --hc: #8C8CFF; } .hu8 { --hc: #B77CF2; } .hu9 { --hc: #F27AB5; }

/* ---------- a player: their initial on their colour (the mark's three circles are three people round a table) ---------- */
.pav { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--hc, var(--gold)); color: var(--rm-ink);
  font: 900 16px/1 var(--font-d); letter-spacing: 0; user-select: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 0 0 2px color-mix(in srgb, var(--text) 10%, transparent); }
.pav.xs { width: 22px; height: 22px; font-size: 11px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.pav.xl { width: 76px; height: 76px; font-size: 34px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 0 12px 28px color-mix(in srgb, var(--hc) 38%, transparent); }
.pav.xxl { width: 128px; height: 128px; font-size: 58px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15), 0 18px 44px color-mix(in srgb, var(--hc) 45%, transparent); }
/* a game's own avatar (.av, its size and shape the game's) in the player's room colour: the fill and ink of their phone's */
.av.rh { background: var(--hc); color: var(--rm-ink); }

/* ---------- small things every room screen uses ---------- */
.ph-spin { width: 18px; height: 18px; flex: none; display: inline-block; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--gold) 26%, transparent); border-top-color: var(--gold); animation: rmSpin .8s linear infinite; }
.ph-spin.big { width: 44px; height: 44px; border-width: 4px; }
@keyframes rmSpin { to { transform: rotate(360deg); } }

/* =====================================================================================================================
   THE FRONT DOOR — CodeBox: the number big, a QR to scan, the site to type it into. It lays itself out by the room it
   gets: stacked in a phone's column, a poster side by side when the box is wide (a laptop or a TV).
   ===================================================================================================================== */
.codebox { container-type: inline-size; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; padding: 20px 18px 18px;
  border-radius: 24px; overflow: hidden; background: var(--surface);
  background: radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--gold) 13%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line-2)); box-shadow: var(--shadow); }
.codebox::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; opacity: .85;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='4'><path d='M0 2 5 0 10 2 5 4Z' fill='%23FF6B57'/><path d='M10 2 15 0 20 2 15 4Z' fill='%23F4B73E'/></svg>") repeat-x center / auto 4px; }
.cb-main { container-type: inline-size; flex: 1 1 230px; max-width: 540px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cb-how { font: 800 15px/1.3 var(--font-d); color: var(--dim); }
.cb-url { font-size: 14px; line-height: 1.5; color: var(--dim); }
.cb-site { font-weight: 800; color: var(--text); padding: 1px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.cb-acts { flex: 1 1 100%; flex-wrap: wrap; }                                     /* the buttons: a row under the number and the QR */
.cb-acts .btn { min-width: 0; min-height: 44px; white-space: normal; line-height: 1.25; text-align: center; padding-block: 6px; }
.cb-acts .cb-tv { flex: none; padding-inline: 12px; }
.cb-acts .cb-tv .ic { width: 18px; height: 18px; }
@container (max-width: 560px) { .cb-tvl { display: none; } .cb-acts .cb-tv { padding-inline: 12px; } }   /* not a wide box: the TV button is its icon */
.cb-acts .btn:not(.cb-tv):not(.cb-qr) { flex: 1 1 auto; font-size: 15px; }
.cb-acts .cb-qr { display: none; flex: none; padding-inline: 12px; } .cb-acts .cb-qr .ic { width: 19px; height: 19px; }
/* a phone's box: one row — the two words share what the two icons leave; a wide box: a tidy row in the middle */
@container (max-width: 440px) { .cb-acts { flex-wrap: nowrap; } .cb-acts .btn:not(.cb-tv):not(.cb-qr) { flex: 1 1 0; padding-inline: 8px; font-size: 14px; white-space: nowrap; }
  .cb-acts .btn:not(.cb-tv):not(.cb-qr) .ic { display: none; } }
/* too narrow for the four on one line (a small phone, larger text, the box inside a game's card): «شارك الرابط» takes the
   first line, the rest share the second, and nothing is ever cut at the box's edge */
@container (max-width: 318px) { .cb-acts { flex-wrap: wrap; } .cb-acts .btn:not(.cb-tv):not(.cb-qr) { min-width: max-content; } .cb-acts .btn:not(.cb-tv):not(.cb-qr):first-child { flex-basis: 100%; } }
@container (min-width: 700px) { .cb-acts { justify-content: center; } .cb-acts .btn:not(.cb-tv):not(.cb-qr) { flex: 0 1 250px; } }
/* the host's phone: the number and who's in come first — the QR folds into a button that shows it big for whoever's next to you */
@media (max-width: 600px) { .codebox:not(.poster) > .qr-wrap { display: none; } .cb-acts .cb-qr { display: inline-flex; } }

/* «اقفل الجلسة»: the host's lock on the room (ui.js RoomLock), a line under the front door's buttons; the lamp's gold once
   it is locked. The session strip carries a compact one; the tables' host deck its own buttons (tablekit.js). */
.room-lock { flex: 1 1 100%; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--gold) 28%, var(--line-2)); }
.room-lock .btn { flex: none; min-height: 42px; display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.room-lock .btn .ic { width: 18px; height: 18px; }
.room-lock .rl-sub { flex: 1 1 200px; margin: 0; line-height: 1.45; text-align: start; }
.room-lock.on .rl-b { border-color: var(--gold); color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.room-lock.on .rl-sub { color: var(--gold-ink); font-weight: 700; }
@container (max-width: 440px) { .room-lock .rl-sub { order: 3; flex-basis: 100%; } .room-lock .btn { flex: 1 1 0; padding-inline: 8px; font-size: 14px; } }
/* «جلسة جديدة (رقم جديد)»: a line of its own under the lock (it ends this room for everyone: never squeezed in beside the rest) */
.room-lock .btn.rl-new { order: 5; flex: 1 1 100%; min-height: 40px; }
@container (max-width: 300px) { .room-lock .btn { flex-basis: 100%; } }   /* the smallest phones: a line each, never cut */
/* a button keeps its whole label (a shell button may shrink below it, and «من في الجلسة (1)» lost its bracket at 375px): the
   row wraps instead, and on a narrow card the two sit a little tighter first, so they still share a line where they can */
.room-lock .btn { min-width: auto; }
@container (max-width: 340px) { .room-lock .btn { padding-inline: 6px; gap: 4px; } }
.rl-sheet .rl-out .rp-n { opacity: .75; } .rl-sheet .rl-back { flex: none; min-height: 38px; }
.room-lock.compact { flex: none; gap: 6px; padding-top: 0; border-top: 0; }
.room-lock.compact .btn { min-height: 36px; padding-inline: 10px; font-size: 13px; }
.tk-b.rl-tk.on { box-shadow: inset 0 0 0 1.5px var(--gold); }
.rl-sheet .roster li { gap: 10px; }
.rl-sheet .rl-rm { flex: none; min-height: 38px; }
/* the top bar's (ui.js RoomLock top): the room's screen while a game is on; hidden while the screen shows a lock of its own */
body.rl-own .rl-top { display: none; }   /* (ui.js marks the body: a class, not :has(), which a TV's older browser lacks) */
.rl-top.on { border-color: var(--gold); color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.rl-sheet .room-lock { padding-top: 0; border-top: 0; }
.rl-sheet .rl-h { margin: 4px 0 -2px; font: 800 13px var(--font-b); color: var(--dim); }
/* «نائب المضيف» (cohost.js): in «من في الجلسة» a chip for each player who's here, the co-host's in gold with the crown; one
   tappable line in a phone host's lobby; and on the co-host's phone, once the host's has gone, its card framed in gold */
.co-pick { gap: 8px; } .co-pick .co-sub { margin: 0; line-height: 1.45; }
.co-pick .chip { min-height: 40px; max-width: 100%; padding-inline: 5px 13px; padding-block: 3px; gap: 7px; font-weight: 700; white-space: normal; line-height: 1.25; border-width: 1.5px; }
.co-pick .chip .rp-n { overflow-wrap: anywhere; }
.co-pick .chip[aria-pressed="true"] { border-color: var(--gold); background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--gold); }
.co-pick .chip .ic { width: 22px; height: 22px; margin-inline-start: 3px; color: var(--gold-ink); }
.room-lock .rl-co { order: 4; flex: 1 1 100%; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 2px; text-align: start; line-height: 1.35; }
.room-lock .rl-co .ic { width: 18px; height: 18px; flex: none; } .room-lock .rl-co:not(.set) { color: var(--dim); } .room-lock .rl-co:not(.set) .ic { color: var(--gold-ink); }
.ph-note.co-note { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* the digits: raised tiles in the lamp's gold, a slow sheen passing over them one after another (the room is waiting) */
/* sized by the text column they sit in (.cb-main is its own container), so four digits always fit beside the QR */
.codebox .code-digits { gap: 10px; gap: clamp(7px, 3cqi, 16px); }
.codebox .code-digits span { position: relative; overflow: hidden; width: 60px; height: 72px; width: clamp(34px, 20.5cqi, 92px); height: clamp(48px, 24.5cqi, 110px);
  border-radius: 16px; border-radius: clamp(12px, 4.5cqi, 20px); font: 900 42px/1 var(--font-d); font-size: clamp(28px, 14.5cqi, 66px); color: var(--gold-ink);
  background: var(--raised); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 8%, var(--raised)), var(--raised));
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line-2)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .16); }
.codebox .code-digits span::after { content: ""; position: absolute; inset: -30% -70%; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--gold) 30%, transparent) 50%, transparent 58%);
  transform: translateX(-110%); animation: rmSheen 6s var(--rm-out) infinite; animation-delay: calc(var(--i, 0) * .16s + 1s); }
@keyframes rmSheen { 0%, 64% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

/* the QR: white card, a gold viewfinder breathing round it; tapping it (phone host) shows it bigger */
.qr-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; margin: 0; background: none; border: 0; border-radius: 20px; color: inherit; font: inherit; }
button.qr-wrap { cursor: zoom-in; }
button.qr-wrap:active .qr-frame { transform: scale(.97); }
.qr-frame { position: relative; display: block; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); transition: transform .15s; }
.qr-frame .qr { padding: 0; border-radius: 0; background: #fff; }
.codebox:not(.poster) .qr-frame .qr { width: clamp(140px, 26cqi, 196px) !important; height: clamp(140px, 26cqi, 196px) !important; }   /* grows with the box */
.qr svg { shape-rendering: crispEdges; }
.qr-frame::before { content: ""; position: absolute; inset: -9px; pointer-events: none; --c: var(--gold); --l: 26px; --w: 4px;
  background: linear-gradient(var(--c) 0 0) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c) 0 0) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c) 0 0) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l) no-repeat;
  animation: rmFinder 3s ease-in-out infinite; }
@keyframes rmFinder { 50% { transform: scale(1.04); opacity: .7; } }
.qr-wrap > .muted { font-weight: 600; }

/* the bigger code, in a sheet: someone next to the host scans it off their phone */
.cb-big { gap: 16px; padding-bottom: 8px; }
.cb-big .code-digits span { width: 56px; height: 68px; border-radius: 15px; font: 900 40px/1 var(--font-d); display: grid; place-items: center; color: var(--gold-ink); background: var(--raised); border: 1px solid var(--line-2); }
.cb-big .qr-frame { padding: 12px; }

/* putting the game on a TV: three steps and the link */
.cb-tvsheet { gap: 12px; }
.cb-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.cb-steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; font-weight: 600; line-height: 1.5; }
.cb-steps li::before { content: counter(st); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font-d); background: var(--gold); color: #1B150A; }
.cb-num { font: 900 22px var(--font-d); letter-spacing: .14em; color: var(--gold-ink); }
.cb-link { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.cb-link code { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; color: var(--dim); }

/* =====================================================================================================================
   WHO'S IN — the roster: each player in their colour, away players faded, new arrivals popping in (with a note)
   ===================================================================================================================== */
.lobby.roster { gap: 8px; }
.lobby.roster li.rp { gap: 12px; padding: 8px 10px; border-radius: 16px; border-color: color-mix(in srgb, var(--hc) 34%, var(--line)); transition: opacity .3s, border-color .3s;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 9%, var(--surface)), var(--surface) 60%); }
[dir="rtl"] .lobby.roster li.rp { background: linear-gradient(270deg, color-mix(in srgb, var(--hc) 9%, var(--surface)), var(--surface) 60%); }
.lobby.roster .rp-n { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.lobby.roster li.rp.away { opacity: .55; border-color: var(--line); }
.roster .rp.away .pav { filter: grayscale(.85); }
.lobby.roster .dot.on { background: var(--green-hi); }
.chips.roster { gap: 8px; }
.chips.roster .chip.rp { min-height: 38px; max-width: 100%; padding-inline: 4px 13px; padding-block: 3px; gap: 7px; font-weight: 700; white-space: normal; line-height: 1.25; }
.chips.roster .rp-n { overflow-wrap: anywhere; }
.chips.roster .chip.rp.on { --cc: var(--hc); border-color: color-mix(in srgb, var(--hc) 72%, transparent); background: color-mix(in srgb, var(--hc) 15%, var(--surface)); }
.chips.roster .chip.rp.away { opacity: .6; }
.chips.roster .chip .x { width: 26px; height: 26px; margin-inline: 0 -8px; display: grid; place-items: center; }
.chips.roster .chip .x .ic { width: 14px; height: 14px; }
.roster .rp.pop { animation: rmPop .6s var(--rm-spring) both; }
.roster .rp.pop .pav { animation: rmPopAv .8s var(--rm-spring) both; }
@keyframes rmPop { from { opacity: 0; transform: translateY(10px) scale(.6); } }
@keyframes rmPopAv { from { transform: scale(.2) rotate(-40deg); } 60% { transform: scale(1.25); } }
.roster-empty { padding: 4px 2px; }
/* how many more the game needs, then «you can start» */
.roster-box { display: flex; flex-direction: column; gap: 10px; }
.rp-need { display: flex; align-items: center; gap: 9px; font: 700 14px/1.4 var(--font-d); color: var(--dim); }
.rp-need i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); animation: rmBlink 1.6s ease-in-out infinite; }
.rp-need.ok { color: var(--green-hi); }
.rp-need.ok i { background: var(--green-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-hi) 24%, transparent); animation: none; }
@media (min-width: 1000px) { body.wide .rp-need { font-size: 17px; } }
.rp-you { margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font: 800 11.5px var(--font-d); vertical-align: middle; background: color-mix(in srgb, var(--hc) 24%, transparent); color: var(--text); }
.chips.roster .rp-you { margin-inline-start: -2px; }

/* =====================================================================================================================
   THE SESSION BAR — while a game runs: the number (tap: the QR, for someone late), who's here, the line
   ===================================================================================================================== */
.session-bar { padding: 6px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); gap: 10px; }
.session-bar .status { font-size: 12.5px; }
.sb-code { display: inline-flex; align-items: center; gap: 6px; font: 900 18px var(--font-d); letter-spacing: .14em; padding: 5px 12px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line-2)); cursor: pointer; }
.sb-code .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.sb-code:active { transform: scale(.96); }
.sb-avs { display: inline-flex; align-items: center; }
.sb-avs .pav { margin-inline-start: -7px; box-shadow: 0 0 0 2px var(--surface); }
.sb-avs .pav:first-child { margin-inline-start: 0; }

/* =====================================================================================================================
   THE PHONE — the way in, «you're in», the strip at the top, the wait, a dropped line, the ends of a room
   ===================================================================================================================== */
/* the way in: the game and the room, you, your name, one big button */
.jn-card { gap: 14px; padding-top: 4px; text-align: center; animation: rmRise .35s var(--rm-out) both; }
@keyframes rmRise { from { opacity: 0; transform: translateY(10px); } }
.jn-room { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; text-align: start; background: var(--surface); border: 1px solid var(--line); }
.jn-gi { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; color: var(--gold-ink);
  background: var(--raised); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 24%, var(--raised)), var(--raised)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); }
.jn-gi .gi, .jn-gi .ic { width: 28px; height: 28px; }
.jn-room.wait .jn-rt b { color: var(--dim); }
.jn-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.jn-rt small { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.jn-rt b { font: 800 19px/1.3 var(--font-d); overflow-wrap: anywhere; }
.jn-code, .jh-code { flex: none; font: 900 17px/1 var(--font-d); letter-spacing: .14em; color: var(--gold-ink); padding: 8px 10px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line-2); }
.jn-me { position: relative; display: grid; place-items: center; padding: 10px 0 2px; }
.jn-me::before { content: ""; position: absolute; width: 112px; height: 112px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -46%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 20%, transparent), transparent); }
.jn-me .pav { position: relative; transition: background .25s; }
.jn-card h2 { font-size: 24px; }
.jn-card .big-in { min-height: 60px; font-size: 22px; font-weight: 700; border-radius: 16px; }
.jn-go.btn.lg { min-height: 60px; font-size: 20px; border-radius: 18px; }
/* your colour carries your own actions — the way in, your pick — never the app's generic gold box */
.jn-go.btn { background: var(--hc, var(--green)); color: var(--rm-ink); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 12px 26px -14px var(--hc, transparent); }
.jn-tv { align-self: center; display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font-weight: 600; margin-top: 4px; }
.jn-tv .ic { width: 18px; height: 18px; }
/* the other language, at the card's top corner (as on the welcome guide): its name in its own script, the globe in gold */
.jn-lang { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-bottom: -6px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 700 15px/1.2 var(--font-d); }
.jn-lang .ic { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
/* a TV or a laptop opening the way in is most likely the room's screen: «هذي شاشة العرض» is a full key there (a remote finds it) */
@media (min-width: 1000px) { .jn-tv { align-self: stretch; justify-content: center; gap: 10px; min-height: 56px; margin-top: 10px; padding: 10px 20px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font: 800 19px var(--font-d); text-decoration: none; }
  .jn-tv .ic { width: 22px; height: 22px; } }
/* a short phone (an iPhone SE): the card closes up a little, so «English» on top still leaves «هذي شاشة العرض» on the first screen */
@media (max-height: 640px) { .jn-card { gap: 10px; } .jn-lang { margin-bottom: -4px; } .jn-me { padding-top: 4px; }   /* («English» keeps its 44px for a thumb) */
  /* (with the app's own fonts on a 568px phone «هذي شاشة العرض» sat 4px under the screen: the box, the button and the room card give a little) */
  .jn-card .big-in, .jn-go.btn.lg { min-height: 52px; } .jn-room { padding-block: 7px; } }
.jn-status { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px var(--font-d); color: var(--dim); padding: 18px 0; }
.jn-card.busy .jn-me .pav { animation: rmBob 1.6s ease-in-out infinite; }
@keyframes rmBob { 50% { transform: translateY(-4px); } }

/* the strip at the top: you in your colour, the room's number, the line */
.join-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.join-head .pav { width: 32px; height: 32px; font-size: 14px; }
.jh-name { flex: 1; min-width: 0; font: 800 16px/1.3 var(--font-d); overflow-wrap: anywhere; }
.jh-code { font-size: 14px; padding: 6px 9px; border-radius: 999px; }
.jh-net { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 24px; height: 24px; justify-content: center; border-radius: 999px; font: 800 12px var(--font-d); }
.jh-net i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-hi) 24%, transparent); }
.jh-net.off i { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent); animation: rmBlink 1s ease-in-out infinite; }
.jh-net.back { padding: 0 10px 0 8px; background: color-mix(in srgb, var(--green-hi) 18%, transparent); color: var(--green-hi); animation: rmPop .45s var(--rm-spring) both; }
.jh-net.back .ic { width: 15px; height: 15px; stroke-width: 3; }
@keyframes rmBlink { 50% { opacity: .35; } }

/* a dropped line, calmly: a banner, the game dimmed under it and not taking taps (nothing gets lost) */
.ph-conn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; line-height: 1.35;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); animation: rmRise .3s var(--rm-out) both; }
.ph-conn b { display: block; font: 800 15px var(--font-d); }
.ph-conn span:not(.ph-spin):not(.ph-conn-ic) { font-size: 13.5px; color: var(--dim); }
.ph-conn-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-ink); }
.ph-conn-ic .ic { width: 20px; height: 20px; }
.ph-conn .btn { flex: none; }
.scr.join.offline > .rg > :not(.join-head):not(.ph-conn) { opacity: .42; filter: saturate(.5); pointer-events: none; transition: opacity .3s; }
/* the name the screen shows for this phone when it isn't the one it typed («يزن 2»), or the host's seat under «المضيف» */
.ph-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 16px; line-height: 1.35; background: var(--surface); border: 1px solid var(--line-2); }
.ph-note .grow { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ph-note b { font: 800 15px var(--font-d); overflow-wrap: anywhere; } .ph-note .grow > span { font-size: 13.5px; color: var(--dim); }
.ph-note .grow > .btn { margin-top: 8px; } .ph-note .icon-btn { flex: none; margin: -4px; }

/* «you're in»: the whole screen for a moment — your colour glowing, you popping in with two rings, the words */
.ph-in { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
  background: var(--bg); background: radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--hc, var(--gold)) 30%, var(--bg)), var(--bg) 72%);
  animation: rmFade .25s ease-out both; pointer-events: none; }   /* a moment that never gets in the way of a tap */
.ph-in.out { opacity: 0; transform: scale(1.04); transition: opacity .3s, transform .3s; }
.ph-in-av { position: relative; display: grid; place-items: center; }
.ph-in-av .pav { position: relative; animation: rmInAv .7s var(--rm-spring) both; }
.ph-in-av .ring { position: absolute; width: 128px; height: 128px; border-radius: 50%; border: 3px solid var(--hc, var(--gold)); opacity: 0; animation: rmRing 1.2s var(--rm-out) .15s both; }
.ph-in-av .ring.r2 { animation-delay: .38s; }
.ph-in b { font: 900 44px/1.1 var(--font-d); animation: rmRise .45s var(--rm-out) .2s both; }
.ph-in p { font-size: 17px; font-weight: 600; color: var(--dim); animation: rmRise .45s var(--rm-out) .32s both; }
@keyframes rmFade { from { opacity: 0; } }
@keyframes rmInAv { from { transform: scale(.2); opacity: 0; } }
@keyframes rmRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* the wait: you in the middle, the majlis's three lamps going slowly round you; what's happening; your colour to change */
.ph-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 52vh; padding: 12px 4px; }
.ph-wait.slim { min-height: 40vh; }
.ph-wait h2 { font-size: 22px; line-height: 1.35; max-width: 22ch; }
.ph-orbit { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 6px; }
.ph-orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--text) 16%, transparent); animation: rmSpin 14s linear infinite; }
.ph-orbit-ring i { position: absolute; width: 16px; height: 16px; border-radius: 50%; top: -8px; left: calc(50% - 8px); background: #F4B73E; box-shadow: 0 0 14px rgba(244, 183, 62, .7); transform-origin: 8px 83px; }
.ph-orbit-ring i:nth-child(2) { background: #FF6B57; box-shadow: 0 0 14px rgba(255, 107, 87, .6); transform: rotate(120deg); }
.ph-orbit-ring i:nth-child(3) { background: #3FB98B; box-shadow: 0 0 14px rgba(63, 185, 139, .6); transform: rotate(240deg); }
.ph-orbit .pav { animation: rmBreath 3.2s ease-in-out infinite; }
@keyframes rmBreath { 50% { transform: scale(1.05); } }
.ph-wait > .muted { max-width: 30ch; }
.ph-hues { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-hues .lbl { margin: 0; }
.ph-hue-row { display: grid; grid-template-columns: repeat(5, 44px); gap: 8px 12px; justify-content: center; }   /* two rows of five, a thumb's target each */
.ph-hue { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: none; }
.ph-hue::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--hc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); transition: transform .15s var(--rm-spring), box-shadow .15s; }
.ph-hue:active::before { transform: scale(.86); }
.ph-hue.on::before { transform: scale(1.12); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--hc); }

/* the ends of a room: a wrong number, removed by the host, a full room, a room that ended */
.jn-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 62vh; padding: 16px 6px; animation: rmRise .35s var(--rm-out) both; }
.jn-end-ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; color: var(--gold-ink);
  background: color-mix(in srgb, var(--gold) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.jn-end-ic .ic { width: 38px; height: 38px; stroke-width: 2.2; }
.jn-end.k-kicked .jn-end-ic { color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surface)); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.jn-end.k-ended .jn-end-ic { color: var(--green-hi); background: color-mix(in srgb, var(--green-hi) 14%, var(--surface)); border-color: color-mix(in srgb, var(--green-hi) 40%, transparent); }
.jn-end h2 { font-size: 25px; line-height: 1.3; max-width: 20ch; }
.jn-end > p { max-width: 30ch; line-height: 1.6; }
.jn-end > .btn { min-width: 200px; }
.jn-again { width: 100%; max-width: 330px; margin-top: 8px; }
.jn-codein { flex: 1; min-height: 56px; text-align: center; font: 900 26px var(--font-d); letter-spacing: .32em; }
.jn-again .btn { min-height: 56px; padding-inline: 22px; }

/* the room clock on every phone: a clean strip, the seconds big, a bar running down (gold, red at the end) */
.ph-clock { padding: 12px 16px 14px; border-radius: 16px; gap: 12px; }
.ph-clock b { font-size: 30px; min-width: 3ch; }
.ph-clock-bar { height: 5px; border-radius: 0 5px 5px 0; }
.ph-clock.mine { border-color: var(--hc, var(--gold)); background: color-mix(in srgb, var(--hc, var(--gold)) 15%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc, var(--gold)) 22%, transparent); }
.ph-clock.mine .ph-clock-bar { background: var(--hc, var(--gold)); }
.ph-clock.low .ph-clock-bar { background: var(--red); }

/* the generic answer and vote buttons on a phone (a quiz question, a vote, a night pick, a truth to find) */
.scr.join .qz-opts { gap: 10px; }
.scr.join .qz-opt { min-height: 64px; border-radius: 18px; padding: 10px 14px; gap: 14px; font-size: 18px; font-weight: 700; transition: transform .12s, border-color .2s, background .2s;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--text) 6%, transparent); }
.scr.join .qz-opt .n { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; background: color-mix(in srgb, var(--text) 9%, var(--raised)); }
.scr.join .qz-opt:not([disabled]):active { transform: scale(.97); }
.scr.join .qz-opt.mine { border-color: var(--hc, var(--gold)); background: color-mix(in srgb, var(--hc, var(--gold)) 17%, var(--surface)); }
.scr.join .qz-opt.mine .n { background: var(--hc, var(--gold)); color: var(--rm-ink); }
.scr.join .qz-opt.right .n { background: var(--green-hi); color: #0B2419; }
.scr.join .qz-opt.wrong .n { background: var(--red); color: #fff; }
.scr.join .qz-opt[disabled]:not(.mine):not(.right):not(.wrong) { opacity: .6; }
.scr.join .qz-q { font-size: 23px; line-height: 1.45; padding: 4px 2px; }
.scr.join .qz-status { font: 700 15px var(--font-d); }
.scr.join .qz-status.ok { display: inline-flex; align-self: center; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--green-hi) 14%, transparent); animation: rmPop .45s var(--rm-spring) both; }

/* =====================================================================================================================
   THE HOST'S OWN SEAT — «ألعب أنا بعد»: the toggle says what it does; the host's bar wears a crown; the table folds away
   ===================================================================================================================== */
.plays-tgl { display: flex; flex-direction: column; gap: 6px; }
.plays-tgl > .muted { padding-inline: 14px; line-height: 1.5; font-size: 13px; }
/* a first-time host's name for its own seat (it plays as «المضيف» until one is typed) */
.plays-tgl .hp-name { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line-2)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.plays-tgl .hp-name .lbl { margin: 0; color: var(--text); font-weight: 700; }
.plays-tgl .hp-name small { font-size: 12.5px; line-height: 1.5; }
.host-bar { border-color: color-mix(in srgb, var(--gold) 40%, var(--line-2)); background: color-mix(in srgb, var(--gold) 9%, var(--raised)); }
.host-bar-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.host-bar-t .ic { width: 17px; height: 17px; color: var(--gold-ink); }
/* its layout, the same in every game (hostplay.js hostBar): the title with «أنهِ اللعبة» across from it (the one that ends
   everything sits apart from the game's buttons), the clock, then the game's buttons in an even grid: one line each, one
   height, an odd one out across the whole row: two to a row, however wide the screen (a phone, a tablet, a TV). */
.host-bar { flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 10px; padding: 10px 12px 12px; }
.host-bar .hb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.host-bar .hb-end { display: flex; gap: 6px; flex: none; }
.host-bar .hb-end > .hb-e { flex: none; min-height: 40px; margin: 0; white-space: nowrap; }
.host-bar .hb-body { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.host-bar .hb-clk { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }   /* (كلمة وحدة's score pill sits by the clock) */
.host-bar .hb-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.host-bar .hb-acts > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.host-bar .hb-acts > .hb-a { width: 100%; min-width: 0; min-height: 44px; margin: 0; white-space: nowrap; justify-content: center; }
.host-bar .hb-acts > .hb-a > :is(span, b) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .host-bar .hb-acts > .hb-a, .host-bar .hb-end > .hb-e { font-size: 13px; padding-inline: 8px; } }
/* a bar wide enough (a laptop or a TV where the host plays too): the clock beside the buttons, as many to a row as fit */
.host-bar { container-type: inline-size; }
@container (min-width: 600px) {
  .hb-body { flex-direction: row; align-items: center; gap: 12px; }
  .hb-acts { flex: 1; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hb-acts > :first-child:nth-last-child(odd) { grid-column: auto; }
}
.host-panel > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.host-panel > summary::-webkit-details-marker { display: none; }
.host-panel > summary .ic { width: 18px; height: 18px; }
.host-panel > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.host-panel[open] > summary::after { transform: rotate(225deg); }
/* the bar's box, in the games whose table holds the host's buttons (hostplay.js hostDesk): empty, it takes no room. Those
   buttons were the table's full-width ones: a label too long for half the bar takes a second line, never «…» (an icon stays beside it) */
.hb-lift:empty { display: none; }
.hb-lift .hb-acts > .hb-a { flex-wrap: nowrap; }
.hb-lift .hb-acts > .hb-a > span { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }

/* =====================================================================================================================
   THE TV — while the room waits: the front door, big enough to read from the sofa; a room tag in the corner during a game
   ===================================================================================================================== */
.tv-wait { min-height: calc(100vh - 40px); gap: 18px; padding: 16px 0; }
.tv-wait .codebox { width: min(100%, 1040px); }
.tvw-game { display: flex; align-items: center; gap: 14px; animation: rmRise .5s var(--rm-out) both; }
.tvw-game b { font: 900 clamp(24px, 3.4vw, 46px)/1.1 var(--font-d); }
.tvw-gi { width: clamp(48px, 5vw, 72px); height: clamp(48px, 5vw, 72px); border-radius: 18px; display: grid; place-items: center; color: var(--gold-ink);
  background: var(--raised); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 26%, var(--raised)), var(--raised)); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); }
.tvw-gi .gi { width: 60%; height: 60%; }
.tvw-line { display: flex; align-items: center; gap: 12px; font: 800 clamp(16px, 1.8vw, 24px) var(--font-d); color: var(--dim); }
.tvw-line .ph-spin { width: 22px; height: 22px; }
/* the poster itself: bigger than a host's box, no buttons */
.codebox.poster { padding: 26px 30px; gap: 22px 40px; border-radius: 30px; }
.codebox.poster .cb-how { font-size: clamp(18px, 4.6cqi, 32px); color: var(--text); }
.codebox.poster .cb-url { font-size: clamp(15px, 3.4cqi, 24px); }
.codebox.poster .cb-main { max-width: 660px; }
.codebox.poster .code-digits span { width: clamp(64px, 21cqi, 132px); height: clamp(78px, 25cqi, 158px); font-size: clamp(46px, 15.5cqi, 100px); border-radius: clamp(16px, 4cqi, 28px); }
.codebox.poster .code-digits { gap: clamp(10px, 3cqi, 20px); }
.codebox.poster .qr-frame { padding: 14px; border-radius: 22px; }
.codebox.poster .qr-wrap > .muted { font-size: clamp(14px, 1.8cqi, 20px); }
.tv-wait .tv-bigcode { font: inherit; letter-spacing: 0; }
/* a room tag in the TV's corner while a game runs: the site and the number, for someone who arrives late */
.room-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; color: var(--dim); }
.room-tag .ic { width: 16px; height: 16px; }
.room-tag .rt-site { font-weight: 700; }
.room-tag .code-mini { font-size: 16px; }
.tv-head { flex-wrap: wrap; }
@media (min-width: 1000px) { .room-tag { font-size: 16px; } .room-tag .code-mini { font-size: 20px; } }

/* a room's lobby on a laptop/TV (the host sits out: body.wide): the door (the number, the QR, «ابدأ») on one side, the
   room's settings beside it, so the code and the start fit the first screen. Marked by class, never :has() (a TV's older
   browser has none): the lobby is .tv-lobby, the one block beside the door .tv-side (several cards go in one wrapper).
   (The old :has() grid left the door shrink-wrapped in the two-team mode's lobby: a 38px strip, the code unreadable.) */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  body.wide .tv-lobby { display: grid; grid-template-columns: minmax(470px, 5fr) 7fr; column-gap: 24px; align-items: start; width: 100%; max-width: 1400px; margin-inline: auto; }
  body.wide .tv-lobby > * { grid-column: 1; min-width: 0; }
  body.wide .tv-lobby > :first-child { grid-column: 1 / -1; }                    /* the lobby's lead line runs across both */
  body.wide .tv-lobby > .tv-side, body.wide .tv-lobby > .rg > .tv-side { grid-column: 2; grid-row: 2 / span 6; }
  body.wide .tv-lobby .room-lock .rl-sub { order: 3; flex-basis: 100%; }         /* the lock's two keys side by side: the door stays short */
  body.wide .tv-lobby .qr-wrap > .muted { max-width: 160px; text-align: center; } /* (a longer caption, «Scan it with…», wraps under the QR, which stays beside the number) */
  body.wide .tv-lobby > .rg > :not(.tv-side) { grid-column: 1; min-width: 0; }  /* (a part that redraws itself: its pieces stand in the door's column) */
  /* a game's art over its lobby (.tv-art) heads it, the lead line under it runs across too, the settings start by the door;
     «ابدأ» stands under the door on the first screen, so a game's sticky bar is a plain row there */
  body.wide .tv-lobby > .tv-art + * { grid-column: 1 / -1; }
  body.wide .tv-lobby > .tv-art ~ .tv-side { grid-row: 3 / span 6; }
  body.wide .tv-lobby > .sticky-cta { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}
/* a 720p TV or a 768 laptop: the art steps aside and the door sits a little tighter, so the door and «ابدأ» fit the first
   screen (in English too, whose lines run longer) */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) and (max-height: 820px) {
  body.wide .tv-lobby > .tv-art { display: none; }
  body.wide .tv-lobby > .tv-art ~ .tv-side { grid-row: 2 / span 6; }
  body.wide .tv-lobby { row-gap: 8px; } body.wide .tv-lobby > .btn.lg { min-height: 56px; }
  body.wide .tv-lobby .codebox { padding: 14px 16px 12px; row-gap: 10px; }
  body.wide .tv-lobby .codebox .room-lock { padding-top: 8px; row-gap: 6px; }
  body.wide .tv-lobby > .rl-note { order: 1; }   /* (the room's language note, on an English screen, comes under «ابدأ» here) */
}

/* the buzzer's TV while nothing has been asked yet: the poster fills the stage */
.tv > .tv-wait { min-height: 0; }

/* TVs and laptops: the lobby's names read from across the room */
@media (min-width: 1000px) {
  body.wide .lobby.roster .rp-n { font-size: 19px; }
  body.wide .lobby.roster .pav { width: 40px; height: 40px; font-size: 18px; }
  body.wide .chips.roster .chip.rp { min-height: 44px; font-size: 17px; }
  body.wide .chips.roster .pav.xs { width: 28px; height: 28px; font-size: 13px; }
}

/* ---------- a phone held sideways (a short landscape screen): the room's strip goes up beside the title and the top
   tightens, so the game keeps the height it has (الجرس، درب الحروف and the drawing lay themselves out sideways; a game that
   can't is veiled by sideways.js). A game that spreads out wide gets the whole width, clear of the notch (env insets). Not
   Baloot's table: the owner's own, to do with him */
@media (orientation: landscape) and (max-height: 500px) {
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) { position: relative; padding-top: 6px; gap: 10px; }
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) > .top { min-height: 44px; padding-inline-end: 52%; }
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) > .top .icon-btn { width: 42px; height: 42px; }
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) > .top h1 { font-size: 21px; }
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) > .rg > .join-head { position: absolute; top: 6px; inset-inline-end: 16px; max-width: 50%; min-height: 44px; padding-block: 3px; }
  body:not([data-game^="baloot"]) .scr.join:not(.embedded) .jh-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* (one line: the strip never grows over the game) */
  body[data-scr~="join"][data-game="huroof"] #app, body[data-scr~="join"][data-game="draw"] #app { max-width: min(100%, 980px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* ---------- reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  .codebox .code-digits span::after, .qr-frame::before, .ph-orbit-ring, .ph-orbit .pav, .jn-card.busy .jn-me .pav, .jh-net.off i { animation: none; }
  .roster .rp.pop, .roster .rp.pop .pav, .jn-card, .jn-end, .ph-conn, .ph-in, .ph-in *, .jh-net.back, .scr.join .qz-status.ok, .tvw-game { animation: none; }
  .ph-spin { animation-duration: 2.4s; }
}