/* /game-header.css */
/*
 * «Шапка игры» (shared/client/game-header.ts, bundle /game-header.js): one top bar in every game.
 *   [menu]   [cube + roomplay]   [timer]
 * Fixed at the top; on its screens the game's own back arrow, pause button and «Ещё игры» cube are
 * hidden ([data-rp-gh-hidden]). A game theme sets only tokens, never the classes:
 *   --rp-gh-ink         icons, logo text, timer text (default: the page's --text-primary, else white)
 *   --rp-gh-chip        button and timer background (default: the ink at 14 %)
 *   --rp-gh-line        button border (default: the ink at 24 %)
 *   --rp-gh-timer-bg / --rp-gh-timer-ink   the timer chip (default: chip / ink)
 *   --rp-gh-low         the timer at 5 s and less (default: #ff4d5e)
 *   --rp-gh-space       where the header's screens start (padding-top), under the bar
 * The menu card and the actions it adds to a pause card use the pause screen's fixed dark palette
 * (pause-overlay.css).
 */
:root {
    --rp-gh-space: calc(80px + env(safe-area-inset-top, 0px));
}

.rp-game-header {
    --rp-gh-ink-v: var(--rp-gh-ink, var(--text-primary, #ffffff));
    position: fixed;
    z-index: 70;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 560px);
    box-sizing: border-box;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    gap: 8px;
    height: 48px;
    color: var(--rp-gh-ink-v);
    font-family: 'Manrope', var(--font-body, system-ui), sans-serif;
    pointer-events: none;
}
.rp-game-header[hidden] { display: none; }
.rp-game-header > * { pointer-events: auto; }

.rp-gh-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-color: var(--rp-gh-line, color-mix(in srgb, var(--rp-gh-ink-v) 24%, transparent));
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent));
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease;
}
.rp-gh-btn:active { transform: scale(0.9); }

.rp-gh-brand {
    /* Centred on the screen whatever the timer's width. */
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    max-width: calc(100% - 2 * (16px + 44px + 12px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.rp-gh-brand:active { transform: translateX(-50%) scale(0.94); }
.rp-gh-cube {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.rp-gh-word {
    font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-gh-timer {
    grid-column: 3;
    justify-self: end;
    min-width: 44px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.14);
    background: var(--rp-gh-timer-bg, var(--rp-gh-chip, color-mix(in srgb, var(--rp-gh-ink-v) 14%, transparent)));
    color: var(--rp-gh-timer-ink, inherit);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rp-gh-timer[hidden] { display: none; }
.rp-gh-timer--low {
    background: var(--rp-gh-low, #ff4d5e);
    color: #ffffff;
    animation: rp-gh-low 1s ease-in-out infinite;
}
@keyframes rp-gh-low {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* The header's screens start under the bar, the same distance in every game (it replaces the room
   each game kept for its own back arrow). */
html.rp-has-game-header .screen.rp-gh-screen { padding-top: var(--rp-gh-space) !important; }
/* Online games pad their .screen-content instead; the round reveal (reveal-results.css) covers the
   screen absolutely. Both start under the bar too. */
html.rp-has-game-header .screen.rp-gh-screen > .screen-content { padding-top: 0 !important; }
html.rp-has-game-header .screen.rp-gh-screen .rr-container { top: var(--rp-gh-space); }
/* An in-flow reveal (.rr-flow) already sits under the bar with the content above it. */
html.rp-has-game-header .screen.rp-gh-screen .rr-flow > .rr-container { top: auto; }
/* The round row of the game template (.game-header: round badge, timer) kept room for the old back
   arrow on the left; the arrow is gone. */
html.rp-has-game-header .screen.rp-gh-screen .game-header { padding-left: 0 !important; }

/* What the header replaces on its screens. */
[data-rp-gh-hidden] { display: none !important; }

/* The menu card (guests, games without a pause) and the actions on every pause card. */
.rp-gh-menu-overlay.active { cursor: default; }
.rp-gh-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}
.rp-gh-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 30px;
    border: 2px solid var(--rp-pause-line, rgba(255, 255, 255, 0.26));
    background: transparent;
    color: var(--rp-pause-ink, #ffffff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.rp-gh-exit {
    border-color: transparent;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
}
/* «Сообщить об ошибке»: a quiet link under the card's actions, not a third big button. */
.rp-gh-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    min-height: 40px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--rp-pause-muted, rgba(255, 255, 255, 0.74));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.8;
    cursor: pointer;
}
.rp-gh-report .rp-icon { font-size: 16px; }

/* The bug report form over the pause card (shared/client/bug-report.ts): the pause palette, above it. */
.rp-bug-overlay {
    --rp-pause-ink: #ffffff;
    --rp-pause-muted: rgba(255, 255, 255, 0.74);
    --rp-pause-chip: rgba(255, 255, 255, 0.12);
    --rp-pause-line: rgba(255, 255, 255, 0.26);
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(9, 11, 20, 0.94);
    color: var(--rp-pause-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rp-pause-in 220ms ease-out;
}
.rp-bug-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: auto;
    text-align: center;
}
.rp-bug-card [hidden] { display: none !important; }
.rp-bug-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--rp-pause-ink); }
.rp-bug-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--rp-pause-line);
    background: var(--rp-pause-chip);
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}
.rp-bug-text::placeholder { color: var(--rp-pause-muted); opacity: 0.8; }
.rp-bug-text:focus { outline: 2px solid var(--rp-pause-ink); outline-offset: 1px; }
.rp-bug-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 30px;
    border: 2px dashed var(--rp-pause-line);
    background: transparent;
    color: var(--rp-pause-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rp-bug-preview { position: relative; align-self: center; }
.rp-bug-thumb {
    display: block;
    max-width: 160px;
    max-height: 160px;
    border-radius: 12px;
    border: 1px solid var(--rp-pause-line);
}
.rp-bug-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--rp-pause-line);
    background: #12131a;
    color: var(--rp-pause-ink);
    cursor: pointer;
}
.rp-bug-status { margin: 0; font-size: 14px; color: #ffb4b4; }
.rp-bug-overlay .rp-bug-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
    background: var(--rp-pause-ink);
    color: #12131a;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-bug-overlay .rp-bug-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* The header's «Выйти из игры» replaces the online pause's own exit link. */
.rp-pause-card:has(> .rp-gh-actions) > .rp-pause-exit { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rp-gh-timer--low { animation: none; }
}
/* /game-intro.css */
/*
 * Intro screen before a game («заставка»): RoomPlay logo, game icon and name, the players, while the host
 * says the greeting; it leaves through a portal into round 1. Markup and timing:
 * client/assets/js/game-intro.js. Colours come from the game's *-theme.css: --bg-primary, --bg-secondary,
 * --text-primary, --text-secondary, --rp-intro-accent (falls back to --rp-countdown-accent, then
 * --onboarding-accent) and --rp-intro-glow (falls back to --onboarding-accent). No emoji, no text of its own.
 */
/* Not inherited: the hole grows every frame, and an inherited value would restyle every node of the intro each frame
   (the stutter after the intro, owner 2026-10-29). The rim (.rp-intro-portal) runs the same animation itself. */
@property --rp-intro-hole {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rp-intro {
  --rp-in-accent: var(--rp-intro-accent, var(--rp-countdown-accent, var(--onboarding-accent, #a677ef)));
  --rp-in-glow: var(--rp-intro-glow, var(--onboarding-accent, var(--accent-primary, #6640ba)));
  --rp-in-ease: cubic-bezier(.2, .9, .3, 1.25);
  position: fixed;
  inset: 0;
  /* Over the speed games' start screen (995) and the game; below confirm dialogs (1000). */
  z-index: 996;
  overflow: hidden;
  color: var(--text-primary, #fff);
  font-family: var(--font-body, inherit);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rp-in-glow) 55%, transparent) 0, transparent 58%),
    linear-gradient(180deg, var(--bg-secondary, #211759) 0%, var(--bg-primary, #100f36) 70%);
  opacity: 0;
  transition: opacity 240ms ease-out;
  user-select: none;
  -webkit-user-select: none;
}
.rp-intro.visible { opacity: 1; }

.rp-intro-backdrop { position: absolute; inset: 0; pointer-events: none; }
/* The rim of the portal: a glowing ring just outside the hole, growing with it. */
.rp-intro-portal {
  position: absolute;
  left: var(--rp-intro-x, 50%);
  top: var(--rp-intro-y, 40%);
  width: calc(var(--rp-intro-hole) * 2 + 16px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 5px solid var(--rp-in-accent);
  box-shadow: 0 0 24px 6px color-mix(in srgb, var(--rp-in-accent) 70%, transparent), inset 0 0 18px 2px color-mix(in srgb, var(--rp-in-accent) 60%, transparent);
  opacity: 0;
  pointer-events: none;
}
/* Spotlight rays turning slowly behind the icon. */
.rp-intro-rays {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 190vmax;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rp-in-accent) 16%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 46%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 18%, transparent 46%);
  opacity: 0;
}
/* Small sparks drifting up, scattered at random (game-intro.js sparksNode): no grid. */
.rp-intro-sparks {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.rp-intro-spark {
  position: absolute;
  width: var(--size, 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 calc(var(--size, 3px) * 1.6) rgba(255, 255, 255, .45);
  opacity: calc(var(--glow, .7) * .8);
}
.rp-intro-spark.accent {
  background: color-mix(in srgb, var(--rp-in-accent) 85%, #fff);
  box-shadow: 0 0 calc(var(--size, 3px) * 2) color-mix(in srgb, var(--rp-in-accent) 70%, transparent);
}

.rp-intro-stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(36px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
/* Everything but the logo, centred in the space under it. */
.rp-intro-main {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(10px, 2.4vh, 20px);
  padding-top: 12px;
}

.rp-intro-brand {
  flex: none;
  width: clamp(120px, 34vw, 170px);
  height: auto;
  /* The wordmark is white: a soft shadow keeps it readable on light palettes too. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.rp-intro-hero {
  position: relative;
  width: clamp(130px, 40vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 700px;
}
.rp-intro-icon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28%;
  object-fit: cover;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--rp-in-accent) 80%, transparent),
    0 18px 40px rgba(0, 0, 0, .45),
    0 0 60px color-mix(in srgb, var(--rp-in-accent) 45%, transparent);
}
.rp-intro-halo {
  position: absolute;
  inset: -8%;
  border-radius: 32%;
  border: 3px solid var(--rp-in-accent);
  opacity: 0;
}

.rp-intro-title {
  margin: 4px 0 0;
  max-width: 420px;
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .22);
}
.rp-intro-word { display: inline-block; white-space: nowrap; }
.rp-intro-letter { display: inline-block; }

/* Sound bars: shown while the host speaks. */
.rp-intro-voice {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.rp-intro-voice i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--rp-in-accent);
  transform: scaleY(.25);
}
.rp-intro.speaking .rp-intro-voice { opacity: 1; }

.rp-intro-players {
  list-style: none;
  margin: clamp(6px, 2vh, 16px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 460px;
}
.rp-intro-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  background: color-mix(in srgb, var(--text-primary, #fff) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rp-in-accent) 50%, transparent);
}
.rp-intro-chip .rp-player { max-width: 40vw; }
.rp-intro-more { padding: 6px 14px; color: var(--text-secondary, rgba(255, 255, 255, .8)); }

/* How long until the game: fills over the intro's whole time. */
.rp-intro-progress {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(56vw, 240px);
  height: 4px;
  translate: -50% 0;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary, #fff) 16%, transparent);
}
.rp-intro-progress span {
  display: block;
  height: 100%;
  background: var(--rp-in-accent);
  transform-origin: left;
  transform: scaleX(0);
}
/* An animation, not a transition: a transition is skipped (the bar jumps to full) when the page hasn't styled
   the bar before `.visible` lands, e.g. the intro arrives while the tab is in the background. */
.rp-intro.visible .rp-intro-progress span { animation: rp-intro-progress var(--rp-intro-ms, 4000ms) linear forwards; }

/* Short screens (landscape phones, small phones): smaller icon and name so the players still fit. */
@media (max-height: 600px) {
  .rp-intro-stage { padding-top: max(10px, env(safe-area-inset-top)); }
  .rp-intro-main { gap: 8px; padding-top: 6px; }
  .rp-intro-brand { width: 110px; }
  .rp-intro-hero { width: min(21vh, 150px); }
  .rp-intro-title { font-size: clamp(24px, 6vh, 34px); }
  .rp-intro-players { max-width: 640px; margin-top: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- Entrance ---- */
  .rp-intro.visible .rp-intro-rays { animation: rp-intro-fade 900ms ease-out both, rp-intro-spin 24s linear infinite; }
  .rp-intro.visible .rp-intro-sparks { animation: rp-intro-fade 900ms ease-out 300ms both; }
  .rp-intro-spark { animation: rp-intro-spark var(--dur, 6s) linear var(--delay, 0s) infinite; }
  .rp-intro.visible .rp-intro-brand { animation: rp-intro-brand-in 640ms var(--rp-in-ease) 80ms both; }
  .rp-intro.visible .rp-intro-icon { animation: rp-intro-icon-in 900ms cubic-bezier(.2, .8, .25, 1.15) 200ms both, rp-intro-float 2600ms ease-in-out 1100ms infinite; }
  .rp-intro.visible .rp-intro-halo { animation: rp-intro-halo 1800ms ease-out 900ms infinite; }
  .rp-intro.visible .rp-intro-halo.second { animation-delay: 1800ms; }
  .rp-intro.visible .rp-intro-letter { animation: rp-intro-letter-in 560ms var(--rp-in-ease) calc(620ms + var(--i) * 38ms) both; }
  .rp-intro.visible .rp-intro-chip { animation: rp-intro-deal 620ms var(--rp-in-ease) calc(1000ms + var(--i) * 110ms) both; }
  .rp-intro.speaking .rp-intro-voice i { animation: rp-intro-bar 700ms ease-in-out calc(var(--b) * -140ms) infinite alternate; }

  /* ---- Leaving: the portal ---- */
  .rp-intro.leaving {
    -webkit-mask: radial-gradient(circle at var(--rp-intro-x, 50%) var(--rp-intro-y, 40%), transparent var(--rp-intro-hole), #000 calc(var(--rp-intro-hole) + 1.5px));
    mask: radial-gradient(circle at var(--rp-intro-x, 50%) var(--rp-intro-y, 40%), transparent var(--rp-intro-hole), #000 calc(var(--rp-intro-hole) + 1.5px));
    animation: rp-intro-iris 620ms cubic-bezier(.65, 0, .35, 1) 200ms forwards;
  }
  .rp-intro.leaving .rp-intro-chip,
  .rp-intro.leaving .rp-intro-brand,
  .rp-intro.leaving .rp-intro-title,
  .rp-intro.leaving .rp-intro-voice {
    animation: rp-intro-fly 520ms cubic-bezier(.55, 0, .8, .2) both;
  }
  .rp-intro.leaving .rp-intro-chip { animation-delay: calc(var(--i) * 18ms); }
  .rp-intro.leaving .rp-intro-icon { animation: rp-intro-rush 820ms cubic-bezier(.6, -.25, .7, .2) both; }
  .rp-intro.leaving .rp-intro-halo { animation: rp-intro-shock 520ms ease-out both; }
  .rp-intro.leaving .rp-intro-halo.second { animation-delay: 90ms; }
  .rp-intro.leaving .rp-intro-rays { animation: rp-intro-spin-out 820ms ease-in both; }
  .rp-intro.leaving .rp-intro-progress { opacity: 0; transition: opacity 150ms; }
  .rp-intro.leaving .rp-intro-portal { opacity: 1; transition: opacity 120ms 200ms; animation: rp-intro-iris 620ms cubic-bezier(.65, 0, .35, 1) 200ms forwards; }
  /* The page under the opaque intro stands still (game-intro.js sets the class until the portal opens): its
     background bubbles and spinners would otherwise restyle every frame together with the intro's own animations. */
  html.rp-intro-covering body > :not(.rp-intro),
  html.rp-intro-covering body > :not(.rp-intro) * { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-intro.visible .rp-intro-rays, .rp-intro.visible .rp-intro-sparks { opacity: 1; }
  .rp-intro.leaving { opacity: 0; transition-duration: 300ms; }
}

@keyframes rp-intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rp-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-intro-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes rp-intro-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: var(--glow, .7); }
  50% { transform: translate(var(--sway, 0px), calc(var(--rise, -120px) * .5)) scale(1); }
  80% { opacity: var(--glow, .7); }
  100% { opacity: 0; transform: translate(0, var(--rise, -120px)) scale(.6); }
}
@keyframes rp-intro-brand-in {
  from { opacity: 0; transform: translateY(-40px) scale(.8); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rp-intro-icon-in {
  0% { opacity: 0; transform: rotateY(-540deg) rotateZ(-20deg) scale(.15); filter: brightness(2.2); }
  55% { opacity: 1; transform: rotateY(20deg) rotateZ(4deg) scale(1.14); filter: brightness(1.3); }
  78% { transform: rotateY(-8deg) rotateZ(-2deg) scale(.96); filter: brightness(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes rp-intro-halo { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes rp-intro-letter-in {
  0% { opacity: 0; transform: translateY(.9em) rotateX(90deg) scale(.6); }
  60% { opacity: 1; transform: translateY(-.12em) rotateX(-12deg) scale(1.08); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-deal {
  0% { opacity: 0; transform: translateY(70px) rotate(var(--tilt)) scale(.6); }
  65% { opacity: 1; transform: translateY(-6px) rotate(calc(var(--tilt) * -.3)) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes rp-intro-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
/* The portal moves only transform and opacity (no filter, no border-width): a blur or brightness on the icon blown up
   ninefold, or a border growing, made the phone repaint every frame and the portal stuttered (owner 2026-10-29). */
@keyframes rp-intro-fly {
  to { opacity: 0; transform: translate(var(--fly-x, 0), var(--fly-y, -60vh)) rotate(var(--tilt, 12deg)) scale(.7); }
}
@keyframes rp-intro-rush {
  0% { transform: none; }
  22% { transform: scale(.82) rotate(-6deg); }
  100% { transform: scale(9) rotate(12deg); opacity: 0; }
}
@keyframes rp-intro-shock { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }
@keyframes rp-intro-spin-out { to { rotate: 160deg; scale: 1.6; opacity: 0; } }
@keyframes rp-intro-iris { from { --rp-intro-hole: 0px; } to { --rp-intro-hole: 150vmax; } }
/* /pc-stage.css */
/*
 * «Игра с ПК» (owner 2026-10-29: «почему бы не сделать tv играбельным?» → «делай»). Whoever opens the site with a
 * mouse in a wide window gets the /tv/ look and plays from there: the same pages and the same logic as on a phone,
 * laid out on a 1280×720 stage that pwa-overrides.js scales to the window with CSS zoom (html.rp-stage,
 * html[data-stage-page] = the page's <meta name="rp-stage">). A narrow window or a touch screen keeps the phone
 * column. Mockups: /mnt/project-files/tv-play-from-pc/.
 *
 * Rules kept from /tv/: the shared components keep their looks (game header, packs, reveal-results, PlayerAvatar,
 * game-end), only their size and place change; cut-paper cards (uneven corners, a small tilt through `rotate` /
 * `translate`, a hard shadow) for cards and rows, never for buttons, and never on rows reveal-results.js measures
 * (their card is a ::before); text that sits over the background spheres gets a backing.
 * Everything here is under html.rp-stage, so the phone layout cannot change.
 */
html.rp-stage {
    --st-bg: #100f36;
    --st-bg-end: #0b0a28;
    --st-panel: #1d1752;
    --st-card: #241b62;
    --st-line: rgb(255 255 255 / 14%);
    --st-text: #fff;
    --st-muted: #cbc4e6;
    --st-accent: #6640ba;
    --st-gold: #d5ae58;
    --st-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
    --cut-2: 14px 24px 14px 26px / 24px 14px 22px 12px;
    --cut-3: 22px 15px 27px 12px / 12px 21px 15px 26px;
    --cut-4: 12px 26px 15px 22px / 22px 12px 26px 15px;
    --cut-shadow: 5px 6px 0 rgb(0 0 0 / 34%);
    overflow-x: hidden;
}
/* The spheres are sized in vmin of the real window, so their layer cancels the stage zoom. */
html.rp-stage .particles { zoom: calc(1 / var(--rp-stage-zoom, 1)); }
/* The brand colours where no game is picked yet; a room with a game takes the game's (particles.js). */
html.rp-stage:is([data-stage-page="catalog"], [data-stage-page="room"], [data-stage-page="join"]):not([data-room-game]) {
    --rp-sphere-1: #8f6ae0;
    --rp-sphere-2: #63b0fc;
    --rp-sphere-3: #f77cb0;
    --rp-sphere-4: #d5ae58;
}
html.rp-stage:is([data-stage-page="catalog"], [data-stage-page="room"], [data-stage-page="join"]) body {
    background: linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-end) 100%);
}
/* Owner 2026-10-29 «палитры втф»: a room with a game wears that game's palette on the stage, as on the phone. The dark
   stage background stayed under the light palettes (Имаджинариум, Что за мем?, Рисовач, Joking Hazard…), whose text is
   dark, so the game card, the players and the buttons went dark on dark. The room's own tokens (room-themes.css) give
   the background and the panels, so every palette keeps its contrast. */
html.rp-stage:is([data-stage-page="room"], [data-stage-page="join"])[data-room-game] {
    --st-panel: var(--room-menu);
    --st-line: var(--room-line);
}
html.rp-stage:is([data-stage-page="room"], [data-stage-page="join"])[data-room-game] body {
    background: linear-gradient(180deg, var(--room-bg) 0%, var(--room-bg-deep) 100%);
}

/* ── Game header (shared/client/game-header.ts): across the stage, bigger, like the /tv/ top row ── */
html.rp-stage .rp-game-header {
    width: 100%; max-width: none; padding: 0 44px; height: 64px; top: 18px;
    grid-template-columns: 60px minmax(0, 1fr) minmax(60px, auto);
}
html.rp-stage { --rp-gh-space: 104px; }
html.rp-stage .rp-game-header :is(.rp-gh-cube) { width: 46px; height: 46px; }
html.rp-stage .rp-game-header :is(.rp-gh-word) { font-size: 25px; }
html.rp-stage .rp-game-header :is(.rp-gh-menu, .rp-gh-timer) { width: 58px; min-width: 58px; height: 58px; border-radius: 29px; font-size: 24px; }

/* ── Common: the app takes the whole stage, screens lay out their own columns ── */
html.rp-stage .app { max-width: none; width: 100%; }
/* pwa-overrides.js: the first screen waits for Unbounded and Manrope (no reflow from the fallback font), at most 1.2 s. */
html.rp-stage.rp-fonts-pending .screen.active { visibility: hidden; }
html.rp-stage .btn-back { left: 40px; top: 28px; width: 52px; height: 52px; font-size: 22px; }
html.rp-stage :is(.btn-play, .btn-create, .btn-connect, .btn-next-slide, .btn-skip, .btn-additional-settings) {
    min-height: 60px; font-size: 19px; border-radius: 30px; padding: 0 34px; width: auto; white-space: nowrap;
}
html.rp-stage .title { font-family: var(--st-display); letter-spacing: -.02em; }

/* ════════════════════ Catalog (client/games/index.html) ════════════════════
   No zoom here (data-zoom="off" on the meta): owner 2026-10-29 «всё очень крупное, информативности меньше, нет
   описания, занято всё по ширине». Owner 2026-10-29 «каталог выглядит убого на пк» → mockup
   /mnt/project-files/catalog-pc/ → «го»: a wider column (up to 1600 px), the header in one row (brand, search, sort,
   filter and favourites, language, settings), the top row of catalog-showcase.js, then rows by mood in tiles
   (big art, name, two lines of description, players and mode). A search, a filter, favourites or another sort show
   the plain list in the same tiles. No spheres here (owner «шары лучше там убрать и так много элементов»).
   Owner 2026-10-30 «сделай /games/ для ПК в дизайне главной»: the landing's look (landing.css) instead of the /tv/
   cut-paper one: its navy, faint grid and blue/red corner light, Manrope text and Unbounded headings (fonts.css),
   calm rounded cards with a soft shadow and a pink border on hover, a sticky header bar, pill buttons, mint eyebrows. */
html.rp-stage[data-stage-page="catalog"] {
    --lp-bg: #0d1329;
    --lp-bg-deep: #0a0f1f;
    --lp-surface: #1e2643;
    --lp-card: #252b4a;
    --lp-line: rgb(255 255 255 / 13%);
    --lp-line-strong: rgb(255 255 255 / 22%);
    --lp-accent: #ec494f;
    --lp-pink: #ff3b6f;
    --lp-blue: #4a6cf7;
    --lp-mint: #2ee6a6;
    --lp-text-2: #aeb7d3;
    --lp-muted: #8892b0;
    --lp-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --lp-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lp-ease: cubic-bezier(.16, 1, .3, 1);
}
html.rp-stage[data-stage-page="catalog"]:not([data-room-game]) body {
    font-family: var(--lp-body);
    background:
        linear-gradient(115deg, rgb(74 108 247 / 12%) 0%, transparent 32%),
        linear-gradient(245deg, rgb(236 73 79 / 12%) 0%, transparent 34%),
        linear-gradient(180deg, rgb(13 19 41 / 94%) 0%, var(--lp-bg-deep) 48%, var(--lp-bg) 100%),
        var(--lp-bg);
    background-attachment: fixed;
}
html.rp-stage[data-stage-page="catalog"]:not([data-room-game]) .particles { display: none; }
/* No «Установите приложение» on a computer (owner 2026-10-30 «на пк скрой»). install-prompt.js counts the offer as shown
   only when its card has a box, so a hidden banner sends no install_prompt_shown. */
html.rp-stage .install-prompt-banner { display: none; }
html.rp-stage[data-stage-page="catalog"] .menu-screen {
    /* The scroller spans the window (so the grid and the header bar reach its edges); the padding keeps the landing's
       1180 px column (owner 2026-10-30 «по ширине отличается»). */
    max-width: none; margin: 0; padding: 0 max(56px, calc((100% - 1180px) / 2)) 56px; min-height: var(--app-height, 720px);
    background-image: linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2.8%) 1px, transparent 1px);
    background-size: 44px 44px; background-attachment: local;
    -webkit-mask-image: none;
}
html.rp-stage[data-stage-page="catalog"] .menu-screen::before { display: none; }
/* Header: one sticky bar like the landing's site header. The topbar, the controls and the summary give their
   children to the header grid; the bar's backing reaches the window edges through its shadow. */
html.rp-stage[data-stage-page="catalog"] .menu-header {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand search tools lang settings" "filters filters filters filters filters" "summary summary sort sort sort";
    gap: 0 10px; align-items: center; margin: 0 0 28px; padding: 14px 0;
}
/* The bar's backing reaches the window edges; a pseudo-element, so nothing clips the language list under the bar. */
html.rp-stage[data-stage-page="catalog"] .menu-header::before {
    content: ''; position: absolute; inset: 0 -100vmax; z-index: -1; pointer-events: none;
    background: rgb(13 19 41 / 90%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lp-line);
}
html.rp-stage[data-stage-page="catalog"] :is(.roomplay-menu-topbar, .ru-catalog-controls, .ru-catalog-summary) { display: contents; }
html.rp-stage[data-stage-page="catalog"] .ru-catalog-controls[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .menu-language-picker { grid-area: lang; position: relative; }
html.rp-stage[data-stage-page="catalog"] .menu-language-popover { left: auto; right: 0; transform-origin: calc(100% - 23px) 0; }
html.rp-stage[data-stage-page="catalog"] .menu-settings-button { grid-area: settings; }
html.rp-stage[data-stage-page="catalog"] :is(.menu-language-button, .menu-settings-button, .ru-control-chip) {
    width: 46px; height: 46px; min-height: 46px; padding: 0; display: grid; place-items: center; border-radius: 999px;
    border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%); color: #fff;
}
html.rp-stage[data-stage-page="catalog"] :is(.menu-language-button, .menu-settings-button, .ru-control-chip):hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 34%); }
html.rp-stage[data-stage-page="catalog"] .ru-control-chip.active { border-color: var(--lp-pink); background: rgb(255 59 111 / 18%); }
html.rp-stage[data-stage-page="catalog"] .menu-title {
    grid-area: brand; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
    gap: 0 10px; margin: 0; font-family: var(--lp-display); font-size: 22px; letter-spacing: 0; text-align: left;
}
html.rp-stage[data-stage-page="catalog"] .menu-brand-lockup { display: contents; }
html.rp-stage[data-stage-page="catalog"] .menu-title--brand { cursor: pointer; }
html.rp-stage[data-stage-page="catalog"] .menu-title--brand:active { transform: scale(.98); }
html.rp-stage[data-stage-page="catalog"] .menu-brand-cube { grid-row: 1 / 3; width: 40px; height: 40px; }
html.rp-stage[data-stage-page="catalog"] .menu-brand-word { align-self: end; font-size: 22px; letter-spacing: -.01em; }
html.rp-stage[data-stage-page="catalog"] .menu-brand-tagline { align-self: start; margin-top: 3px; font-family: var(--lp-body); font-size: 12px; font-weight: 700; color: var(--lp-text-2); }
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap {
    grid-area: search; justify-self: center; width: min(620px, 100%); min-height: 48px; padding: 0 20px; gap: 12px;
    border-radius: 999px; background: rgb(255 255 255 / 6.5%); border: 1px solid var(--lp-line-strong); color: var(--lp-text-2);
}
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap:focus-within { border-color: rgb(255 59 111 / 60%); }
html.rp-stage[data-stage-page="catalog"] .ru-search-wrap input { font-family: var(--lp-body); font-weight: 600; }
html.rp-stage[data-stage-page="catalog"] .ru-control-row { grid-area: tools; display: flex; gap: 8px; margin: 0; overflow: visible; }
html.rp-stage[data-stage-page="catalog"] .ru-active-filters { grid-area: filters; margin-top: 12px; }
html.rp-stage[data-stage-page="catalog"] .ru-active-filters:empty { display: none; }
/* The sort list sits under the bar, on the summary line, only over the plain list: a search, a filter, favourites or
   another sort; the rows have none (owner 2026-10-30 «показывай ниже только если фильтр применен»). */
html.rp-stage[data-stage-page="catalog"] .ru-sort-control { grid-area: sort; justify-self: end; min-width: 0; margin-top: 14px; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-sort-control { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-sort-control select { max-width: none; width: auto; font-family: var(--lp-body); color: var(--lp-text-2); color-scheme: dark; }
/* The open list of the native select: dark like the bar, readable text (it was light grey on white). */
html.rp-stage[data-stage-page="catalog"] .ru-sort-control option { background: var(--lp-surface); color: #fff; }
/* The summary («Все игры · N») heads the plain list from the bar's last line; the rows have their own heads. */
html.rp-stage[data-stage-page="catalog"] .ru-catalog-summary > p { grid-area: summary; margin: 14px 0 0; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-catalog-summary > p { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-catalog-summary strong { font-family: var(--lp-display); font-size: 26px; font-weight: 800; letter-spacing: 0; margin-right: 6px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-room-hit, .ru-favorite-spotlight, .catalog-search-intent, .premium-paused-slot > *) { max-width: none; }
/* The season and room pills: one thin card line. */
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit {
    margin-bottom: 26px; padding-top: 12px; padding-bottom: 12px; border-radius: 16px;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit-text { flex-direction: row; align-items: baseline; gap: 14px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-hit-text small { color: var(--lp-text-2); }

/* Tiles: the list card (.game-card) and its copy in a row (.catalog-tile) share the landing's game card look;
   four a row as on the landing (owner 2026-10-30 «плашки в 1.5 раза шире бы чтобы текст помещался», then «оставить 4
   в ряд», then «шире в 1.5 раза, НО НЕ ВЫШЕ», «уменьши пикчи»): a small square icon on the left, the name and two lines
   beside it, the players pill under them, so a tile is low. Names in sentence case, as on the landing. */
html.rp-stage[data-stage-page="catalog"] :is(.games-list, .catalog-row-grid) {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) {
    position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "art content" "art tags";
    grid-template-rows: auto 1fr; align-items: start; gap: 8px 14px;
    width: auto; height: 100%; margin: 0; padding: 14px; text-align: left; color: #fff; text-decoration: none;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); border-radius: 16px;
    box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
    transition: transform .18s var(--lp-ease), border-color .18s var(--lp-ease), background .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile):hover {
    transform: translateY(-4px); border-color: rgb(255 59 111 / 60%); background: var(--lp-card); box-shadow: 0 18px 42px rgb(0 0 0 / 26%);
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile):active { transform: translateY(1px) scale(.99); }
html.rp-stage[data-stage-page="catalog"] .games-list .game-card.hidden { display: none; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-image {
    grid-area: art; width: 88px; height: 88px; margin: 0; border-radius: 12px;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-icon { border-radius: 12px; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-content { grid-area: content; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-header { margin: 2px 0 0; padding: 0; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-title {
    font-family: var(--lp-body); font-size: 16px; font-weight: 850; letter-spacing: 0; line-height: 1.2; color: #fff; text-transform: lowercase;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-title::first-letter { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] .card-title :is(.ru-new-badge, .game-public-rating) { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-description {
    min-height: 4.2em; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--lp-text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-tags {
    grid-area: tags; align-self: end; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) :is(.player-badge, .mode-badge) {
    flex: none; padding: 5px 10px; font-size: 12px; font-weight: 800; color: var(--lp-text-2); white-space: nowrap;
    background: transparent; border: 1px solid var(--lp-line-strong); border-radius: 999px;
}
/* No mode pill («Каждый со своего», «На одном телефоне») on the tiles (owner 2026-10-30 «скрой такие плашки»). */
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .mode-badge { display: none; }
html.rp-stage[data-stage-page="catalog"] .card-title .ru-new-badge { padding: 3px 7px; font-size: 10px; background: var(--lp-blue); }
html.rp-stage[data-stage-page="catalog"] .card-title .ru-beta-badge { background: var(--lp-accent); }
/* The heart sits on the icon's corner in a round backing. */
html.rp-stage[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile) .card-favorite {
    top: 6px; left: 72px; right: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
    background: rgb(13 19 41 / 72%); border: 1px solid var(--lp-line);
}
html.rp-stage[data-stage-page="catalog"] .card-favorite:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* «Витрина» (catalog-showcase.js): the most opened game big with «Играть», the two newest games beside it, then the
   rows. Owner 2026-10-29 chose «Витрина сверху + сетка», then the rows. Phones never see it. */
html:not(.rp-stage) .catalog-showcase, html:not(.rp-stage) .catalog-showcase[hidden], .catalog-showcase[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .games-list:not(.catalog-search-popular) { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-top {
    display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: 420px; margin: 0 0 56px;
}
/* Three most opened games as side-style cards over the top row, in place of the «Для вашей компании» block, which the
   stage hides while the rows show (owner 2026-10-30 «вместо», «сделай 3 плашки типа … с самыми поп-ными играми»). */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; height: 200px; margin: 0 0 48px; }
html.rp-stage[data-stage-page="catalog"].rp-catalog-rows .ru-favorite-spotlight { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; color: #fff;
    text-decoration: none; border-radius: 24px; border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 20px 48px rgb(0 0 0 / 28%);
    transition: transform .18s var(--lp-ease), border-color .18s var(--lp-ease), box-shadow .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card:hover { transform: translateY(-4px); border-color: rgb(255 59 111 / 60%); box-shadow: 0 24px 52px rgb(0 0 0 / 34%); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card:active { transform: translateY(1px) scale(.99); }
/* The game's own icon, blurred, tints the card in its colours; the navy wash keeps the text readable. */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-bg {
    position: absolute; inset: -30px; z-index: -2; background: center / cover no-repeat; filter: blur(34px) saturate(1.3); opacity: .6;
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(13 19 41 / 94%) 0%, rgb(13 19 41 / 74%) 45%, rgb(13 19 41 / 28%) 100%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-icon { flex: none; order: 2; object-fit: cover; }
/* Pills as the landing's eyebrows: mint for «Популярное сейчас», blue for «Новинка». */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-pill {
    align-self: flex-start; padding: 0; font-size: 12.5px; font-weight: 900; line-height: 1;
    letter-spacing: 0; text-transform: uppercase; background: none; color: var(--lp-mint);
}
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-pill.is-new { color: #8ea2ff; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-title { font-family: var(--lp-display); font-weight: 900; letter-spacing: 0; line-height: 1.08; text-transform: lowercase; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-title::first-letter { text-transform: uppercase; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-desc { line-height: 1.5; font-weight: 500; color: var(--lp-text-2); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-tags { display: flex; flex-wrap: wrap; gap: 8px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-tags span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--lp-text-2); border: 1px solid var(--lp-line-strong); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero { grid-row: 1 / 3; gap: 26px; padding: 40px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-text { gap: 14px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-icon { width: 230px; height: 230px; border-radius: 32px; box-shadow: 0 20px 48px rgb(0 0 0 / 40%); }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-title { font-size: 44px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-desc { max-width: 520px; font-size: 17px; }
/* «Играть»: the landing's primary button. */
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-play {
    align-self: flex-start; margin-top: 8px; padding: 0 30px; min-height: 52px; display: inline-flex; align-items: center;
    border-radius: 999px; font-size: 17px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--lp-accent), var(--lp-pink)); box-shadow: 0 12px 34px rgb(255 59 111 / 28%);
}
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) { gap: 16px; padding: 22px 24px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-icon { width: 104px; height: 104px; border-radius: 22px; box-shadow: 0 14px 30px rgb(0 0 0 / 36%); }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-title { font-size: 22px; }
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-desc {
    font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.rp-stage[data-stage-page="catalog"] :is(.catalog-showcase-new, .catalog-showcase-side) .catalog-showcase-tags span:nth-child(n + 2) { display: none; }
@media (max-width: 1299px) {
    html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-icon { width: 180px; height: 180px; }
    html.rp-stage[data-stage-page="catalog"] .catalog-showcase-hero .catalog-showcase-title { font-size: 36px; }
}
/* Rows: a landing section head (Unbounded) with «N игр» as its secondary pill button, then the tiles. */
html.rp-stage[data-stage-page="catalog"] .catalog-row { margin: 0 0 52px; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-head { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
html.rp-stage[data-stage-page="catalog"] .catalog-showcase-heading { margin: 0; font-family: var(--lp-display); font-size: 30px; font-weight: 800; letter-spacing: 0; line-height: 1.1; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more {
    margin-left: auto; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%);
    color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    transition: transform .18s var(--lp-ease), background .18s var(--lp-ease), border-color .18s var(--lp-ease);
}
html.rp-stage[data-stage-page="catalog"] .catalog-row-count { display: inline-flex; align-items: center; cursor: default; }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more:not(.catalog-row-count):hover { transform: translateY(-2px); background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 34%); }
html.rp-stage[data-stage-page="catalog"] .catalog-row-more:not(.catalog-row-count):active { transform: translateY(1px) scale(.97); }
/* «Есть код комнаты? [ABCD] Войти» on a computer: a narrow tall card with the code field (shared room-code-entry
   component, #catalog-room-entry) under the season banner (owner 2026-10-30 «ниже хэллоуина и прямоугольным блоком
   уже, выше и сразу полем ввода кода»). The bottom bar (#ru-room-control) is moved right before it by /games/: hidden
   while there is no room; in a room its card («Комната ABCD», «Другая») replaces the code field. */
.catalog-room-entry[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry {
    max-width: 440px; margin: 0 0 30px; padding: 26px 26px 28px; gap: 16px; border-radius: 20px;
    background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-prompt { color: #fff; font-family: var(--lp-display); font-size: 20px; font-weight: 800; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-row { gap: 10px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry :is(.room-code-entry-input, .room-code-entry-btn) { height: 56px; font-family: var(--lp-body); }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-input { font-size: 22px; }
html.rp-stage[data-stage-page="catalog"] .catalog-room-entry .room-code-entry-btn { min-width: 116px; font-size: 16px; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry).ru-room-empty { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:not(.ru-room-empty) + .catalog-room-entry { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) {
    position: static; display: flex; align-items: center; gap: 14px; width: auto; max-width: 440px; margin: 0 0 30px; padding: 14px;
    transform: none; border-radius: 20px; background: var(--lp-surface); border: 1.5px solid rgb(255 255 255 / 10%); box-shadow: 0 14px 32px rgb(0 0 0 / 18%);
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry)[hidden] { display: none; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) :is(.ru-room-main, .ru-room-qr) {
    min-height: 56px; border-radius: 16px; color: #fff; font-family: var(--lp-body); font-size: 16px; font-weight: 800;
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) .ru-room-main { flex: 1; padding: 0 18px; }
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) .ru-room-qr {
    flex: none; width: auto; padding: 0 22px; border: 1px solid var(--lp-line-strong); background: rgb(255 255 255 / 6.5%);
}
html.rp-stage[data-stage-page="catalog"] .ru-room-control:has(+ .catalog-room-entry) :is(.ru-room-main, .ru-room-qr):hover { transform: translateY(-2px); }

/* Halloween on a computer (until 2026-11-01, html.season-halloween from /games/; owner 2026-10-30 «а где оформление
   хэллоуин как на тел»): the phone's night purple and pumpkin orange in the landing look. The phone rules in styles.css
   draw the web in the header corner, which the stage repeats in the window corner. Decoration only. */
html.rp-stage.season-halloween[data-stage-page="catalog"] {
    --lp-bg: #150d26;
    --lp-bg-deep: #0c0717;
    --lp-surface: #23163a;
    --lp-card: #2e1d4a;
    --lp-pink: #ff8a1f;
}
html.rp-stage.season-halloween[data-stage-page="catalog"]:not([data-room-game]) body {
    background:
        radial-gradient(120% 60% at 50% 110%, rgb(242 138 30 / 22%), transparent 60%),
        linear-gradient(245deg, rgb(242 138 30 / 10%) 0%, transparent 34%),
        linear-gradient(180deg, #1b0f30 0%, var(--lp-bg-deep) 100%),
        var(--lp-bg);
    background-attachment: fixed;
}
html.rp-stage.season-halloween[data-stage-page="catalog"] .menu-header::before { background-color: rgb(21 13 38 / 90%); }
/* The phone's corner web (styles.css) sits under the bar's backing here, so the stage draws it in the window's top
   right corner, larger (owner «паутина в углу есть?»). */
html.rp-stage.season-halloween[data-stage-page="catalog"] .menu-header::after {
    content: ''; position: fixed; top: 0; right: 0; width: 170px; height: 170px; pointer-events: none;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMTAnIGhlaWdodD0nMTEwJyB2aWV3Qm94PScwIDAgMTEwIDExMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjZDhjOGZmJyBzdHJva2Utb3BhY2l0eT0nLjE4JyBzdHJva2Utd2lkdGg9JzEuMic+PHBhdGggZD0nTTExMCAwTDAgMzZNMTEwIDBMMjggODJNMTEwIDBMNzQgMTEwJy8+PHBhdGggZD0nTTgyIDlRODggMjAgOTAgMjhROTcgMjQgMTAzIDI4TTU2IDE4UTY2IDM4IDcwIDU2UTg2IDQ4IDk4IDU2TTI4IDI4UTQ0IDU0IDUwIDg0UTcyIDcyIDkwIDg0Jy8+PC9zdmc+) no-repeat right top / 170px 170px;
}
html.rp-stage.season-halloween[data-stage-page="catalog"] :is(.games-list .game-card, .catalog-tile, .catalog-showcase-card) { border-color: rgb(242 138 30 / 22%); }
/* No «Игры на Хэллоуин» pill on a computer (owner 2026-10-30 «скрой»); the season look stays. */
html.rp-stage[data-stage-page="catalog"] .catalog-season-hit { display: none; }
html.rp-stage.season-halloween[data-stage-page="catalog"] .catalog-season-hit {
    border-color: rgb(242 138 30 / 55%); background: linear-gradient(135deg, rgb(242 138 30 / 26%), rgb(139 92 246 / 14%));
}
html.rp-stage.season-halloween[data-stage-page="catalog"] :is(.catalog-search-intent h2, .catalog-showcase-heading) { color: #ff8a1f; }

/* ════════════════════ Room: name and lobby (client/create-room/) ════════════════════ */
html.rp-stage[data-stage-page="room"] .screen { height: var(--app-height, 720px); }
html.rp-stage[data-stage-page="room"] #create-screen.active { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .create-content {
    flex: none; width: 600px; max-width: none; padding: 40px 48px 36px; gap: 14px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-1); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%);
    rotate: -.5deg;
}
html.rp-stage[data-stage-page="room"] .create-content > * { rotate: .5deg; }
html.rp-stage[data-stage-page="room"] .create-content .game-logo { width: 260px; height: 150px; }
html.rp-stage[data-stage-page="room"] .create-content .title { font-size: 36px; }
html.rp-stage[data-stage-page="room"] .create-content .subtitle { font-size: 18px; }
html.rp-stage[data-stage-page="room"] .player-entry-row .input { height: 62px; font-size: 22px; border-radius: 18px; }
html.rp-stage[data-stage-page="room"] .player-gender-selector { height: 62px; }
html.rp-stage[data-stage-page="room"] .btn-create { width: 100%; }
html.rp-stage[data-stage-page="room"] .direct-game { width: 100%; }

/* Lobby: the invite on the left (big QR, the code, «Пригласить»), the room on the right. */
html.rp-stage[data-stage-page="room"] #lobby-screen.active { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .lobby-content {
    width: 1180px; max-width: none; height: 620px; margin: 0; padding: 0;
    display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: 48px; row-gap: 14px; align-items: start;
}
html.rp-stage[data-stage-page="room"] .lobby-content > * { grid-column: 2; margin: 0; width: auto; max-width: none; }
html.rp-stage[data-stage-page="room"] .lobby-content > .invite-card {
    grid-column: 1; grid-row: 1 / 5; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 30px 28px; background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-3);
    box-shadow: 8px 10px 0 rgb(0 0 0 / 30%); rotate: -1deg;
}
html.rp-stage[data-stage-page="room"] .invite-card .qr-code-img {
    order: -1; width: 260px; height: 260px; padding: 14px; background: #fff; border-radius: var(--cut-2); box-shadow: var(--cut-shadow); rotate: 1.5deg;
}
html.rp-stage[data-stage-page="room"] .invite-side { align-items: center; text-align: center; gap: 10px; width: 100%; }
html.rp-stage[data-stage-page="room"] .room-code-label { font-size: 15px; letter-spacing: .1em; }
html.rp-stage[data-stage-page="room"] .room-code-btn { font-size: 56px; letter-spacing: .14em; }
html.rp-stage[data-stage-page="room"] .invite-card .btn-invite { min-height: 52px; font-size: 18px; padding: 0 28px; }
/* «Пригласить» and «Позвонить» one under the other on the stage card (call pilot 2026-11-02). */
html.rp-stage[data-stage-page="room"] .invite-actions { flex: none; width: 100%; flex-direction: column; gap: 10px; }
html.rp-stage[data-stage-page="room"] .lobby-content > .qr-invite-note {
    grid-column: 1; grid-row: 5; justify-self: center; padding: 8px 16px; text-align: center; font-size: 16px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 14px;
}
html.rp-stage[data-stage-page="room"] .lobby-content > .game-dropdown { grid-row: 1; }
html.rp-stage[data-stage-page="room"] .lobby-content > .btn-vote { grid-row: 2; justify-self: start; }
html.rp-stage[data-stage-page="room"] .lobby-content > .players-head { grid-row: 3; }
html.rp-stage[data-stage-page="room"] .players-title { font-size: 22px; }
html.rp-stage[data-stage-page="room"] .lobby-content > .players-list {
    grid-row: 4; align-self: stretch; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 12px 16px; padding: 4px 14px 14px 4px;
}
html.rp-stage[data-stage-page="room"] .players-list > * {
    margin: 0; min-height: 64px; font-size: 19px; border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.5deg;
}
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .5deg; }
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 3) { border-radius: var(--cut-3); rotate: .3deg; }
html.rp-stage[data-stage-page="room"] .players-list > :nth-child(4n + 4) { border-radius: var(--cut-4); rotate: -.3deg; }
html.rp-stage[data-stage-page="room"] .lobby-content > .bottom-section {
    grid-row: 5; position: static; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 22px; padding: 0;
    background: none;
}
html.rp-stage[data-stage-page="room"] .bottom-section .lobby-status { font-size: 17px; margin: 0; }

/* «Во что играем?» (game-vote.css): owner 2026-10-29 «голосов - на весь экр». The phone's 420 px sheet becomes the whole
   stage: the games four a row in a centred 1120 px column, bigger icons and names, the buttons centred under them. The
   «Об игре» sheet over it is a centred card instead of a bottom sheet. */
html.rp-stage[data-stage-page="room"] .gv { max-width: none; }
html.rp-stage[data-stage-page="room"] .gv-back { top: 28px; left: 40px; width: 52px; height: 52px; font-size: 22px; }
html.rp-stage[data-stage-page="room"] .gv-head { padding: 30px 120px 10px; }
html.rp-stage[data-stage-page="room"] .gv-head h2 { font-family: var(--st-display); font-size: 36px; letter-spacing: -.02em; }
html.rp-stage[data-stage-page="room"] .gv-hint { margin-top: 6px; font-size: 18px; }
html.rp-stage[data-stage-page="room"] .gv-left { margin-top: 12px; padding: 6px 16px; font-size: 16px; }
html.rp-stage[data-stage-page="room"] .gv-pips i { width: 12px; height: 12px; }
html.rp-stage[data-stage-page="room"] .gv-grid {
    width: 100%; max-width: 1120px; margin: 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 92px;
    gap: 14px; padding: 16px 24px 14px;
}
html.rp-stage[data-stage-page="room"] .gv-tile { gap: 12px; padding: 8px 12px 8px 10px; border-radius: var(--cut-1); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 2) .gv-tile { border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 3) .gv-tile { border-radius: var(--cut-3); }
html.rp-stage[data-stage-page="room"] .gv-cell:nth-child(4n + 4) .gv-tile { border-radius: var(--cut-4); }
html.rp-stage[data-stage-page="room"] :is(.gv-icon, .gv-tile .game-dropdown-item-icon-emoji) { width: 64px; height: 64px; border-radius: 12px; font-size: 42px; }
html.rp-stage[data-stage-page="room"] .gv-name { font-size: 17px; }
html.rp-stage[data-stage-page="room"] :is(.gv-need, .gv-suggested, .gv-phone) { font-size: 14px; }
html.rp-stage[data-stage-page="room"] .gv-face { width: 28px; height: 28px; font-size: 12px; }
html.rp-stage[data-stage-page="room"] .gv-count { height: 24px; font-size: 14px; }
html.rp-stage[data-stage-page="room"] .gv-info { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 19px; }
html.rp-stage[data-stage-page="room"] .gv-minus { top: 4px; left: 4px; width: 26px; height: 26px; }
html.rp-stage[data-stage-page="room"] .gv-bottom { width: 100%; max-width: 520px; margin: 0 auto; padding: 10px 24px 22px; }
html.rp-stage[data-stage-page="room"] .gv-bottom .btn-play { width: 100%; }
html.rp-stage[data-stage-page="room"] .gv-status { font-size: 16px; margin-bottom: 10px; }
html.rp-stage[data-stage-page="room"] .gv-alt { font-size: 16px; }
html.rp-stage[data-stage-page="room"] .gv-result { padding-top: 24px; }
html.rp-stage[data-stage-page="room"] .gv-winner-icon,
html.rp-stage[data-stage-page="room"] .gv-winner .game-dropdown-item-icon-emoji { width: 160px; height: 160px; border-radius: 32px; }
html.rp-stage[data-stage-page="room"] .gv-winner-name { font-family: var(--st-display); font-size: 38px; }
html.rp-stage[data-stage-page="room"] .gv-winner-votes { font-size: 19px; }
html.rp-stage[data-stage-page="room"] .gv-runners { max-width: 420px; }
html.rp-stage[data-stage-page="room"] .gv-runners li { padding: 12px 18px; font-size: 17px; }
html.rp-stage[data-stage-page="room"] .gv-sheet { align-items: center; justify-content: center; }
html.rp-stage[data-stage-page="room"] .gv-sheet.is-page { max-width: none; }
html.rp-stage[data-stage-page="room"] .gv-sheet-panel { width: 520px; max-height: 86%; padding: 30px 32px 26px; border: 1px solid var(--room-line); border-radius: var(--cut-2); }

/* ════════════════════ Join by code / invite (client/join-any/) ════════════════════ */
html.rp-stage[data-stage-page="join"] body { min-height: var(--app-height, 720px); }
html.rp-stage[data-stage-page="join"] .app {
    flex: none; height: auto; min-height: 0; width: 600px; max-width: none; padding: 40px 48px 36px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--st-panel); border: 1px solid var(--st-line); border-radius: var(--cut-1); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%);
}
html.rp-stage[data-stage-page="join"] .app > * { margin-left: 0; margin-right: 0; }
html.rp-stage[data-stage-page="join"] .app .title { font-size: 32px; }
html.rp-stage[data-stage-page="join"] .app .subtitle { font-size: 17px; }
html.rp-stage[data-stage-page="join"] .app .input { height: 60px; font-size: 21px; border-radius: 18px; }
html.rp-stage[data-stage-page="join"] .app .player-gender-selector { height: 60px; }

/* «Как играете с этого компьютера?»: the shared «Выбор режима» (shared/client/ui/mode-choice.ts) as two big
   cards in the middle of the stage instead of a bottom sheet. */
html.rp-stage .rp-mode-sheet { display: grid; place-items: center; }
html.rp-stage .rp-mode-sheet[hidden] { display: none; }
html.rp-stage .rp-mode-panel {
    position: relative; inset: auto; left: auto; bottom: auto; width: 1000px; max-width: none; padding: 40px 48px 48px; border-radius: var(--cut-1);
    color: #fff; background: var(--st-panel); border: 1px solid var(--st-line);
    transform: none; animation: none; box-shadow: 10px 12px 0 rgb(0 0 0 / 34%);
}
html.rp-stage .rp-mode-handle { display: none; }
html.rp-stage .rp-mode-panel header h2 { font-family: var(--st-display); font-size: 38px; letter-spacing: -.02em; }
html.rp-stage .rp-mode-options { grid-template-columns: 1fr 1fr; gap: 28px; }
html.rp-stage .rp-mode-option {
    flex-direction: column; justify-content: center; min-height: 230px; padding: 30px; gap: 20px; border-radius: var(--cut-2);
    background: var(--st-card); border-color: var(--st-line); box-shadow: var(--cut-shadow); rotate: -.8deg;
}
html.rp-stage .rp-mode-option strong { font-family: var(--st-display); font-size: 28px; letter-spacing: -.01em; }
html.rp-stage .rp-mode-option:hover { background: color-mix(in srgb, var(--st-card) 80%, #fff); }
html.rp-stage .rp-mode-option[data-mode="play"] { border: 2px solid var(--st-gold); }
html.rp-stage .rp-mode-option + .rp-mode-option { border-radius: var(--cut-3); rotate: .8deg; translate: 0 6px; }
html.rp-stage .rp-mode-option-icon { width: 96px; height: 96px; margin: 0; border-radius: 28px; }
html.rp-stage .rp-mode-option-icon svg { width: 60px; height: 60px; }

/* ════════════════════ «Комната» inside a game (#lobby-screen of every stage game) ════════════════════
   Owner 2026-10-30 on Рисовач: «начать игру хз где». The game pages' own room (the host's start after the preview, the
   guests' «Ожидание других игроков…») kept the phone column stretched to the stage: player rows 1750 px wide off the
   right edge, «Начать игру» alone in the bottom-left corner. On the stage it is one centred column like the packs
   screen: the title over a 3-a-row grid of player chips, the buttons centred in one row under them, the status under
   the buttons; owner 2026-10-30 «а это к низу спустить бы»: the buttons' row at the stage's bottom. The create-room page («room») has its own two-column lobby above. */
html.rp-stage:not([data-stage-page="room"]) #lobby-screen.active { align-items: center; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen > .lobby-content {
    flex: 1 1 auto; width: 100%; max-width: 1060px; min-height: 0; height: 100%; margin: 0 auto; padding: 56px 0 44px;
    justify-content: flex-start; align-items: center; gap: 0;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .title { align-self: center; text-align: center; justify-content: center; margin: 0 0 22px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .players-list {
    flex: 0 1 auto; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start;
    gap: 12px 16px; min-height: 0; padding: 4px 6px 10px; overflow-y: auto;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .players-list > * { margin: 0; min-width: 0; min-height: 64px; font-size: 19px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > :is(.rounds-selector, .mode-toggle) { align-self: center; margin: 18px 0 0; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section {
    position: static; flex: none; align-self: stretch; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;
    gap: 14px 16px; margin: auto 0 0; padding: 30px 0 0; background: none;
}
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > button { flex: none; width: auto; min-width: 240px; margin: 0; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > :is(.lobby-status, p) { flex: 1 1 100%; margin: 0; text-align: center; font-size: 18px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .lobby-content > .bottom-section > :is(.lobby-status, p):empty { display: none; }
/* «Правила» (game-preview.ts addRulesButton puts it into this row on the stage): first in the row at the buttons' height. */
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section > .rules-again-wrap { order: -1; flex: none; width: auto; align-self: stretch; font-size: 19px; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section > :is(.lobby-status, p) { order: 2; }
html.rp-stage:not([data-stage-page="room"]) #lobby-screen .bottom-section .rules-again { height: 100%; min-height: 54px; min-width: 160px; margin: 0; padding: 0 28px; border-width: 2px; border-radius: 999px; font-size: inherit; font-weight: 600; opacity: 1; }

/* ════════════════════ Квиз (client/mini-games/quiz/) ════════════════════ */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"], [data-stage-page="draw"]) .screen-content { max-width: none; width: 100%; padding-left: 56px; padding-right: 56px; }
/* Onboarding: the picture left, the text right, the buttons under the text. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-container { max-width: 1060px; margin: 0 auto; width: 100%; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-icon img { width: 300px; height: 300px; }
/* Owner 2026-10-30 «на пк строки онб скачут»: art drawn past its box (img[data-art-bleed], 115% with -7.5% margins of the
   phone's 240px icon) was smaller than the plain 300px art, so the title and the text moved on every other slide. Every
   picture keeps one 300px box: the plain one 300px, the bleeding one 345px with -22.5px margins. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) #onboarding-screen .slide-icon:has(> picture > img, > img) { width: 300px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) #onboarding-screen .slide-icon img[data-art-bleed] { width: 345px; height: 345px; margin: -22.5px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-title { font-size: 44px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .slide-text { font-size: 22px; max-width: 640px; margin-left: auto; margin-right: auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-buttons { justify-content: center; gap: 16px; }
/* Owner 2026-10-30 «втф» (Joking Hazard start screen on PC): the phone's narrow rule-animated onboarding (360px slide,
   340px title and text, a 94px text floor, slides stretched to the screen, the h2's own top margin) wrapped the 44px
   title onto two lines and pushed the text and the buttons off the screen. On the stage it is the same slide as the
   other games: wide title and text, slide centred, buttons in view. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .onboarding-slides { align-items: flex-start; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .onboarding-slide { max-width: none; padding: 20px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .slide-title { max-width: none; margin-top: 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .rule-animated-onboarding .slide-text { min-height: 0; }
/* Owner 2026-10-30 «починил?» («Кто из нас» start screen on PC): every stage onboarding is one screen. The phone's 5vh
   gap above the slide (36 stage px under zoom) pushed «Пропустить / Далее» below the window whenever the text took three
   lines (Детектор правды, Как хорошо ты меня знаешь?, Бредовуха, Рисовач, Кто из нас, Я никогда не); without it the
   buttons stay at the bottom edge (the slide's own 20px top padding goes too: 4 lines of German fit 1280×720). «Что бы ты выбрал?» sized its onboarding by 100dvh, which the stage zoom made 1.6×
   the window: it takes the window height and the shared paddings like the others. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="pv"], [data-stage-page="bunker"], [data-stage-page="draw"]) .onboarding-slides, html.rp-stage #onboarding-screen .onboarding-slides > .onboarding-slide { padding-top: 0; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen { height: var(--app-height, 100dvh); overflow: hidden; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen .onboarding-container { min-height: 0; height: 100%; padding: 40px 0 0; }
html.rp-stage[data-stage-page="wyr"] #onboarding-screen .onboarding-dots { margin-top: 0; }
/* Owner 2026-10-30 «а башня», «ну епрст» (Микс): the catalog's preview (?preview=1, the rules alone) of every game
   not on the stage yet (Микс, Башня, Детектив, Кодовые имена, Секретный Гитлер, Декодер, Табу, Слово волка, Alias,
   Крокодил, 5 секунд, Имаджинариум-like word games…) is html.rp-stage[data-stage-page="pv"]: the page adds the meta only
   for ?preview=1, so the game itself keeps its own layout. Their phone onboardings differ (a 100dvh column, a 360px
   grid with the art in half the screen, absolute slides), so here the screen is the window, the slide one centred
   column as in the other games, the shared onboarding rules above do the rest. */
html.rp-stage[data-stage-page="pv"] #onboarding-screen { height: var(--app-height, 100dvh); min-height: 0; padding: 0; overflow: hidden; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .onboarding-container:not([hidden]) { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 40px 0 0; box-sizing: border-box; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .onboarding-container:not([hidden]) { width: 100%; max-width: 1060px; margin: 0 auto; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slides, .decoder-pages, .ww-pages) { flex: 1 1 0; min-height: 0; align-items: flex-start; padding-top: 0; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slide, .decoder-page, .ww-page) { width: 100%; max-width: none; height: auto; padding: 0 20px; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.onboarding-slide, .decoder-page, .ww-page).active { display: flex; flex-direction: column; align-items: center; grid-template-rows: none; margin-top: 0; margin-bottom: 0; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-icon:has(> picture > img, > img), html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-icon img { width: 300px; height: 300px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen :is(.decoder-art, .ww-art) { width: 300px; height: 300px; align-self: center; transform: none; margin: 0 auto 18px; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-title { max-width: none; min-height: 0; margin: 0 auto 20px; font-size: 44px; line-height: 1.12; }
html.rp-stage[data-stage-page="pv"] #onboarding-screen .slide-text { min-height: 0; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 22px; line-height: 1.55; }

/* Packs: four a row, the summary on a backing (it sits over a sphere), settings and start on the right. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content { padding-top: 34px; padding-bottom: 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .title { font-size: 40px; justify-content: flex-start; text-align: left; align-self: stretch; margin: 0 0 4px !important; padding: 0 0 0 72px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .subtitle { text-align: left; align-self: stretch; font-size: 18px; padding: 0 0 0 72px !important; margin: 0 0 14px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; padding: 4px 8px 8px 4px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .packs-section-title { grid-column: 1 / -1; font-size: 17px; margin: 6px 0 0; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 2) { border-radius: var(--cut-2); rotate: .6deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 3) { border-radius: var(--cut-3); rotate: -.3deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-card:nth-of-type(4n + 4) { border-radius: var(--cut-4); rotate: .4deg; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-name { font-size: 17px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid .pack-count { font-size: 13px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section {
    position: static; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 0 26px; background: none;
}
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section > button { flex: none; width: auto; min-width: 240px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section .packs-summary {
    margin-right: auto; padding: 12px 20px; font-size: 17px; background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 16px;
}
/* Owner 2026-10-29 «сдвиги корявые» (100 к 1: two small tiles in the top-left corner, the buttons in the bottom-right
   one, the stage empty between them): the packs block sits in the middle of the stage, the title over it, the tiles
   centred in rows (bigger when a game has four packs or fewer), the buttons right under the tiles. `safe` keeps a long
   list (Квиз) starting at the top. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content { justify-content: safe center; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > :is(.title, .subtitle) { justify-content: center; text-align: center; padding: 0 72px !important; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .packs-container { flex: 0 1 auto; min-height: 0; width: 100%; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 160px)); justify-content: center; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) { grid-template-columns: repeat(auto-fit, 230px); gap: 26px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) .pack-name { font-size: 21px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-illustrated-grid:not(:has(> .pack-card:nth-of-type(5))) .pack-count { font-size: 15px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section { justify-content: center; padding-top: 44px; min-height: 130px; box-sizing: border-box; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) .packs-content > .bottom-section .packs-summary { margin-right: 0; }
/* Owner 2026-10-30 «чзх низ не виден и не скроллится» (Квиз, Угадай мелодию: two sections of packs): `flex: none` let the
   tile list grow past the 720px stage, and .packs-content clips, so the last row and the buttons were cut off with no
   scroll. The list now shrinks to the room left under the title and above the buttons and scrolls itself
   (.packs-illustrated-scroll), the buttons stay on screen; a short list still sits in the middle. */
/* Owner 2026-10-30 «для янн (и мб др игр) экран паков не адаптирован под пк» / «кнопка назад то ближе к центру, то слева
   в углу»: «Я никогда не» and «Кто из нас» have no .packs-content (title, tiles and buttons sit straight in #packs-screen),
   so the phone's 520px column stayed: two tiles a row, the back arrow inside the column, the buttons overlapping. The
   same layout as the other games: the block in the middle of the stage, the arrow in the corner, the buttons in one row
   right under the tiles. */
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen { max-width: none; justify-content: safe center; overflow-y: auto; padding-left: 56px; padding-right: 56px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .title { font-size: 40px; margin: 0 0 4px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .subtitle { font-size: 18px; margin: 0 0 14px; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .packs-container { flex: none; width: 100%; overflow: visible; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 16px; padding: 44px 0 0; min-height: 130px; box-sizing: border-box; background: none; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > button { flex: none; width: auto; min-width: 240px; margin: 0; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > :is(.packs-room-error, #packs-room-status) { flex: 1 1 100%; order: 2; text-align: center; }
html.rp-stage:is([data-stage-page="nhie"], [data-stage-page="wml"]) #packs-screen > .bottom-section > :is(.packs-room-error, #packs-room-status):empty { display: none; }
/* Owner 2026-10-30 (Детектор лжи on a PC): «кнопки спустить бы и в 1 ряд». «Правила» (game-preview.ts addRulesButton puts
   it into the packs' button row) stands first in the row at the buttons' height instead of alone at the stage's bottom;
   the row sits a little lower under the tiles (44px). The `.screen` in the second rule beats packs.css
   `.screen .bottom-section.packs-compact-actions > *`. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) #packs-screen .bottom-section > .rules-again-wrap { order: -1; width: auto; }
html.rp-stage .screen#packs-screen .bottom-section > .rules-again-wrap { flex: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="wml"], [data-stage-page="nhie"], [data-stage-page="meme"], [data-stage-page="im"], [data-stage-page="geo"], [data-stage-page="jh"], [data-stage-page="bunker"]) #packs-screen .bottom-section .rules-again { height: 54px; min-height: 54px; min-width: 160px; margin: 0; padding: 0 28px; border-width: 2px; border-radius: 999px; font-size: 16px; opacity: 1; }

/* The question: big text in the middle, the answers two by two, a keys hint, who answered at the bottom. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .game-content { justify-content: safe center; gap: 26px; padding-bottom: 96px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .game-content > .game-header { display: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .question-text { font-size: 46px; font-weight: 800; line-height: 1.25; max-width: 1100px; margin: 0 auto; text-wrap: balance; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; width: 100%; max-width: 1140px; margin: 0 auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-options.two-options { grid-template-columns: 1fr 1fr; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option { min-height: 100px; padding: 18px 28px; gap: 22px; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option .option-text { font-size: 28px; line-height: 1.25; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .quiz-option .option-letter { width: 54px; height: 54px; font-size: 24px; flex: none; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="draw"]) .stage-keys-hint { display: flex; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .movie-frame-container { max-width: 620px; margin: 0 auto; }
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"]) .answer-feedback { font-size: 20px; min-height: 28px; text-align: center; }
html.rp-stage .mini-scoreboard { position: fixed; left: 56px; right: 56px; bottom: 26px; justify-content: flex-start; gap: 12px; margin: 0; overflow: visible; background: none; }
html.rp-stage .mini-score-item { gap: 10px; padding: 7px 18px 7px 8px; font-size: 20px; border-radius: 999px; background: rgb(255 255 255 / 8%); border: 1.5px solid var(--st-line); }
html.rp-stage .mini-score-avatar { width: 42px; height: 42px; font-size: 18px; }
html.rp-stage .mini-score-name { font-size: 20px; max-width: 200px; }
html.rp-stage .mini-score-value { font-size: 20px; }
/* «Полоска очков» (shared/client/score-strip.ts, owner 2026-11-02 «смотри, чтобы ничего ни на что не наложилось»):
   the play screens that got the strip keep its band (bottom 26 px + a 56 px chip row) free, as Квиз does with its
   padding-bottom: 88px. The games' own stage rules set a smaller padding (meme 20 px, knowme 40 px), hence !important. */
html.rp-stage :is(.screen-content, .shell):has(> .rp-score-strip) { padding-bottom: 96px !important; }
/* Детектор правды is a yellow page: its own dark chips (td-theme.css), not the translucent stage chip with white text.
   The shared gradient under the bar (game-ui.css) is dropped above: on the stage the bar is fixed over the spheres,
   and on yellow it showed as a solid band. */
html.rp-stage[data-stage-page="truth"] .mini-score-item { background: var(--td-surface); border-color: var(--td-surface); }
/* Avatar picker (avatar-capture.css, «GIF | Фото»): on the phone a bottom sheet of 70vh; on the stage its inline
   heights (avatar-capture.js, window pixels) ran past the bottom edge of the zoomed page and the sheet sat low. Owner 2026-10-29: «на пк открытие попапа с гиф не по
   центру» → a centred dialog that fits the stage. */
html.rp-stage .avatar-capture-overlay { align-items: center; }
html.rp-stage .avatar-capture-modal {
    max-width: 560px; height: min(680px, calc(100vh / var(--rp-stage-zoom, 1) - 80px)); border-radius: 24px;
    padding-bottom: 20px; box-shadow: 0 24px 60px rgb(0 0 0 / 50%);
}

/* Мелодия: the /tv/ question view itself (question-stage.css, mounted by main.ts under the phone's answers, which the
   stage hides; the record player moves into it): the record on the left, the four songs as cut-paper buttons on the
   right; the mode line above, the keys hint and the answer line under the songs, the scores along the bottom. The
   palette is the /tv/ melody one (tv/style.css body[data-tv-game="melody"]). */
html:not(.rp-stage) .game-content > .qs-root { display: none; }
html.rp-stage[data-stage-page="melody"] :is(.qs-root, .qs-reveal) {
    --tv-surface: #2a1758; --tv-line: rgb(255 255 255 / 12%); --bg-secondary: #2a1758;
    --accent: #a677ef; --accent-ink: #17191f; --gold: #edc945;
    --text-primary: #fff; --text-secondary: #d9ccf5; --rp-correct: #30c883; --rp-wrong: #fe7b90;
}
html.rp-stage[data-stage-page="melody"] .game-content > .quiz-options { display: none; }
/* The record's glow (music-player.css .vinyl-container::before) reaches past this 1200 px column: the phone's scroll
   box would cut it into a rectangle (owner 2026-10-30: «видны края сияния вокруг пластинки»); the stage fits 720 px. */
html.rp-stage[data-stage-page="melody"] #game-screen .game-content { justify-content: safe center; gap: 14px; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; overflow: visible; }
html.rp-stage[data-stage-page="melody"] .game-content > .qs-root { flex: 1 1 auto; width: 100%; }
html.rp-stage[data-stage-page="melody"] .qs-root .vinyl-base { box-shadow: 0 0 0 8px rgb(166 119 239 / 40%); }
html.rp-stage[data-stage-page="melody"] .qs-root .audio-player-bar { background: var(--bg-secondary); border: 1px solid var(--tv-line); }
/* The keys hint and the answer line under the songs (main.ts moves them into the view's right column). */
html.rp-stage[data-stage-page="melody"] .qs-root .stage-keys-hint { justify-content: flex-start; padding-left: 8px; margin: -10px 0 0; }
html.rp-stage[data-stage-page="melody"] .qs-root .answer-feedback { text-align: left; padding-left: 8px; margin: -14px 0 0; }
html.rp-stage[data-stage-page="melody"] .qs-root .answer-feedback:empty { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="melody"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }

/* Квиз: the /tv/ question view itself (question-stage.css, mounted by main.ts under the phone's answers, which the
   stage hides): the picture, the record or the four photos on the left, the topic, the question and the answers as
   cut-paper buttons on the right (two by two without media); the keys hint and the answer line under the answers, the
   scores along the bottom. The record player and the 4photo cells and keyboard move into it (main.ts placeStageNodes).
   The palette is the /tv/ quiz one (tv/style.css body[data-tv-game="quiz"]). */
html.rp-stage[data-stage-page="quiz"] :is(.qs-root, .qs-reveal) {
    --tv-surface: #100f36; --tv-line: rgb(255 255 255 / 16%); --bg-secondary: #211759;
    --accent: #6640ba; --accent-ink: #fff; --gold: #d5ae58;
    --text-primary: #fff; --text-secondary: #d6cfe8; --rp-correct: #30c883; --rp-wrong: #fe7b90;
}
html.rp-stage[data-stage-page="quiz"] .game-content > :is(.ai-topic-line, .movie-frame-container, .music-player, .question-text, .fourphoto-grid, .fourphoto-cells, .fourphoto-keyboard, .quiz-options) { display: none; }
html.rp-stage[data-stage-page="quiz"] #game-screen .game-content { justify-content: safe center; gap: 14px; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; overflow: visible; }
html.rp-stage[data-stage-page="quiz"] .game-content > .qs-root { flex: 1 1 auto; width: 100%; }
html.rp-stage[data-stage-page="quiz"] .qs-root .vinyl-base { box-shadow: 0 0 0 8px rgb(102 64 186 / 38%); }
html.rp-stage[data-stage-page="quiz"] .qs-root .audio-player-bar { background: var(--bg-secondary); border: 1px solid var(--tv-line); }
html.rp-stage[data-stage-page="quiz"] .qs-root .audio-progress-fill { background: linear-gradient(90deg, #8f6ae0, var(--gold)); }
/* 4photo: the phone's letter cells and keyboard in place of the screen's empty cells. */
html.rp-stage[data-stage-page="quiz"] .qs-four-input { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
html.rp-stage[data-stage-page="quiz"] .qs-four-input .fourphoto-keyboard { max-width: 560px; }
/* The keys hint and the answer line under the answers (main.ts moves them into the view's right column). */
html.rp-stage[data-stage-page="quiz"] .qs-root .stage-keys-hint { margin: -10px 0 0; }
html.rp-stage[data-stage-page="quiz"] .qs-root.has-media .stage-keys-hint { justify-content: flex-start; padding-left: 8px; }
html.rp-stage[data-stage-page="quiz"] .qs-root:has(.tv-options.is-four) .stage-keys-hint { display: none; }
html.rp-stage[data-stage-page="quiz"] .qs-root .answer-feedback { margin: -14px 0 0; }
html.rp-stage[data-stage-page="quiz"] .qs-root.has-media .answer-feedback { text-align: left; padding-left: 8px; }
html.rp-stage[data-stage-page="quiz"] .qs-root .answer-feedback:empty { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
/* The bottom stops over the host's pinned «Дальше», so the answers never go under it. Kept for everyone and from the
   start: the button comes up mid-reveal, and a box that shrank then would move the question. */
html.rp-stage[data-stage-page="quiz"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 80px; }

/* Смехлыст: each prompt on its own paper card with the answer field on it (prompts side by side), the matchup as
   two big cards with «VS» between them, keys A/B. */
html.rp-stage[data-stage-page="quiplash"] :is(#answering-screen, #voting-screen) .game-header { display: none; }
html.rp-stage[data-stage-page="quiplash"] .answering-content { justify-content: safe center; padding-bottom: 48px; }
html.rp-stage[data-stage-page="quiplash"] .answering-content > .title { font-size: 26px; font-family: inherit; font-weight: 700; opacity: .8; margin: 0 0 26px; }
html.rp-stage[data-stage-page="quiplash"] .answering-wrapper { flex: none; width: 100%; max-width: 1180px; align-items: center; }
html.rp-stage[data-stage-page="quiplash"] .prompts-list { flex: none; flex-direction: row; gap: 36px; overflow: visible; margin: 0 0 30px; align-self: stretch; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 36px 34px 30px; border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.8deg; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card:nth-child(2n) { border-radius: var(--cut-2); rotate: .7deg; }
html.rp-stage[data-stage-page="quiplash"] .prompt-text { font-family: var(--st-display); font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0 0 26px; text-wrap: balance; }
html.rp-stage[data-stage-page="quiplash"] .prompt-card .input { height: 68px; padding: 0 22px; font-size: 24px; border-radius: 16px; }
html.rp-stage[data-stage-page="quiplash"] #btn-submit-answers { flex: none; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-overlay { inset: -20px; border-radius: 28px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-icon { font-size: 72px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-text { font-size: 32px; }
html.rp-stage[data-stage-page="quiplash"] .submitted-hint { font-size: 20px; }

/* The matchup: the /tv/ one itself (quiplash-matchup.css, mounted by main.ts under the phone's prompt card, which the
   stage hides with the phone's answer cards): the prompt's joke card, the two answers as buttons with «VS» between
   them; the hint, the keys and the author's line under them, the scores along the bottom. The palette is the /tv/
   quiplash one (tv/style.css body[data-tv-game="quiplash"]). */
html:not(.rp-stage) .voting-content > .qpm-root { display: none; }
html.rp-stage[data-stage-page="quiplash"] :is(.qpm-root, .qs-reveal) {
    --tv-surface: #3c1a5e; --tv-line: rgb(255 255 255 / 14%); --bg-secondary: #3c1a5e;
    --accent: #743cae; --accent-ink: #fff; --gold: #73c3b6;
    --text-primary: #fff; --text-secondary: #d8c8e8; --rp-correct: #30c883; --rp-wrong: #fd8295;
    --qp-paper: #f4eff8; --qp-ink: #17191f; --qp-ink-accent: #5e3a86;
}
html.rp-stage[data-stage-page="quiplash"] .voting-content > :is(.voting-prompt-card, .player-answers) { display: none; }
html.rp-stage[data-stage-page="quiplash"] .voting-content { justify-content: safe center; gap: 0; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 88px; }
html.rp-stage[data-stage-page="quiplash"] .voting-content > .qpm-root { flex: none; width: 100%; margin-bottom: 30px; }
/* The thumbs and the flag on the prompt's card after the vote (main.ts puts them there on the stage). */
html.rp-stage[data-stage-page="quiplash"] .qpm-root .tv-qp-prompt:has(> .quiplash-card-vote:not([hidden])) { padding-bottom: 64px; }
html.rp-stage[data-stage-page="quiplash"] :is(.voting-hint, .author-notice) { font-size: 22px; }
html.rp-stage[data-stage-page="quiplash"] #voting-screen .stage-keys-hint { margin-top: 14px; }
html.rp-stage[data-stage-page="quiplash"] #voting-screen:not(:has(.player-answer-card.votable)) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar; the prompt's
   card keeps room for the thumbs and the flag. */
html.rp-stage[data-stage-page="quiplash"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="quiplash"] #reveal-container.qs-reveal .rr-context.quiplash-reveal-prompt { padding: 28px 32px 64px; border-radius: var(--cut-2); box-shadow: 8px 10px 0 rgb(0 0 0 / 30%); background: var(--qp-paper); }

/* Бредовуха: the /tv/ round itself (fibbage-stage.css, mounted by main.ts next to the phone's card and answers, which
   the stage hides): the fact on its cream card over two notes with the lie field, «Отправить» and the hint on the card
   (main.ts moves them there), then the fact on a smaller card and the answers as cut cards, two by two (three across
   past four), keys A–H; your own lie stays dimmed. The palette is the page's (fb-theme.css --fb-*). */
html:not(.rp-stage) :is(.writing-content > .fbs-lie, #voting-screen .fbs-pick) { display: none; }
html.rp-stage[data-stage-page="fibbage"] :is(.fbs-root, .qs-reveal) {
    --tv-surface: #4e1a1d; --tv-line: rgb(240 229 198 / 16%); --accent: #eba332; --accent-ink: #17191f; --gold: #eba332;
}
html.rp-stage[data-stage-page="fibbage"] :is(#writing-screen, #voting-screen) .game-header,
html.rp-stage[data-stage-page="fibbage"] :is(#writing-screen, #voting-screen) .title,
html.rp-stage[data-stage-page="fibbage"] .writing-content > .fb-card-stack,
html.rp-stage[data-stage-page="fibbage"] #voting-screen > .screen-content > :is(#voting-question-card, .subtitle, .vote-options) { display: none; }
html.rp-stage[data-stage-page="fibbage"] :is(.writing-content, #voting-screen > .screen-content) { justify-content: safe center; align-items: center; padding-bottom: 88px; }
html.rp-stage[data-stage-page="fibbage"] .writing-content > .fbs-lie { flex: none; width: 100%; max-width: 1100px; margin: 0 auto; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen .fbs-pick { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
/* The card's slot: the lie in one row with «Отправить», the hint under it; once sent, the line in ink. */
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .tv-fb-slot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; max-width: 820px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .input { flex: 1 1 0; min-width: 0; height: 68px; padding: 0 24px; font-size: 26px; border-radius: 16px; background: #fff; border: 2px solid var(--fb-maroon); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .btn-play { flex: none; width: auto; min-width: 220px; height: 68px; margin: 0; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .fake-input-section .error-text { flex-basis: 100%; font-size: 18px; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .subtitle { margin: 0; font-size: 22px; font-weight: 600; color: var(--fb-ink-muted); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-overlay.visible { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; background: none; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-icon { font-size: 40px; color: #3f8a2a; }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-text { font-size: 30px; color: var(--fb-ink); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-hint { flex-basis: 100%; text-align: center; font-size: 20px; color: var(--fb-ink-muted); }
html.rp-stage[data-stage-page="fibbage"] .fbs-lie .submitted-overlay.visible ~ .subtitle { display: none; }
/* The thumbs and the flag on the fact's card after the vote (main.ts puts them there on the stage). */
html.rp-stage[data-stage-page="fibbage"] .fbs-pick .tv-fb-card:has(> .fibbage-card-vote:not([hidden])) { padding-bottom: 60px; }
html.rp-stage[data-stage-page="fibbage"] .vote-confirmed { font-size: 22px; margin-top: 18px; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen .stage-keys-hint { margin-top: 18px; }
html.rp-stage[data-stage-page="fibbage"] #voting-screen:has(.fbs-pick.is-locked) .stage-keys-hint { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar; the fact's
   card keeps room for the thumbs and the flag. */
html.rp-stage[data-stage-page="fibbage"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="fibbage"] #reveal-container.qs-reveal .rr-context.fibbage-reveal-question { padding: 26px 32px 64px; }

/* «100 к 1»: the /tv/ board itself (hundred-board.css, mounted by main.ts under the phone's table, which the stage
   hides), the answer typed in one row under it, the scores along the bottom as the /tv/ footer. */
html:not(.rp-stage) .game-content > .hk-board-root { display: none; }
html.rp-stage[data-stage-page="hundred"] .game-content > :is(.question-text, .answer-table) { display: none; }
html.rp-stage[data-stage-page="hundred"] #game-screen .game-content { justify-content: flex-start; gap: 18px; padding-top: 34px; padding-bottom: 100px; }
html.rp-stage[data-stage-page="hundred"] .game-content > .hk-board-root { width: 100%; max-width: 1220px; margin: 0 auto; flex: 1 1 auto; }
html.rp-stage[data-stage-page="hundred"] .answer-input-section { width: 100%; max-width: 940px; gap: 18px; margin: 6px auto 0; }
html.rp-stage[data-stage-page="hundred"] .answer-input { flex: 1 1 0; min-width: 0; height: 70px; padding: 0 24px; font-size: 26px; border-radius: 18px; }
html.rp-stage[data-stage-page="hundred"] .btn-send { flex: none; width: 120px; height: 70px; border-radius: 35px; font-size: 30px; }
html.rp-stage[data-stage-page="hundred"] .answer-feedback { margin: 0; }

/* Детектор правды: the /tv/ step itself (truth-detect.css, mounted by main.ts before the phone's phases, which the stage
   hides but for the keys hint): the statement in ink, the polygraph, «Да» / «Нет» or the numbers as cut cards (keys
   ←/→ (1/2) and the digits), the scores along the bottom. The palette is the page's (td-theme.css --td-*). */
html:not(.rp-stage) .game-content > .tdd-root { display: none; }
html.rp-stage[data-stage-page="truth"] :is(.tdd-root, .qs-reveal) {
    --tv-surface: #272723; --tv-line: rgb(255 255 255 / 12%); --accent: #272723; --accent-ink: #fff; --gold: #e88629;
}
html.rp-stage[data-stage-page="truth"] .game-content > .question-text,
html.rp-stage[data-stage-page="truth"] :is(#answer-phase, #guess-phase) > :not(.stage-keys-hint) { display: none; }
html.rp-stage[data-stage-page="truth"] .game-content > .tdd-root { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
html.rp-stage[data-stage-page="truth"] .phase-container { display: flex; flex-direction: column; align-items: center; gap: 26px; }
html.rp-stage[data-stage-page="truth"] .waiting-text { font-size: 26px; font-weight: 700; }
html.rp-stage[data-stage-page="truth"] .answer-feedback:not(:empty) { align-self: center; width: auto; padding: 8px 30px; border-radius: 999px; font-size: 22px; }
html.rp-stage[data-stage-page="truth"] .stage-keys-hint { margin: 0; }
/* Once a pick is taken the scores pinned along the bottom used to cover «Принято!» (owner 2026-10-30): «Ответьте честно!»
   gives way to the waiting line, «Принято!» sits right under it, and the gaps tighten so both stay above the chips. */
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) { gap: 12px; }
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) .tv-td-hint { display: none; }
html.rp-stage[data-stage-page="truth"] .game-content:has(> #waiting-phase:not([style*="none"])) .tdd-root { margin-bottom: 14px; }
html.rp-stage[data-stage-page="truth"] .waiting-text { margin: 0; }
html.rp-stage[data-stage-page="truth"] .answer-feedback { margin: 0; }
html.rp-stage[data-stage-page="truth"] :is(#answer-phase:has(.yesno-btn:disabled), #guess-phase:has(.number-btn:disabled)) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
/* The bottom stops over the pinned «Кто как ответил?» button, so the last answers never go under it. */
html.rp-stage[data-stage-page="truth"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 80px; }

/* «Что бы ты выбрал?»: the /tv/ dilemma itself (wyr-choice.css, mounted by main.ts under the swipe card, which the stage
   hides with the phone's buttons): what is asked on top, the two sides as big cut-card buttons with «или» (a click,
   ←/→, 1/2 or A/B), the thumbs and the flag under them once answered, the keys hint or «Ответ принят» under that.
   The palette is the /tv/ one (tv/style.css body[data-tv-game="wouldyourather"]); the round results take the /tv/
   layout (question-stage.css .qs-reveal). */
html:not(.rp-stage) .decision-layout > .wyc-root { display: none; }
html.rp-stage[data-stage-page="wyr"] :is(.wyc-root, .qs-reveal) {
    --tv-surface: #004e99; --tv-line: rgb(255 255 255 / 22%); --bg-secondary: #004e99;
    --accent: #ca003d; --accent-ink: #fff; --gold: #00bce9;
    --text-primary: #fff; --text-secondary: #e8f3ff; --rp-correct: #72feb5; --rp-wrong: #fdd2d3;
    --wyr-ink: #17191f; --wyr-a: #00bce9; --wyr-b: #ca003d;
}
html.rp-stage[data-stage-page="wyr"] .decision-layout {
    max-width: 1200px; width: 100%; margin: 0 auto; min-height: calc(var(--app-height, 720px) - 110px);
    justify-content: safe center; gap: 18px; padding: 0 40px 10px;
}
html.rp-stage[data-stage-page="wyr"] .decision-layout > :is(.decision-heading, .choice-card, .choice-buttons) { display: none; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .phase-line { justify-content: center; gap: 28px; font-size: 16px; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyc-root { position: relative; flex: none; padding: 8px 0; }
html.rp-stage[data-stage-page="wyr"] .wyc-root > .wyr-card-vote { position: static; transform: none; align-self: center; margin-top: 4px; }
html.rp-stage[data-stage-page="wyr"] .wyc-root > .wyr-report-flag { position: absolute; right: 8px; bottom: 0; color: #fff; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyr-teaser-chip { margin: 0 auto; }
html.rp-stage[data-stage-page="wyr"] .decision-layout > .wyr-teaser-cta { width: auto; min-width: 320px; align-self: center; }
html.rp-stage[data-stage-page="wyr"] #swipe-hint { margin: 0; font-size: 22px; text-align: center; }
html.rp-stage[data-stage-page="wyr"] .decision-layout:not(:has(.wyc-root.is-locked)) #swipe-hint,
html.rp-stage[data-stage-page="wyr"] .decision-layout:has(.wyc-root.is-locked) .stage-keys-hint { display: none; }
/* The role, the impostor vote and its reveal: the phone's panels, a wider column in the middle. */
html.rp-stage[data-stage-page="wyr"] :is(.role-panel, .vote-scroll, .reveal-scroll) { max-width: 900px; width: 100%; margin: 0 auto; }
html.rp-stage[data-stage-page="wyr"] .candidate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-badge.majority { color: var(--wyr-ink); background: var(--wyr-a); }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-lb-score { color: var(--wyr-a); }
/* The phone's small caps title (styles.css .wyr-round-reveal) becomes the /tv/ question; voters as chips, as on /tv/. */
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-context-text { color: #fff; font-size: 30px; font-weight: 700; text-transform: none; letter-spacing: 0; }
html.rp-stage[data-stage-page="wyr"] #wyr-reveal-container.qs-reveal .rr-voter { color: #fff; background: rgb(255 255 255 / 12%); }

/* «Как хорошо ты меня знаешь?»: the /tv/ step itself (knowme-stage.css, mounted by main.ts after the question card, which
   the stage hides with the phone's badge and phases): who answers on the navy label, the question, the hint, the
   options as cream cut-card buttons (a click, A–D or 1–4; ←/→ for two), the keys hint under them while this player may
   pick. The palette is the /tv/ one (tv/style.css body[data-tv-game="knowme"]); the round results take the /tv/
   layout (question-stage.css .qs-reveal). */
html:not(.rp-stage) .game-content > .kms-root { display: none; }
html.rp-stage[data-stage-page="knowme"] :is(.kms-root, .qs-reveal) {
    --tv-surface: #313555; --tv-line: rgb(255 242 220 / 18%); --accent: #822d29; --accent-ink: #fff; --gold: #fff2dc;
    --text-primary: #fff; --text-secondary: #fff2dc;
}
html.rp-stage[data-stage-page="knowme"] #onboarding-screen .slide-icon { width: 300px; }
html.rp-stage[data-stage-page="knowme"] #game-screen .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 20px;
    min-height: var(--app-height, 720px); padding-top: 104px; padding-bottom: 40px;
}
html.rp-stage[data-stage-page="knowme"] .game-content > :is(.game-header, .respondent-badge, .km-question-card, .phase-container) { display: none !important; }
html.rp-stage[data-stage-page="knowme"] .game-content > .kms-root { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .kms-root > .km-teaser-chip { margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .game-content > .km-teaser-cta { width: auto; min-width: 320px; align-self: center; margin: 0 auto; }
html.rp-stage[data-stage-page="knowme"] .game-content > .knowme-card-vote { align-self: center; margin: 0; }
html.rp-stage[data-stage-page="knowme"] #km-keys-hint { margin: 0; }
html.rp-stage[data-stage-page="knowme"] .game-content:not(:has(.tv-km-options.is-votable)) #km-keys-hint { visibility: hidden; }
html.rp-stage[data-stage-page="knowme"] .game-content:has(.tv-km-options.is-two) #km-keys-hint kbd:nth-of-type(n + 3) { display: none; }
/* Round results: the /tv/ layout (question-stage.css .qs-reveal) in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context-text { color: #fff; font-weight: 700; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context-subtext { font-size: 21px; font-weight: 600; }
html.rp-stage[data-stage-page="knowme"] #reveal-container.qs-reveal .rr-context .knowme-card-vote { justify-content: center; margin: 18px 0 0; }

/* «Кто из нас» (only in a room: the page adds its meta for ?room=, the one-phone game keeps the phone column): each
   step is the /tv/ one (wml-stage.css, mounted by multiplayer.ts before the phone's card, statement and punishment
   kicker, which the stage hides with the rest of the phone's step): the statement on the dark cut card with the
   players as cut-card buttons (a click or 1–9), the votes as the screen's tally rows, the punishments on its cards.
   The phone's top bar, round line, countdowns and «Выполнено» stay. The palette is the /tv/ one
   (tv/style.css body[data-tv-game="whosmostlikelyto"]). */
html:not(.rp-stage) .wms-root { display: none; }
html.rp-stage[data-stage-page="wml"] .wms-root { --tv-surface: #262629; --tv-line: rgb(228 227 229 / 14%); --text-secondary: #b4b3b8; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
html.rp-stage[data-stage-page="wml"] .screen.multiplayer-screen { max-width: none; padding: 20px 56px 28px; }
html.rp-stage[data-stage-page="wml"] :is(#onboarding-screen, #packs-screen, #multiplayer-waiting-screen) { padding-top: 34px; }
html.rp-stage[data-stage-page="wml"] #multiplayer-waiting-screen .screen-content,
html.rp-stage[data-stage-page="wml"] #multiplayer-ended-screen .multiplayer-center { width: 100%; max-width: 640px; margin: 0 auto; }
html.rp-stage[data-stage-page="wml"] .multiplayer-topbar { min-height: 64px; }
html.rp-stage[data-stage-page="wml"] .multiplayer-brand-mark { font-size: 14px; }
html.rp-stage[data-stage-page="wml"] .multiplayer-topline { margin: 0 0 8px; }
html.rp-stage[data-stage-page="wml"] :is(.round-pill, .answer-progress, .next-round-label) { font-size: 17px; }
html.rp-stage[data-stage-page="wml"] #multiplayer-game-screen > :is(.wm-question-card, .wm-guess-banner, .wm-vote-hint, .wm-vote-grid),
html.rp-stage[data-stage-page="wml"] #multiplayer-reveal-screen > :is(.reveal-statement, .wm-reveal-summary, .wm-tally, .wm-leaderboard),
html.rp-stage[data-stage-page="wml"] .punishment-phase-content > :is(.punishment-phase-kicker, h1, .punishment-phase-copy, .punishment-phase-list, .punishment-phase-status) { display: none !important; }
html.rp-stage[data-stage-page="wml"] #multiplayer-game-screen > .wm-teaser-cta { align-self: center; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="wml"] .wms-root .wm-teaser-chip { align-self: center; margin: 0; }
/* The question card's thumbs and flag, moved onto the stage's card (multiplayer.ts placeCardExtras). */
html.rp-stage[data-stage-page="wml"] .tv-wml-card .wm-online-card-vote { position: static; margin-top: 8px; }
html.rp-stage[data-stage-page="wml"] .tv-wml-card .wm-online-report-flag { position: absolute; right: 14px; bottom: 12px; }
html.rp-stage[data-stage-page="wml"] .tv-wml-card { position: relative; }
html.rp-stage[data-stage-page="wml"] .next-round-track { width: 100%; max-width: 760px; margin: 18px auto 0; height: 6px; }
html.rp-stage[data-stage-page="wml"] .punishment-phase-content { max-width: none; }
html.rp-stage[data-stage-page="wml"] .punishment-phase-content > :is(.punishment-complete-button, .punishment-waiting, .punishment-timebar, .punishment-time-label, .wm-punishment-cta) { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="wml"] .punishment-complete-button { min-height: 60px; font-size: 19px; }
html.rp-stage[data-stage-page="wml"] .punishment-time-label { font-size: 16px; }

/* «Я никогда не» (only in a room, as «Кто из нас»): each step is the /tv/ one (nhie-stage.css on wml-stage.css, mounted
   by multiplayer.ts before the phone's swipe card, statement and punishment kicker, which the stage hides with the rest
   of the phone's step): the statement on the dark cut card with «Не было» / «Было» as two cut-card buttons (a click,
   1/2 or ←/→), the answers as the screen's two columns with the ring, the punishments on its cards. The phone's top
   bar, round line, countdowns and «Выполнено» stay. The palette is the /tv/ one
   (tv/style.css body[data-tv-game="neverhaveiever"]). */
html.rp-stage[data-stage-page="nhie"] .nhs-root {
    --tv-surface: #2a1d24; --tv-line: rgb(241 218 221 / 14%); --text-secondary: #c9b4b8; --bg-primary: #171316; --bg-secondary: #2a1d24;
    --wm-rose: #e04a5e; --wm-rose-text: #f7a1ac; --wm-crimson: #bc2438; --rp-correct: #75c259;
    flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0;
}
html.rp-stage[data-stage-page="nhie"] .screen.multiplayer-screen { width: 100%; max-width: none; padding: 20px 56px 28px; }
html.rp-stage[data-stage-page="nhie"] :is(#onboarding-screen, #packs-screen, #multiplayer-waiting-screen) { padding-top: 34px; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-waiting-screen .screen-content,
html.rp-stage[data-stage-page="nhie"] #multiplayer-ended-screen .multiplayer-center { width: 100%; max-width: 640px; margin: 0 auto; }
html.rp-stage[data-stage-page="nhie"] .multiplayer-topbar { min-height: 64px; }
html.rp-stage[data-stage-page="nhie"] .multiplayer-topline { margin: 0 0 8px; }
html.rp-stage[data-stage-page="nhie"] :is(.round-pill, .answer-progress, .next-round-label) { font-size: 17px; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-game-screen > :is(.multiplayer-lives, .split-statement-card, .multiplayer-answer-area),
html.rp-stage[data-stage-page="nhie"] #multiplayer-reveal-screen > :is(.reveal-statement, .choice-columns),
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content > :is(.punishment-phase-kicker, h1, .punishment-phase-copy, .punishment-phase-list, .punishment-phase-status) { display: none !important; }
html.rp-stage[data-stage-page="nhie"] #multiplayer-game-screen > .nhie-upgrade { align-self: center; width: auto; min-width: 320px; }
html.rp-stage[data-stage-page="nhie"] .nhs-root .nhie-card-teaser { align-self: center; margin: 0; }
/* The card's thumbs, flag and refresh, moved onto the stage's card (multiplayer.ts placeCardExtras). */
html.rp-stage[data-stage-page="nhie"] .tv-wml-card { position: relative; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-online-card-vote { position: static; margin-top: 8px; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-report-flag { position: absolute; right: 14px; bottom: 12px; }
html.rp-stage[data-stage-page="nhie"] .tv-wml-card .nhie-refresh-card { position: absolute; right: 14px; top: 12px; }
html.rp-stage[data-stage-page="nhie"] .next-round-track { width: 100%; max-width: 760px; margin: 18px auto 0; height: 6px; }
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content { width: 100%; max-width: none; }
html.rp-stage[data-stage-page="nhie"] .punishment-phase-content > :is(.punishment-complete-button, .punishment-waiting, .punishment-timebar, .punishment-time-label, .rp-premium-cta) { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="nhie"] .punishment-complete-button { min-height: 60px; font-size: 19px; }
html.rp-stage[data-stage-page="nhie"] .punishment-time-label { font-size: 16px; }

/* «Что за мем?»: each step is the /tv/ one (meme-stage.css, mounted by main.ts after the round screen's prompt card,
   which the stage hides with the phone's subtitle, hand, table and «Карта выбрана» overlay): the prompt on the white
   cut card on the left, the cards on the right as cut-card buttons (the hand while choosing, the table while voting;
   a click, 1–9 or the letter), the pick with the purple edge. «Обновить руку» stays under the cards. The round results
   take the /tv/ layout (question-stage.css .qs-reveal + meme-stage.css .mms-reveal). The palette is the /tv/ one
   (tv/style.css body[data-tv-game="whatdoyoumeme"]): a light page, ink on white cards. */
html:not(.rp-stage) .game-content > .mms-root { display: none; }
html.rp-stage[data-stage-page="meme"] :is(.mms-root, .mms-reveal) {
    --tv-surface: #fff; --tv-line: #dddbe6; --accent: #267c86; --accent-ink: #fff; --gold: #7e3c9b;
    --text-primary: #17191f; --text-secondary: #4a4d57; --light-ink: #17191f; --light-card: #fff;
    --cut-shadow: 5px 6px 0 rgb(23 25 31 / 14%);
}
html.rp-stage[data-stage-page="meme"] :is(#choosing-screen, #voting-screen) .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 16px; max-width: 1240px; margin: 0 auto; width: 100%;
    min-height: var(--app-height, 720px); padding-top: 88px; padding-bottom: 20px;
}
html.rp-stage[data-stage-page="meme"] .game-content > :is(.game-header, .prompt-card, .choosing-subtitle, .voting-subtitle, .cards-grid, .table-grid, .submitted-overlay) { display: none !important; }
html.rp-stage[data-stage-page="meme"] .game-content > .mms-root { flex: none; width: 100%; }
html.rp-stage[data-stage-page="meme"] .mms-root.is-voting .tv-meme-table:not(.is-captions) { flex: none; height: 480px; }
html.rp-stage[data-stage-page="meme"] .mms-root .tv-meme-table.is-captions { flex: none; height: auto; max-height: 500px; }
/* The hand leaves room for «Обновить руку» under it. */
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table:not(.is-captions) { flex: none; height: 410px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table.is-captions { max-height: 410px; }
html.rp-stage[data-stage-page="meme"] .game-content > .btn-refresh-hand { align-self: center; width: auto; min-height: 46px; padding: 0 28px; font-size: 17px; margin: 0; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar; light tokens and the prompt as on /tv/. */
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal { overflow: visible; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: var(--text-secondary);
    --rr-surface: var(--light-card); --rr-border: var(--tv-line);
    --rr-leading-surface: var(--light-card); --rr-leading-border: var(--gold);
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-context { position: relative; padding: 24px 28px 56px; background: var(--light-card); border: 2px solid var(--tv-line); border-radius: var(--cut-2); rotate: -1deg; box-shadow: var(--cut-shadow); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-context-text { color: var(--light-ink); font-weight: 700; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-option.rr-type-correct { border-color: var(--rp-correct); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-author-name { color: var(--gold); font-weight: 700; }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-voter { color: var(--light-ink); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-lb-pos { color: var(--text-secondary); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="meme"] #reveal-container.mms-reveal .rr-lb-score { color: var(--gold); }

/* «Имаджинариум»: each step is the /tv/ one (meme-stage.css + im-stage.css, shared/client/im-stage.ts, mounted by
   main.ts at the top of the round screen, which the stage hides with the phone's labels, hand, table, waiting line and
   «Карта выбрана» overlay): the storyteller and the association on a cream cut strip on top, the cards upright under it
   across the whole width (one row when that is biggest) as cut-card buttons (the storyteller's hand to pick for the association, the others' hand to play, the
   table to vote on; a click, 1–9 or the letter). The storyteller's field and «Отправить» stay under the hand. The round
   results take the /tv/ layout (question-stage.css .qs-reveal + meme-stage.css .mms-reveal). The palette is the /tv/
   one (tv/style.css body[data-tv-game="imaginarium"]): the amber page, cream cards with ink, ink panels with white. */
html:not(.rp-stage) .game-content > .mms-root.ims { display: none; }
html.rp-stage[data-stage-page="im"] :is(.mms-root, .mms-reveal) {
    --tv-surface: #422c35; --tv-line: rgb(66 44 53 / 22%); --accent: #422c35; --accent-ink: #fff; --gold: #72b3d9;
    --text-primary: #17191f; --text-secondary: #2b1e14; --light-ink: #17191f; --light-card: #fff0ca;
    --cut-shadow: 5px 6px 0 rgb(66 44 53 / 30%);
}
html.rp-stage[data-stage-page="im"] :is(#association-screen, #choosing-screen, #voting-screen) .game-content {
    display: flex; flex-direction: column; justify-content: safe center; gap: 16px; max-width: 1240px; margin: 0 auto; width: 100%;
    min-height: calc(720px - var(--rp-gh-space, 104px)); padding-top: 0; padding-bottom: 16px;
}
html.rp-stage[data-stage-page="im"] .game-content > :is(.game-header, .association-card, .cards-grid, .table-grid, .submitted-overlay, #waiting-view, #storyteller-notice) { display: none !important; }
html.rp-stage[data-stage-page="im"] #storyteller-view > :is(.storyteller-label, .subtitle, .cards-grid) { display: none !important; }
html.rp-stage[data-stage-page="im"] .game-content > .mms-root { flex: none; width: 100%; }
html.rp-stage[data-stage-page="im"] .mms-root.is-voting .tv-meme-table { flex: none; height: 440px; }
html.rp-stage[data-stage-page="im"] .mms-root:not(.is-voting) .tv-meme-hint { font-size: 25px; }
/* The storyteller's hand leaves room for the association field under it. */
html.rp-stage[data-stage-page="im"] #association-screen .mms-root.is-voting .tv-meme-table { height: 370px; }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area { display: flex; gap: 14px; max-width: 900px; margin: 0 auto; }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area .input { flex: 1; min-height: 56px; font-size: 20px; border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="im"] #storyteller-view .association-input-area .btn-play { flex: none; width: auto; min-width: 200px; min-height: 56px; font-size: 19px; margin: 0; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar; the cream cards and the ink rows as on /tv/. */
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal { overflow: visible; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: #5a4636;
    --rr-surface: var(--light-card); --rr-border: transparent;
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context { position: relative; padding: 24px 28px 56px; background: var(--light-card); border-radius: var(--cut-2); rotate: -1deg; box-shadow: var(--cut-shadow); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context-text { color: var(--light-ink); font-weight: 700; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-context-subtext { color: var(--im-cream); background: var(--im-ink); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-card { background: var(--light-card); border-color: transparent; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-card.rr-type-correct { border-color: var(--rp-correct); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-owner { color: var(--light-ink); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-option-image-voters { color: #5a4636; }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-voter { color: var(--light-ink); background: rgb(66 44 53 / 10%); }
html.rp-stage[data-stage-page="im"] #reveal-container.mms-reveal .rr-lb-score { color: var(--gold); }
/* «Joking Hazard»: each step is the /tv/ one (jh-stage.css, mounted by main.ts before the round screen's copy, which the
   stage hides with the phone's top bar, strip, comics list and «Голос принят» card): the round's comic as three cut
   cards with the phone's kicker, title and hint; the hand stays the phone's (a row of seven cut cards under it) with
   its buttons («До стартовой» / «После стартовой», «Готово», the exchange, the line for a blank panel); while voting
   the table as cut-card buttons (a click, 1–9 or the letter), the pick with the green edge. The round results take
   the /tv/ layout (question-stage.css .qs-reveal + jh-stage.css .jhs-reveal). The palette is the /tv/ one
   (tv/style.css body[data-tv-game="jokinghazard"]): a white comic page, ink on white cards. */
html:not(.rp-stage) .shell > .jhs-root { display: none; }
html.rp-stage[data-stage-page="jh"] :is(.jhs-root, .jhs-reveal) {
    --tv-surface: #fff; --tv-line: #dcdcd4; --accent: #236b92; --accent-ink: #fff; --gold: #4f7a1e;
    --text-primary: #17191f; --text-secondary: #4a4d55; --light-ink: #17191f; --light-card: #fff; --jh-red: #e53945;
    --cut-shadow: 5px 6px 0 rgb(23 25 31 / 14%);
}
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) {
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px;
    max-width: 1240px; width: 100%; margin: 0 auto; min-height: calc(var(--app-height, 720px) - var(--rp-gh-space, 0px)); padding-top: 0; padding-bottom: 12px;
}
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) > :is(.game-topbar, .phase-copy, .comic-stage, .comics-list, #vote-waiting) { display: none !important; }
html.rp-stage[data-stage-page="jh"] :is(.game-shell, .vote-shell) > .jhs-root { flex: none; width: 100%; gap: 10px; }
/* The round: the strip smaller while the hand is on screen, bigger while this player waits. */
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-title { font-size: 28px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-hint { font-size: 18px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-strip { height: 180px; gap: 16px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(#hand:empty) .jhs-strip { height: 320px; }
html.rp-stage[data-stage-page="jh"] .game-shell > :is(.order-controls, .selection-bar, .waiting-card, .caption-editor) { width: 100%; max-width: 560px; margin: 0; }
html.rp-stage[data-stage-page="jh"] .order-controls .btn-join { min-height: 48px; font-size: 16px; }
html.rp-stage[data-stage-page="jh"] .selection-bar { font-size: 16px; border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="jh"] .selection-bar .btn-play { min-height: 46px; font-size: 16px; }
html.rp-stage[data-stage-page="jh"] .waiting-card { border-radius: var(--cut-2); }
html.rp-stage[data-stage-page="jh"] .hand {
    display: flex; justify-content: center; gap: 14px; width: 100%; margin: 0; padding: 4px 6px 8px; overflow: visible; scroll-snap-type: none;
}
html.rp-stage[data-stage-page="jh"] .hand:empty { display: none; }
html.rp-stage[data-stage-page="jh"] .hand-card { flex: 0 0 118px; cursor: pointer; }
html.rp-stage[data-stage-page="jh"] .hand-card:hover:not(:disabled):not(.selected) .panel { translate: 0 -4px; box-shadow: 6px 8px 0 color-mix(in srgb, #236b92 30%, transparent); }
/* Voting: the table's line reads as the step's title. */
html.rp-stage[data-stage-page="jh"] .vote-shell .jhs-hint { font-size: 22px; color: var(--text-primary); }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar, light tokens as on /tv/. */
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal { overflow: visible; }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-container {
    inset: 92px 40px 0;
    --rr-ink: var(--light-ink); --rr-muted: var(--text-secondary);
    --rr-surface: var(--light-card); --rr-border: var(--tv-line);
    --rr-leading-surface: var(--light-card); --rr-leading-border: var(--gold);
    --rr-wrong-surface: var(--light-card); --rr-correct-surface: var(--light-card);
}
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-voter { color: var(--light-ink); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-lb-pos { color: var(--text-secondary); background: rgb(23 25 31 / 7%); }
html.rp-stage[data-stage-page="jh"] #reveal-container.qs-reveal .rr-lb-score { color: var(--gold); }
/* Геоугадайка: the round keeps the phone's Street View sphere over the whole stage (one panorama per page: billed per
   load), the guess map a bigger corner preview that opens wide on a click (Enter or Space confirms the pin). The round
   results are the /tv/ ones (geo-stage.css, mounted by main.ts in the round results screen, which the stage shows
   instead of the phone's map, note and reveal): the big map with the flag and the avatar pins, the place, the rows,
   then the board. The palette is the page's (geo-theme.css --geo-*). */
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container { right: 28px; bottom: 34px; width: 340px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .guess-map { height: 220px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container.is-open { width: 720px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container.is-open .guess-map { height: 470px; }
html.rp-stage[data-stage-page="geo"] #game-screen.geo-sphere .map-guess-container:not(.is-open) .btn-confirm-guess { padding: 12px; font-size: 18px; }
html.rp-stage[data-stage-page="geo"] .btn-confirm-guess { min-height: 56px; font-size: 20px; border-radius: 28px; }
html.rp-stage[data-stage-page="geo"] #game-screen:not(.geo-sphere) .game-content { max-width: 1100px; margin: 0 auto; width: 100%; }
html.rp-stage[data-stage-page="geo"] #game-screen:not(.geo-sphere) .guess-map { height: 360px; }
html.rp-stage[data-stage-page="geo"] .geo-role { max-width: 760px; margin-left: auto; margin-right: auto; font-size: 18px; }
html.rp-stage[data-stage-page="geo"] #round-results-screen > :is(.results-map-container, .geo-round-note, #reveal-container) { display: none !important; }
html.rp-stage[data-stage-page="geo"] #round-results-screen.active { display: flex; flex-direction: column; overflow: hidden; }
html.rp-stage[data-stage-page="geo"] #round-results-screen > .gss-root {
    --geo-ink: #17191f; --tv-line: var(--geo-line); --text-secondary: #c9c4f0;
    position: absolute; inset: 92px 40px 24px; padding: 4px 6px 0;
}
html.rp-stage[data-stage-page="geo"] .gss-board .rr-container.rr-dashboard .rr-screen1 { padding: var(--cut-room, 14px); }
html.rp-stage[data-stage-page="geo"] .gss-board .rr-context-text { font-size: 22px; }
html.rp-stage[data-stage-page="geo"] .gss-board .rr-option { padding: 12px 16px; }
/* The vote and the final screen: the phone's, a wider column in the middle. */
html.rp-stage[data-stage-page="geo"] .vote-content { max-width: 900px; margin: 0 auto; width: 100%; }
html.rp-stage[data-stage-page="geo"] .geo-candidates { max-width: 860px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* «Рисовач»: drawing is the phone's canvas laid out on the stage: the word on the white cut card on the left (tv
   .tv-draw-card) with «Отправить рисунок» under it, the sheet with its tools on the right. Then each step is the /tv/
   one (draw-stage.css, mounted by main.ts after the phone's drawing, which the stage hides with the phone's title and
   buttons): the drawing big on its sheet with the artist and the title field under it, then the drawing on the left
   and the titles on the right as cut-card buttons (a click or the letter). The round results take the /tv/ layout
   (question-stage.css .qs-reveal + draw-stage.css). The palette is the /tv/ one (tv/style.css
   body[data-tv-game="drawful"]): a light page, ink on white cards, pink for actions. */
html:not(.rp-stage) .screen-content > .dws-root { display: none; }
html.rp-stage[data-stage-page="draw"] :is(.dws-root, .qs-reveal) {
    --tv-surface: #fff; --tv-line: #e4e1dd; --accent: #c61d76; --accent-ink: #fff; --gold: #c61d76;
    --text-primary: #17191f; --text-secondary: #5a5650; --light-ink: #17191f; --light-card: #fff;
}
html.rp-stage[data-stage-page="draw"] .stage-keys-hint { --text-secondary: #5a5650; --text-primary: #17191f; }
/* Drawing. */
html.rp-stage[data-stage-page="draw"] #drawing-screen.active {
    display: grid; grid-template-columns: 380px 700px; grid-template-rows: 1fr auto 1fr; column-gap: 56px;
    justify-content: center; align-content: center; padding: 96px 40px 24px;
}
html.rp-stage[data-stage-page="draw"] #drawing-screen > .game-header { display: none; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .drawing-prompt {
    grid-column: 1; grid-row: 2; align-self: center; margin: 0; padding: 40px 32px 36px;
    border-radius: 30px 18px 34px 20px / 20px 32px 18px 30px; rotate: -1.4deg;
    box-shadow: 9px 11px 0 color-mix(in srgb, var(--accent-pink) 28%, transparent);
}
html.rp-stage[data-stage-page="draw"] #drawing-screen .drawing-prompt:has(> .df-card-vote:not([hidden])) { padding-bottom: 64px; }
html.rp-stage[data-stage-page="draw"] .drawing-prompt-label { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
html.rp-stage[data-stage-page="draw"] .drawing-prompt-word { font-size: 40px; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-area { display: contents; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-toolbar { grid-column: 2; grid-row: 1; align-self: end; gap: 10px; padding: 0 0 14px; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-container { grid-column: 2; grid-row: 2; flex: none; width: 700px; height: 440px; min-height: 0; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-actions { grid-column: 1; grid-row: 3; align-self: start; justify-content: center; padding: 28px 0 0; }
html.rp-stage[data-stage-page="draw"] #drawing-screen .canvas-actions .btn-play { flex: none; }
html.rp-stage[data-stage-page="draw"] .color-btn { width: 34px; height: 34px; }
html.rp-stage[data-stage-page="draw"] .brush-size-btn { width: 40px; height: 40px; }
html.rp-stage[data-stage-page="draw"] .tool-btn { height: 40px; padding: 0 16px; font-size: 16px; }
html.rp-stage[data-stage-page="draw"] .submitted-text { font-size: 28px; }
html.rp-stage[data-stage-page="draw"] .submitted-hint { font-size: 19px; }
/* Presenting and voting: the /tv/ step in place of the phone's title, drawing and buttons. */
html.rp-stage[data-stage-page="draw"] :is(#presenting-screen, #voting-screen) > .screen-content {
    max-width: none; justify-content: safe center; align-items: center; min-height: 100%; padding-top: 96px; padding-bottom: 32px;
}
html.rp-stage[data-stage-page="draw"] :is(#presenting-screen, #voting-screen) > .screen-content > :is(.game-header, .title, .subtitle, .drawing-display, .vote-options, .artist-notice) { display: none !important; }
html.rp-stage[data-stage-page="draw"] .screen-content > .dws-root { flex: none; width: 100%; max-width: 1180px; margin: 0 auto; }
html.rp-stage[data-stage-page="draw"] .dws-root.is-presenting .tv-draw-slot:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: 14px; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section { gap: 18px; width: 820px; max-width: 100%; margin: 0; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .input { flex: 1 1 0; min-width: 0; height: 64px; padding: 0 24px; font-size: 24px; border-radius: 16px; border: 2px solid var(--accent-pink); }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .btn-join { flex: none; width: auto; min-width: 200px; height: 64px; margin: 0; font-size: 19px; border-radius: 32px; color: #fff; background: var(--accent-pink); border-color: transparent; }
html.rp-stage[data-stage-page="draw"] .dws-root .fake-input-section .btn-join:disabled { color: var(--text-secondary); background: var(--df-line); }
html.rp-stage[data-stage-page="draw"] .dws-root #presenting-status:not(:empty) { margin: 0; font-size: 20px; padding: 8px 20px; }
html.rp-stage[data-stage-page="draw"] #voting-screen .stage-keys-hint { margin-top: 18px; }
html.rp-stage[data-stage-page="draw"] #voting-screen:has(.dws-root:is(.is-locked, :not(.is-votable))) .stage-keys-hint { visibility: hidden; }
/* Round results: the /tv/ layout in the /tv/ view's box under the top bar. */
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal { overflow: visible; }
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal .rr-container { inset: 92px 40px 0; }
html.rp-stage[data-stage-page="draw"] #reveal-container.qs-reveal .rr-context.df-reveal-prompt {
    padding: 18px 18px 60px; border-radius: var(--cut-2); rotate: -1deg; box-shadow: 8px 10px 0 rgb(23 25 31 / 10%);
}

/* Round results (reveal-results.js): a wider column. */
/* .rr-container is absolute over the whole screen, so the column is set on its screens. */
html.rp-stage[data-stage-page="hundred"] #reveal-container .rr-container { zoom: 1.35; }
html.rp-stage[data-stage-page="hundred"] #reveal-container :is(.rr-screen1, .rr-screen2) { padding-left: max(20px, calc(50% - 330px)); padding-right: max(20px, calc(50% - 330px)); padding-top: 64px; }
/* Final results: the shared game-end board and buttons, bigger, in the middle. */
html.rp-stage:is([data-stage-page="quiz"], [data-stage-page="melody"], [data-stage-page="hundred"], [data-stage-page="truth"], [data-stage-page="quiplash"], [data-stage-page="fibbage"], [data-stage-page="wyr"], [data-stage-page="knowme"], [data-stage-page="geo"], [data-stage-page="draw"]) .results-content { zoom: 1.3; width: 520px; max-width: none; margin: 0 auto; padding-left: 0; padding-right: 0; }

/* The keys hint under the answers (stage only; main.ts takes A–D, 1–4 and the Russian ФИСВ). */
.stage-keys-hint { display: none; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary, #cbc4e6); font-size: 18px; }
.stage-keys-hint kbd {
    display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; font: 800 16px/1 var(--st-display, system-ui);
    color: var(--text-primary, #fff); border: 1.5px solid currentColor; border-radius: 9px; box-shadow: 0 3px 0 rgb(0 0 0 / 30%);
}

/* ════════════════════ Бункер (client/mini-games/bunker/) ════════════════════
   Owner 2026-10-30 «бункер онб пк - не тот формат», «наборы не тот формат»: the onboarding and the packs in the stage
   look of the other games (the shared lists above include [data-stage-page="bunker"]); the round screens keep the
   phone's column in the middle of the stage. The page sizes its screens in 100dvh, which under the stage zoom is taller
   than the window (the buttons fell under the bottom edge): --app-height is the window in stage px. */
html.rp-stage[data-stage-page="bunker"] main,
html.rp-stage[data-stage-page="bunker"] #onboarding-screen,
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-container { min-height: var(--app-height, 100dvh); }
/* A 16:9 window has a 720px stage: the rules' 3–4 line texts need the picture at 260px and tighter gaps, or «Пропустить» /
   «Далее» fell under the bottom edge (1920×1080, 1366×768). */
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-container { padding-top: 8px; padding-bottom: 16px; box-sizing: border-box; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-icon:has(> picture > img, > img),
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-icon img { width: 260px; height: 260px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .slide-title { margin-top: 12px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-dots { margin-bottom: 16px; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-slides { padding-top: 0; }
html.rp-stage[data-stage-page="bunker"] #onboarding-screen .onboarding-dots { margin-top: 12px; }
html.rp-stage[data-stage-page="bunker"] .screen .bottom-section.packs-compact-actions > .btn-additional-settings { flex-grow: 0; padding-inline: 12px; font-size: 14px; }
html.rp-stage[data-stage-page="bunker"] .screen:not(#onboarding-screen):not(#packs-screen) { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
html.rp-stage[data-stage-page="bunker"] .screen:not(#onboarding-screen):not(#packs-screen) :is(.btn-play, .btn-additional-settings) { width: 100%; white-space: normal; }

/* «Полоска очков» on the stage (see the strip rules above): the layouts with fixed heights give the strip its band by shrinking their tallest block by ~70 px. */
html.rp-stage[data-stage-page="im"] .mms-root.is-voting .tv-meme-table { height: 370px; }
html.rp-stage[data-stage-page="im"] #association-screen .mms-root.is-voting .tv-meme-table { height: 300px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table:not(.is-captions) { height: 340px; }
html.rp-stage[data-stage-page="meme"] #choosing-screen .mms-root .tv-meme-table.is-captions { max-height: 340px; grid-auto-rows: minmax(84px, auto); }
/* «Обновить руку» goes to the free corner under the prompt (left column), above the strip, so the hand keeps its size. */
html.rp-stage[data-stage-page="meme"] #choosing-screen .game-content:has(> .rp-score-strip) > .btn-refresh-hand { position: fixed; left: 96px; bottom: 112px; z-index: 6; }
html.rp-stage[data-stage-page="meme"] .mms-root.is-voting .tv-meme-table:not(.is-captions) { height: 420px; }
html.rp-stage[data-stage-page="meme"] .mms-root .tv-meme-table.is-captions { max-height: 440px; }
html.rp-stage[data-stage-page="jh"] .game-shell .jhs-strip { height: 150px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(#hand:empty) .jhs-strip { height: 220px; }
html.rp-stage[data-stage-page="jh"] .game-shell:has(> .rp-score-strip) .waiting-card { padding-top: 12px; padding-bottom: 12px; }
html.rp-stage[data-stage-page="jh"] .hand-card { flex-basis: 100px; }
html.rp-stage[data-stage-page="draw"] .dws-root.is-presenting .tv-draw-frame > img { height: 270px; }