with an optional
.connection-spinner and a .connection-text / [data-connection-text] / #connection-copy element.
Toggled by shared/client/connection-overlay.ts (adds/removes .visible).
Link it BEFORE the game's stylesheet and *-theme.css: games tune it through the custom
properties below or override these rules directly (theme selectors stay more specific). */
.connection-overlay {
position: fixed;
inset: 0;
z-index: var(--rp-connection-z, 100);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rp-connection-gap, 16px);
color: var(--rp-connection-color, inherit);
background: var(--rp-connection-bg, rgba(13, 19, 41, 0.9));
}
.connection-overlay.visible {
display: flex;
}
.connection-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--rp-connection-track, var(--bg-card, rgba(255, 255, 255, 0.1)));
border-top-color: var(--rp-connection-arc, var(--accent-primary, #fff));
border-radius: 50%;
animation: rp-connection-spin 0.8s linear infinite;
}
@keyframes rp-connection-spin {
to { transform: rotate(360deg); }
}
.connection-text {
color: var(--rp-connection-text, var(--text-secondary));
font-size: 16px;
}
/* /drawful/style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--accent-pink: #e83e8c;
--accent-pink-dark: #c2185b;
--accent-coral: #ff6b6b;
--accent-green: #4ade80;
}
/* ==================== */
/* Screen System */
/* ==================== */
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ==================== */
/* Typography */
/* ==================== */
/* ==================== */
/* Buttons */
/* ==================== */
@media (hover: hover) {
.btn-join:hover {
background: var(--accent-pink);
color: var(--text-primary);
}
}
.btn-join.active {
background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-pink-dark) 100%);
border-color: transparent;
color: var(--text-primary);
box-shadow: 0 4px 20px rgba(232, 62, 140, 0.3);
}
.btn-play.outlined {
background: transparent;
border: 2px solid var(--accent-pink);
color: var(--accent-pink);
box-shadow: none;
}
@media (hover: hover) {
.btn-copy:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
}
.btn-secondary {
padding: 12px 24px;
background: var(--bg-card);
border: 2px solid transparent;
border-radius: 16px;
color: var(--text-primary);
font-size: 16px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
}
@media (hover: hover) {
.btn-secondary:hover {
border-color: var(--accent-blue);
}
}
/* ==================== */
/* Inputs */
/* ==================== */
.name-input {
margin-bottom: 20px;
text-align: center;
}
.code-input {
width: 100%;
text-align: center;
font-size: 24px;
font-weight: 700;
letter-spacing: 8px;
text-transform: uppercase;
font-family: 'Courier New', monospace;
}
/* ==================== */
/* Main Screen */
/* ==================== */
.main-content {
justify-content: center;
align-items: center;
}
.game-logo {
font-size: 80px;
margin-bottom: 16px;
}
.actions-columns {
display: flex;
gap: 16px;
width: 100%;
align-items: stretch;
margin-top: 24px;
}
.action-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
min-width: 0;
}
.col-divider {
width: 1px;
background: rgba(255, 255, 255, 0.1);
}
.error-message {
color: var(--error);
font-size: 14px;
text-align: center;
min-height: 20px;
margin-top: 16px;
}
/* ==================== */
/* Lobby Screen */
/* ==================== */
.qr-code-block {
display: flex;
justify-content: center;
margin: 0 0 16px;
}
.qr-code-img {
width: 160px;
height: 160px;
border-radius: 12px;
border: 2px solid rgba(255, 255, 255, 0.1);
background: #ffffff;
padding: 8px;
}
/* ==================== */
/* Game Header */
/* ==================== */
.game-content {
padding-top: calc(24px + env(safe-area-inset-top, 0px));
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0 16px 0 40px;
}
#drawing-screen > .game-header {
padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.round-badge {
background: var(--bg-card);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
}
.timer-badge {
width: 48px;
height: 48px;
background: var(--accent-pink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
}
.timer-badge.warning {
background: var(--error);
animation: pulse 0.5s ease infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
/* ==================== */
/* Drawing Screen */
/* ==================== */
.drawing-prompt {
text-align: center;
padding: 12px 16px;
background: var(--bg-card);
border-radius: 12px;
margin: 0 16px 12px;
}
.drawing-prompt-label {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.drawing-prompt-word {
font-size: 24px;
font-weight: 700;
color: var(--accent-pink);
}
.canvas-area {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 16px;
min-height: 0;
}
.canvas-container {
flex: 1;
position: relative;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
min-height: 280px;
}
#drawing-canvas {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: none;
}
/* Canvas Toolbar */
.canvas-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
flex-wrap: wrap;
justify-content: center;
}
.color-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.color-btn.active {
border-color: var(--text-primary);
transform: scale(1.2);
}
.toolbar-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.15);
margin: 0 4px;
}
.brush-size-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: 2px solid transparent;
background: var(--bg-card);
cursor: pointer;
transition: all 0.2s;
}
.brush-size-btn.active {
border-color: var(--accent-blue);
}
.brush-dot {
border-radius: 50%;
background: var(--text-primary);
}
.tool-btn {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 12px;
border-radius: 8px;
border: 2px solid transparent;
background: var(--bg-card);
color: var(--text-secondary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
}
.tool-btn.active {
border-color: var(--error);
color: var(--error);
}
@media (hover: hover) {
.tool-btn:hover {
color: var(--text-primary);
}
}
.canvas-actions {
display: flex;
gap: 8px;
padding: 8px 0;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.canvas-actions .btn-play {
flex: 1;
}
.submitted-overlay {
display: none;
position: absolute;
inset: 0;
background: rgba(13, 19, 41, 0.85);
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
z-index: 5;
border-radius: 12px;
}
.submitted-overlay.visible {
display: flex;
}
.submitted-icon {
font-size: 48px;
}
.submitted-text {
font-size: 18px;
font-weight: 600;
color: var(--success);
}
.submitted-hint {
font-size: 14px;
color: var(--text-secondary);
}
/* ==================== */
/* Presenting Screen */
/* ==================== */
.presenting-content {
align-items: center;
}
.drawing-display {
width: 100%;
max-width: 380px;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
margin-bottom: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.drawing-display img {
display: block;
width: 100%;
height: auto;
}
.fake-input-section {
width: 100%;
display: flex;
gap: 12px;
margin-top: 8px;
}
.fake-input-section .input {
flex: 1;
}
.artist-notice {
text-align: center;
color: var(--text-secondary);
font-size: 15px;
padding: 20px;
background: var(--bg-card);
border-radius: 12px;
margin-top: 16px;
}
/* ==================== */
/* Voting Screen */
/* ==================== */
.vote-options {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.vote-option {
display: flex;
align-items: center;
padding: 16px 20px;
background: var(--bg-card);
border: 2px solid transparent;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
color: var(--text-primary);
text-align: left;
width: 100%;
font-size: 16px;
}
@media (hover: hover) {
.vote-option:hover:not(.selected):not(.disabled):not(.excluded) {
border-color: var(--accent-blue);
transform: translateX(4px);
}
}
.vote-option.selected {
border-color: var(--accent-blue);
background: rgba(74, 108, 247, 0.15);
cursor: default;
}
.vote-option.disabled {
cursor: default;
opacity: 0.7;
}
/* The player's own fake: shown with a «Ваш ответ» label, not votable. */
.vote-option.excluded {
cursor: default;
pointer-events: none;
border-style: dashed;
border-color: var(--text-secondary);
}
.vote-option.excluded .option-letter,
.vote-option.excluded .option-text {
opacity: 0.55;
}
.option-own {
flex-shrink: 0;
margin-left: 10px;
padding: 4px 10px;
border-radius: 999px;
background: var(--accent-blue);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.vote-option.readonly {
cursor: default;
pointer-events: none;
}
.option-letter {
width: 40px;
height: 40px;
background: var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
margin-right: 16px;
flex-shrink: 0;
}
.option-text {
font-size: 16px;
font-weight: 500;
flex: 1;
}
/* ==================== */
/* Reveal Screen */
/* ==================== */
.reveal-content {
align-items: center;
}
.reveal-options {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.reveal-option {
padding: 14px 16px;
background: var(--bg-card);
border: 2px solid transparent;
border-radius: 12px;
transition: all 0.3s ease;
}
.reveal-option.is-real {
border-color: var(--rp-correct);
background: color-mix(in srgb, var(--rp-correct) 10%, transparent);
}
.reveal-option.is-fake {
border-color: var(--accent-coral);
background: rgba(255, 107, 107, 0.05);
}
.reveal-option-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.reveal-option-text {
font-size: 16px;
font-weight: 600;
}
.reveal-option-tag {
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 10px;
}
.reveal-option-tag.real {
background: var(--rp-correct);
color: #000;
}
.reveal-option-tag.fake {
background: var(--accent-coral);
color: #000;
}
.reveal-option-author {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.reveal-option-voters {
font-size: 13px;
color: var(--accent-blue);
}
/* ==================== */
/* Mini Scoreboard */
/* ==================== */
.mini-scoreboard::-webkit-scrollbar {
display: none;
}
/* ==================== */
/* Scoreboard */
/* ==================== */
/* ==================== */
/* Results Screen */
/* ==================== */
/* ==================== */
/* Connection Overlay */
/* ==================== */
/* Base styles: ../connection-overlay.css */
.connection-overlay { --rp-connection-arc: var(--accent-pink); }
/* ==================== */
/* Many players fix */
/* ==================== */
#voting-screen,
#presenting-screen {
overflow-y: auto;
}
#voting-screen .drawing-display {
max-width: 260px;
margin: 0 auto 12px;
flex-shrink: 0;
}
#presenting-screen .drawing-display {
max-width: 300px;
margin: 0 auto 12px;
flex-shrink: 0;
}
/* ==================== */
/* Responsive */
/* ==================== */
@media (max-width: 480px) {
.screen-content {
padding: 24px 16px;
padding-top: calc(24px + env(safe-area-inset-top, 0px));
}
.title { font-size: 24px; }
.game-logo { font-size: 60px; }
.room-code-display {
font-size: 36px;
padding: 12px 24px;
letter-spacing: 8px;
}
.canvas-container { min-height: 240px; }
.color-btn { width: 24px; height: 24px; }
.timer-badge { width: 42px; height: 42px; font-size: 18px; }
}
@media (min-width: 768px) {
.screen-content { padding: 50px 40px; }
.title { font-size: 32px; }
.canvas-container { min-height: 360px; }
.timer-badge { width: 56px; height: 56px; font-size: 24px; }
}
/* Player avatar next to a name inside a reveal line («Автор рисунка: [avatar] Аня»). */
.df-who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.df-who-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.df-who-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; transform: scale(1.3); }
.df-who-avatar-letter { color: #fff; background: var(--df-ink, var(--accent-primary)); }
/* /confirm-dialog.css */
/*
* Back/exit confirmation dialog. Game Themes recolour it through the --rp-dialog-* tokens
* (shared with settings-popup.css), set once on :root or [data-rp-game] in the theme:
* --rp-dialog-overlay, --rp-dialog-bg, --rp-dialog-border, --rp-dialog-shadow, --rp-dialog-radius,
* --rp-dialog-title, --rp-dialog-text, --rp-dialog-primary-bg, --rp-dialog-primary-text,
* --rp-dialog-primary-shadow, --rp-dialog-btn-radius, --rp-dialog-secondary-bg,
* --rp-dialog-secondary-border, --rp-dialog-secondary-text.
* Fallbacks are the original navy look, so a game without tokens is unchanged. Unset tokens
* follow related ones: secondary text = --rp-dialog-text; in the settings popup the value and
* −/+ text = --rp-dialog-title, the toggle text = --rp-dialog-text and the «on» toggle = the primary button.
*/
.confirm-dialog-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--rp-dialog-overlay, rgba(0, 0, 0, 0.85));
z-index: 1000;
justify-content: center;
align-items: center;
padding: 24px;
}
.confirm-dialog-overlay.active {
display: flex;
}
.confirm-dialog-modal {
background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
border: var(--rp-dialog-border, none);
box-shadow: var(--rp-dialog-shadow, none);
border-radius: var(--rp-dialog-radius, 24px);
padding: 32px 24px;
max-width: 340px;
width: 100%;
text-align: center;
}
.confirm-dialog-title {
font-size: 20px;
font-weight: 700;
color: var(--rp-dialog-title, #ffffff);
margin-bottom: 8px;
}
.confirm-dialog-subtitle {
font-size: 14px;
color: var(--rp-dialog-text, #8892b0);
margin-bottom: 24px;
}
.confirm-dialog-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.confirm-dialog-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: var(--rp-dialog-btn-radius, 30px);
font-size: 16px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.confirm-dialog-btn-confirm {
background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
color: var(--rp-dialog-primary-text, white);
box-shadow: var(--rp-dialog-primary-shadow, none);
}
.confirm-dialog-btn-cancel {
background: var(--rp-dialog-secondary-bg, transparent);
border: 2px solid var(--rp-dialog-secondary-border, #3a4167);
color: var(--rp-dialog-secondary-text, var(--rp-dialog-text, #8892b0));
}
/* Optional «why are you leaving» chips (ConfirmDialog.show(..., { reasons: true })). */
.confirm-dialog-reasons {
margin: -8px 0 20px;
}
.confirm-dialog-reasons[hidden] { display: none; }
.confirm-dialog-reasons-title {
font-size: 13px;
color: var(--rp-dialog-text, #8892b0);
margin-bottom: 10px;
}
.confirm-dialog-reason-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.confirm-dialog-reason {
min-height: 36px;
padding: 7px 14px;
border: 1.5px solid var(--rp-dialog-secondary-border, #3a4167);
border-radius: 18px;
background: transparent;
color: var(--rp-dialog-title, #ffffff);
font: inherit;
font-size: 14px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.confirm-dialog-reason:active { transform: scale(0.95); }
.confirm-dialog-reason[aria-pressed="true"] {
background: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
border-color: transparent;
color: var(--rp-dialog-primary-text, #ffffff);
}
.confirm-dialog-reason:focus-visible { outline: 2px solid var(--rp-dialog-primary-text, #ffffff); outline-offset: 2px; }
/* /content-report.css */
/*
* Content report sheet (client/assets/js/content-report.js) and the small flag button
* games put on their card. Shared component: games only set the --rp-report-* tokens.
* Defaults sit in :where(:root) (zero specificity), so a game theme's :root tokens win whether
* its stylesheet loads before or after this one.
*/
:where(:root) {
--rp-report-surface: #1f2438;
--rp-report-text: #ffffff;
--rp-report-muted: #a7aec8;
--rp-report-line: rgba(255, 255, 255, 0.14);
--rp-report-chip: rgba(255, 255, 255, 0.08);
--rp-report-accent: #ff3b6f;
--rp-report-accent-ink: #ffffff;
--rp-report-error: var(--rp-wrong, #ff8a9a);
--rp-report-radius: 24px;
--rp-report-button-radius: 30px;
--rp-report-flag: rgba(255, 255, 255, 0.55);
}
/* Flag button on the card: 44 px hit area, quiet until pressed. */
.rp-report-flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--rp-report-flag);
font-size: 18px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.rp-report-flag:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.08); }
.rp-report-flag:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
@media (hover: hover) { .rp-report-flag:hover { color: var(--rp-report-text); } }
.rp-report {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: flex-end;
justify-content: center;
pointer-events: none;
}
.rp-report.is-open { pointer-events: auto; }
.rp-report__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 200ms ease;
}
.rp-report.is-open .rp-report__backdrop { opacity: 1; }
.rp-report__sheet {
position: relative;
width: 100%;
max-width: 440px;
max-height: calc(100dvh - 24px);
overflow-y: auto;
padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 0px));
border-radius: var(--rp-report-radius) var(--rp-report-radius) 0 0;
background: var(--rp-report-surface);
color: var(--rp-report-text);
font-family: inherit;
transform: translateY(100%);
transition: transform 240ms cubic-bezier(.2, .9, .3, 1);
}
.rp-report.is-open .rp-report__sheet { transform: none; }
@media (min-width: 600px) and (min-height: 560px) {
.rp-report { align-items: center; padding: 24px; }
.rp-report__sheet { border-radius: var(--rp-report-radius); padding-bottom: 20px; }
}
.rp-report__title {
margin: 0 0 8px;
font-family: Unbounded, Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.2;
text-wrap: balance;
}
.rp-report__card {
margin: 0 0 16px;
padding: 8px 12px;
border-left: 3px solid var(--rp-report-accent);
border-radius: 4px;
background: var(--rp-report-chip);
color: var(--rp-report-muted);
font-size: 15px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.rp-report__reasons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.rp-report__chip {
min-height: 44px;
padding: 8px 16px;
border: 1px solid var(--rp-report-line);
border-radius: 999px;
background: var(--rp-report-chip);
color: var(--rp-report-text);
font: inherit;
font-size: 16px;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.rp-report__chip:active { transform: scale(0.96); }
.rp-report__chip[aria-pressed="true"] {
border-color: var(--rp-report-accent);
background: var(--rp-report-accent);
color: var(--rp-report-accent-ink);
}
.rp-report__comment {
display: block;
width: 100%;
min-height: 64px;
padding: 12px;
border: 1px solid var(--rp-report-line);
border-radius: 16px;
background: transparent;
color: var(--rp-report-text);
font: inherit;
font-size: 16px;
resize: vertical;
box-sizing: border-box;
}
.rp-report__comment::placeholder { color: var(--rp-report-muted); opacity: 1; }
.rp-report__status {
min-height: 20px;
margin: 8px 0;
color: var(--rp-report-error);
font-size: 14px;
}
.rp-report__actions {
display: flex;
gap: 8px;
}
.rp-report__button {
flex: 1;
min-height: 48px;
padding: 12px 16px;
border: 1px solid transparent;
border-radius: var(--rp-report-button-radius);
font: inherit;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: opacity 150ms ease, transform 150ms ease;
}
.rp-report__button:active:not(:disabled) { transform: scale(0.97); }
.rp-report__button--primary { background: var(--rp-report-accent); color: var(--rp-report-accent-ink); }
.rp-report__button--secondary { border-color: var(--rp-report-line); background: transparent; color: var(--rp-report-text); }
.rp-report__button:disabled { opacity: 0.45; cursor: default; }
.rp-report__chip:focus-visible,
.rp-report__button:focus-visible,
.rp-report__comment:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
.rp-report__sheet.is-done {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding-top: 32px;
text-align: center;
}
.rp-report__sheet.is-done .rp-report__button { flex: none; width: 100%; }
.rp-report__done-mark {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--rp-report-accent);
position: relative;
}
.rp-report__done-mark::after {
content: "";
position: absolute;
inset: 14px;
background: var(--rp-report-accent-ink);
-webkit-mask: var(--rp-icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")) center / contain no-repeat;
mask: var(--rp-icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")) center / contain no-repeat;
}
.rp-report__done-text { margin: 0; font-size: 17px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
.rp-report__backdrop,
.rp-report__sheet,
.rp-report-flag,
.rp-report__chip,
.rp-report__button { transition: none; }
}
/* Like / dislike under the card (ContentReport.attachVotes): quiet thumbs, filled when chosen. */
.rp-card-vote[hidden] { display: none; }
.rp-card-vote {
display: flex;
justify-content: center;
gap: 6px;
}
.rp-card-vote__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--rp-report-flag);
font-size: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.rp-card-vote__btn--dislike .rp-icon { transform: rotate(180deg); }
.rp-card-vote__btn--report { margin-left: 6px; color: var(--rp-report-flag); font-size: 18px; }
.rp-card-vote__btn[aria-pressed="true"] { color: var(--rp-report-accent); }
.rp-card-vote__btn:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.08); }
.rp-card-vote__btn:focus-visible { outline: 2px solid var(--rp-report-accent); outline-offset: 2px; }
@media (hover: hover) { .rp-card-vote__btn:hover:not([aria-pressed="true"]) { color: var(--rp-report-text); } }
/* Thumbs + flag as the last row inside a content card (word, task, location): one look in every game.
The game sets --rp-report-flag on its card to a muted tone of the card's ink (light cards need a dark one). */
.rp-card-vote--in-card { margin: 14px -8px -14px; }
.rp-card-vote--in-card .rp-card-vote__btn--report { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
.rp-card-vote__btn[aria-pressed="true"] .rp-icon { animation: rp-card-vote-pop 260ms ease-out; }
.rp-card-vote__btn--dislike[aria-pressed="true"] .rp-icon { animation-name: rp-card-vote-pop-down; }
}
@keyframes rp-card-vote-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rp-card-vote-pop-down { 0% { transform: rotate(180deg) scale(0.7); } 60% { transform: rotate(180deg) scale(1.18); } 100% { transform: rotate(180deg) scale(1); } }
/* /pause-overlay.css */
/*
* Shared round pause button + overlay (see pause-overlay.js). Load before the game's styles.css;
* game themes keep overriding .btn-pause / .pause-overlay / .pause-overlay-text directly.
* Per-game differences go through custom properties (fallbacks are the common look):
* --pause-btn-bg, --pause-btn-border, --pause-btn-color, --pause-btn-padding,
* --pause-btn-font-size, --pause-btn-hover-bg, --pause-btn-hover-color,
* --pause-overlay-bg, --pause-overlay-text-color.
* Layout-only properties (align-self, flex-shrink, min-height, z-index) stay in the game.
* The overlay is position:absolute — the game's screen must be its positioned ancestor.
*/
.btn-pause {
background: var(--pause-btn-bg, rgba(255, 255, 255, 0.1));
border: 1px solid var(--pause-btn-border, rgba(255, 255, 255, 0.2));
color: var(--pause-btn-color, var(--text-secondary));
padding: var(--pause-btn-padding, 6px 16px);
border-radius: 16px;
font-size: var(--pause-btn-font-size, 13px);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
@media (hover: hover) {
.btn-pause:hover {
background: var(--pause-btn-hover-bg, rgba(255, 255, 255, 0.2));
color: var(--pause-btn-hover-color, var(--text-primary));
}
}
.pause-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--pause-overlay-bg, rgba(13, 19, 41, 0.95));
z-index: 50;
align-items: center;
justify-content: center;
}
.pause-overlay.active {
display: flex;
cursor: pointer;
}
.pause-overlay-text {
font-size: 32px;
font-weight: 700;
color: var(--pause-overlay-text-color, var(--text-secondary));
}
/*
* Online games (shared/client/online-pause.ts): the host's «Пауза» button (in the round's header, else in the top right corner) and
* the «Пауза» / «Ждём хоста…» screen every phone sees over the game. Same tokens as above.
*/
.rp-online-pause-btn {
position: fixed;
top: calc(20px + env(safe-area-inset-top, 0px));
right: 16px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.rp-online-pause-btn[hidden] { display: none; }
/* Inside the round's .game-header: between the round title and the timer. */
.rp-online-pause-btn--inline {
position: static;
flex-shrink: 0;
margin: 0 8px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#online-pause-overlay.pause-overlay--online,
#pause-overlay.pause-overlay--local,
.pause-overlay.pause-overlay--local.pause-overlay--local {
/* One palette in every game (owner 2026-10-21: game themes made the title unreadable): a dark
scrim with white text, whatever the game's own --text-* and --pause-* tokens are. */
--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);
background: rgba(9, 11, 20, 0.9);
color: var(--rp-pause-ink);
position: fixed;
z-index: 980;
padding: 24px 16px;
box-sizing: border-box;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.pause-overlay--online.active {
cursor: default;
animation: rp-pause-in 220ms ease-out;
}
.rp-pause-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
max-width: 340px;
text-align: center;
}
.rp-pause-badge {
display: grid;
place-items: center;
width: 76px;
height: 76px;
margin-bottom: 4px;
border-radius: 50%;
background: var(--rp-pause-chip);
border: 1px solid var(--rp-pause-line);
color: var(--rp-pause-ink);
font-size: 30px;
}
.pause-overlay--away .rp-pause-badge .rp-icon { animation: rp-pause-wait 1.6s ease-in-out infinite; }
#online-pause-overlay .pause-overlay-text,
.pause-overlay--local .pause-overlay-text { color: var(--rp-pause-ink); }
/* One-phone games (pause-overlay.js): the same card; a tap anywhere still resumes. */
.pause-overlay--local.active { animation: rp-pause-in 220ms ease-out; }
/* «Ждём игрока…»: the player the game waits on, as an avatar chip. */
.rp-pause-player {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
padding: 4px 14px 4px 4px;
border-radius: 999px;
background: var(--rp-pause-chip);
border: 1px solid var(--rp-pause-line);
color: var(--rp-pause-ink);
font-weight: 600;
}
.rp-pause-player[hidden] { display: none; }
.rp-pause-player-avatar {
display: grid;
place-items: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
background: var(--rp-pause-line);
font-size: 13px;
font-weight: 700;
}
.rp-pause-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rp-pause-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pause-hint {
font-size: 15px;
line-height: 1.4;
color: var(--rp-pause-muted);
}
/* Room code and join QR on the network pause (owner 2026-11-02: «добавь qr и код комнаты в паузу телефона»):
the room screen's invite card (client/create-room .invite-card) in the pause palette. Tap on the code copies
the invite. Not on the /tv/ screen, which shows its own code. */
.rp-pause-invite {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
border-radius: 18px;
background: var(--rp-pause-chip);
border: 1px solid var(--rp-pause-line);
text-align: left;
}
.rp-pause-invite-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-pause-invite-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rp-pause-muted);
}
.rp-pause-invite-code {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 42px;
padding: 4px 12px 4px 14px;
background: transparent;
color: var(--rp-pause-ink);
border: 1.5px solid var(--rp-pause-line);
border-radius: 12px;
font: 800 24px/1.1 monospace;
letter-spacing: 5px;
cursor: pointer;
transition: transform 0.12s ease;
}
.rp-pause-invite-code:active { transform: scale(0.97); }
.rp-pause-invite-copy {
width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8;
fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
transition: opacity 0.2s ease;
}
.rp-pause-invite-code.is-copied .rp-pause-invite-copy { opacity: 0; }
.rp-pause-invite-qr {
width: 84px;
height: 84px;
flex-shrink: 0;
padding: 5px;
box-sizing: border-box;
border-radius: 12px;
background: #ffffff;
image-rendering: pixelated;
}
#online-pause-overlay.tv-pause .rp-pause-invite { display: none; }
#online-pause-overlay .rp-pause-resume,
.pause-overlay--local .rp-pause-resume.rp-pause-resume {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
/* The same light pill in every game, not the game's .btn-play colours. */
background: var(--rp-pause-ink);
color: #12131a;
border: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.rp-pause-exit {
margin-top: 4px;
padding: 10px 16px;
background: none;
border: none;
color: var(--rp-pause-muted);
font: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.pause-overlay--online [hidden] { display: none; }
/* The host's «Убрать игрока» (shared/client/online-pause.ts): an outlined action on the card, like «Завершить
игру»; it swaps the card for the list (avatar chips with the room screen's quiet ✕, client/create-room
.player-remove), which scrolls for any number of players; «Назад» brings the card back. */
.rp-pause-roster-open,
.rp-pause-roster-back {
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;
transition: transform 0.12s ease;
}
.rp-pause-roster-open:active,
.rp-pause-roster-back:active { transform: scale(0.97); }
.rp-pause-card--roster > :not(.rp-pause-roster) { display: none !important; }
.rp-pause-roster {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
width: 100%;
}
.rp-pause-roster-title { text-align: center; }
.rp-pause-roster-list {
display: flex;
flex-direction: column;
gap: 8px;
/* Ten and more players scroll here; the title and «Назад» stay on screen. */
max-height: calc(100vh - 240px);
max-height: calc(100dvh - 240px);
overflow-y: auto;
overscroll-behavior: contain;
}
.rp-pause-roster-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rp-pause-roster-chip { min-width: 0; }
.rp-pause-roster-row--offline .rp-pause-roster-chip { opacity: 0.45; }
/* «Ушёл»: quiet, like the room screen's «Не в сети», between the chip and the ✕. */
.rp-pause-roster-status {
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--rp-pause-muted);
white-space: nowrap;
}
.rp-pause-remove {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--rp-pause-muted);
cursor: pointer;
transition: transform 0.12s ease;
}
.rp-pause-remove::after { content: ''; position: absolute; inset: -4px; }
.rp-pause-remove:active { color: #f43f5e; background: rgba(244, 63, 94, 0.13); transform: scale(0.92); }
.rp-pause-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* The game behind the pause stops on the spot: its animations hold until the game goes on. */
html.rp-game-paused .screen,
html.rp-game-paused .screen *,
html.rp-game-paused .screen *::before,
html.rp-game-paused .screen *::after {
animation-play-state: paused !important;
}
@keyframes rp-pause-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rp-pause-wait {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.pause-overlay--online.active,
.pause-overlay--away .rp-pause-badge .rp-icon { animation: none; }
}
/* /reveal-results.css */
/* ========================================
Reveal Results — Shared Module Styles
2-screen round-end reveal with animations
Colours default to a dark game. A light Game Theme sets the component tokens on its page
instead of restyling each class: --rr-ink / --rr-muted (text on the page),
--rr-card-ink / --rr-card-muted (text on cards and rows, default to the page ones),
--rr-surface / --rr-border (cards and rows), --rr-leading-surface / --rr-leading-border
(the leader's row), --rr-correct-surface / --rr-wrong-surface / --rr-correct-text (answer
cards; default to tints of --rp-correct / --rp-wrong).
======================================== */
/* Container */
.rr-container {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 5;
}
/* In-flow variant (container with .rr-flow, e.g. Геоугадайка under its results map): the reveal
follows the content above it and the page's screen scrolls, instead of covering the screen.
The shown screen stays in flow; the hidden one leaves it so it adds no empty space. */
.rr-flow > .rr-container {
position: relative;
inset: auto;
flex: none;
}
.rr-flow > .rr-container > .rr-screen1,
.rr-flow > .rr-container > .rr-screen2 {
position: absolute;
inset: 0 0 auto;
overflow: visible;
padding-top: 8px;
}
.rr-flow > .rr-container > .rr-screen1:not(.rr-hidden),
.rr-flow > .rr-container > .rr-screen2.rr-visible {
position: relative;
}
/* ========== Screen 1: Votes Reveal ========== */
.rr-screen1,
.rr-screen2 {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 20px;
padding-top: calc(56px + env(safe-area-inset-top, 0px));
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
transition: opacity 0.4s ease, transform 0.4s ease;
}
.rr-screen1.rr-hidden {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
.rr-screen2 {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
.rr-screen2.rr-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
/* Context area (question / image) */
.rr-context {
text-align: center;
margin-bottom: 20px;
opacity: 0;
animation: rrFadeIn 0.4s ease forwards;
}
.rr-context-text {
font-size: 18px;
font-weight: 600;
color: var(--rr-ink, #fff);
line-height: 1.4;
}
.rr-context-subtext {
font-size: 14px;
color: var(--rr-muted, rgba(255, 255, 255, 0.6));
margin-top: 8px;
}
/* A part that gives the round away (ctx.atEnd in reveal-results.js) keeps its place and fades in with the last answer. */
.rr-context .rr-held,
.rr-context .rr-held-done {
transition: opacity 0.5s ease;
}
.rr-context .rr-held {
opacity: 0;
visibility: hidden;
}
.rr-context-image {
max-width: 200px;
max-height: 150px;
border-radius: 12px;
margin: 0 auto 8px;
display: block;
object-fit: cover;
}
.rr-context-fourphoto {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
width: 200px;
margin: 0 auto 8px;
border-radius: 10px;
overflow: hidden;
}
.rr-context-fourphoto img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
display: block;
background: var(--bg-card, #252b4a);
}
.rr-context-drawing {
max-width: 240px;
max-height: 200px;
border-radius: 12px;
margin: 0 auto 8px;
display: block;
background: #fff;
object-fit: contain;
}
/* Options list */
.rr-options {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
/* Single option card */
.rr-option {
background: var(--rr-surface, rgba(255, 255, 255, 0.06));
border: 1px solid var(--rr-border, rgba(255, 255, 255, 0.1));
border-radius: 14px;
padding: 14px 16px;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.rr-option.rr-visible {
opacity: 1;
transform: translateX(0);
}
/* Correct option styling: tone comes from the game's --rp-correct; the ✓ mark carries the meaning without colour. */
.rr-option.rr-type-correct {
background: var(--rr-correct-surface, color-mix(in srgb, var(--rp-correct, #4ade80) 12%, transparent));
border-color: color-mix(in srgb, var(--rp-correct, #4ade80) 45%, transparent);
}
.rr-option.rr-type-correct .rr-option-text {
color: var(--rr-correct-text, var(--rp-correct, #4ade80));
}
/* Wrong option styling */
.rr-option.rr-type-wrong {
background: var(--rr-wrong-surface, color-mix(in srgb, var(--rp-wrong, #f87171) 8%, transparent));
border-color: color-mix(in srgb, var(--rp-wrong, #f87171) 22%, transparent);
}
/* Answer marks: shared upright ✓ / ✕ from answer-marks.css (shape, not only colour). */
.rr-option.rr-type-correct .rr-option-text::before,
.rr-option.rr-type-wrong .rr-option-text::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
margin-right: 8px;
vertical-align: -5px;
-webkit-mask: var(--rp-icon-check-badge) center / contain no-repeat;
mask: var(--rp-icon-check-badge) center / contain no-repeat;
}
.rr-option.rr-type-correct .rr-option-text::before {
background-color: var(--rr-correct-text, var(--rp-correct, #4ade80));
}
.rr-option.rr-type-wrong .rr-option-text::before {
-webkit-mask-image: var(--rp-icon-cross-badge);
mask-image: var(--rp-icon-cross-badge);
background-color: var(--rp-wrong, #f87171);
}
.rr-option-text:empty::before {
display: none !important;
}
/* Neutral option (Quiplash loser, etc.) */
.rr-option.rr-type-neutral {
background: var(--rr-surface, rgba(255, 255, 255, 0.04));
border-color: var(--rr-border, rgba(255, 255, 255, 0.08));
}
/* Option header */
.rr-option-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.rr-option-text {
font-size: 17px;
font-weight: 600;
color: var(--rr-card-ink, var(--rr-ink, #fff));
flex: 1;
word-break: break-word;
}
.rr-option-badge {
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 8px;
white-space: nowrap;
flex-shrink: 0;
}
.rr-option.rr-type-correct .rr-option-badge {
background: color-mix(in srgb, var(--rp-correct, #4ade80) 20%, transparent);
color: var(--rp-correct, #4ade80);
}
.rr-badge-quiplash {
background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
color: #fff !important;
font-size: 12px !important;
padding: 3px 10px !important;
animation: rrPulse 0.6s ease;
}
/* Vote count (Quiplash) */
.rr-vote-count {
font-size: 14px;
font-weight: 700;
color: var(--rr-muted, rgba(255, 255, 255, 0.7));
margin-left: auto;
flex-shrink: 0;
}
/* Option image (Imaginarium cards) */
.rr-option-image-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 4px 0;
}
.rr-option-image-card {
width: calc(33.333% - 8px);
min-width: 90px;
max-width: 120px;
border-radius: 10px;
overflow: hidden;
background: var(--rr-surface, rgba(255, 255, 255, 0.06));
border: 2px solid var(--rr-border, rgba(255, 255, 255, 0.1));
opacity: 0;
transform: scale(0.9);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.rr-option-image-card.rr-visible {
opacity: 1;
transform: scale(1);
}
.rr-option-image-card.rr-type-correct {
position: relative;
border-color: color-mix(in srgb, var(--rp-correct, #4ade80) 70%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--rp-correct, #4ade80) 30%, transparent);
}
.rr-option-image-card.rr-type-correct::before,
.rr-option-image-card.rr-type-correct::after {
content: "";
position: absolute;
top: 6px;
right: 6px;
z-index: 1;
width: 24px;
height: 24px;
}
.rr-option-image-card.rr-type-correct::before {
border-radius: 50%;
background: var(--rp-correct, #4ade80);
}
.rr-option-image-card.rr-type-correct::after {
z-index: 2;
background-color: var(--rp-correct-ink, #17191f);
-webkit-mask: var(--rp-icon-check) center / 15px no-repeat;
mask: var(--rp-icon-check) center / 15px no-repeat;
}
.rr-option-image-card img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
}
/* Three-panel comic option (Joking Hazard). It stays readable on phones
instead of shrinking all panels into a single narrow thumbnail. */
.rr-option-image-card.rr-option-comic {
width: 100%;
min-width: 0;
max-width: 620px;
}
.rr-option-comic-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
padding: 6px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
.rr-option-comic-strip img {
aspect-ratio: 295 / 420;
border-radius: 8px;
}
.rr-option-image-info {
padding: 6px 8px;
}
.rr-option-image-owner {
font-size: 11px;
font-weight: 600;
color: var(--rr-card-ink, var(--rr-ink, #fff));
}
.rr-option-image-voters {
font-size: 10px;
color: var(--rr-muted, rgba(255, 255, 255, 0.5));
margin-top: 2px;
}
/* «Автор:» / «Голосовали:» before the names on an image card (option.whoLabels, «Что за мем» 2026-11-02). */
.rr-option-image-label {
font-weight: 500;
color: var(--rr-muted, rgba(255, 255, 255, 0.5));
margin-right: 4px;
}
.rr-option-image-owner .rr-author-points {
margin-left: auto;
}
/* Author label */
.rr-author {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--rr-muted, rgba(255, 255, 255, 0.5));
margin-top: 8px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.rr-author.rr-visible {
opacity: 1;
transform: translateY(0);
}
.rr-author-label {
color: var(--rr-muted, rgba(255, 255, 255, 0.4));
}
.rr-author-name {
color: #ff9f43;
font-weight: 600;
}
.rr-author-points {
color: var(--rp-correct, #4ade80);
font-weight: 600;
margin-left: 4px;
}
/* Voters list */
.rr-voters {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
align-items: center;
}
.rr-voters-label {
font-size: 13px;
color: var(--rr-muted, rgba(255, 255, 255, 0.4));
font-weight: 500;
}
.rr-voter {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
padding: 4px 10px;
border-radius: 10px;
background: var(--rr-surface, rgba(255, 255, 255, 0.08));
color: var(--rr-muted, rgba(255, 255, 255, 0.8));
opacity: 0;
transform: scale(0.8);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.rr-voter.rr-visible {
opacity: 1;
transform: scale(1);
}
/* Player avatar (reveal-results.js _playerAvatar): photo, or the name's first letter on an accent tile. */
.rr-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-purple, #8b5cf6) 45%, transparent);
color: #fff;
font-weight: 700;
line-height: 1;
}
.rr-avatar.has-photo {
background: none;
}
.rr-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.5);
}
.rr-voter-avatar,
.rr-author-avatar {
width: 18px;
height: 18px;
font-size: 10px;
}
.rr-owner-avatar {
width: 14px;
height: 14px;
font-size: 8px;
margin-right: 4px;
vertical-align: middle;
}
.rr-option-image-voter {
display: inline-flex;
align-items: center;
}
.rr-voter-points {
color: var(--rp-correct, #4ade80);
font-weight: 700;
font-size: 12px;
}
/* ========== Screen 2: Leaderboard ========== */
.rr-leaderboard-title {
text-align: center;
font-size: 17px;
font-weight: 700;
color: var(--rr-muted, rgba(255, 255, 255, 0.6));
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
opacity: 0;
animation: rrFadeIn 0.3s ease forwards;
}
.rr-leaderboard {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.rr-lb-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--rr-surface, rgba(255, 255, 255, 0.06));
border: 1px solid var(--rr-border, rgba(255, 255, 255, 0.08));
border-radius: 14px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
position: relative;
}
.rr-lb-row.rr-leading {
background: var(--rr-leading-surface, rgba(255, 255, 255, 0.1));
border-color: var(--rr-leading-border, rgba(255, 255, 255, 0.15));
}
.rr-lb-pos {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--rr-muted, rgba(255, 255, 255, 0.5));
background: var(--rr-surface, rgba(255, 255, 255, 0.08));
flex-shrink: 0;
}
.rr-lb-pos.rr-gold { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.rr-lb-pos.rr-silver { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; }
.rr-lb-pos.rr-bronze { background: linear-gradient(135deg, #d97706, #92400e); color: #fff; }
.rr-lb-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: contain;
flex-shrink: 0;
transform: scale(1.5);
}
.rr-lb-name {
flex: 1;
font-size: 16px;
font-weight: 600;
color: var(--rr-card-ink, var(--rr-ink, #fff));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rr-lb-score-area {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.rr-lb-score {
font-size: 17px;
font-weight: 700;
color: var(--rr-card-ink, var(--rr-ink, #fff));
min-width: 40px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.rr-lb-delta {
font-size: 13px;
font-weight: 700;
color: var(--rr-correct-text, var(--rp-correct, #4ade80));
opacity: 0;
transform: translateY(4px);
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
}
.rr-lb-delta.rr-visible {
opacity: 1;
transform: translateY(0);
}
.rr-lb-delta.rr-zero {
color: var(--rr-card-muted, var(--rr-muted, rgba(255, 255, 255, 0.3)));
}
/* Row swap animation */
.rr-lb-row.rr-swapping {
z-index: 2;
}
/* ========== Keyframes ========== */
@keyframes rrFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes rrPulse {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes rrFloatUp {
0% { opacity: 0; transform: translateY(8px); }
30% { opacity: 1; }
100% { opacity: 0; transform: translateY(-20px); }
}
/* ========== Dashboard wide layout ========== */
.rr-container.rr-dashboard .rr-screen1,
.rr-container.rr-dashboard .rr-screen2 {
padding: 32px 40px;
}
.rr-container.rr-dashboard .rr-context-text {
font-size: 24px;
}
.rr-container.rr-dashboard .rr-option {
padding: 18px 22px;
}
.rr-container.rr-dashboard .rr-option-text {
font-size: 20px;
}
.rr-container.rr-dashboard .rr-voter {
font-size: 15px;
padding: 5px 12px;
}
.rr-container.rr-dashboard .rr-author {
font-size: 15px;
}
.rr-container.rr-dashboard .rr-lb-row {
padding: 16px 22px;
}
.rr-container.rr-dashboard .rr-lb-name {
font-size: 19px;
}
.rr-container.rr-dashboard .rr-lb-score {
font-size: 20px;
}
.rr-container.rr-dashboard .rr-lb-delta {
font-size: 15px;
}
.rr-container.rr-dashboard .rr-leaderboard-title {
font-size: 20px;
}
.rr-container.rr-dashboard .rr-option-image-card {
max-width: 160px;
}
.rr-container.rr-dashboard .rr-option-image-card.rr-option-comic {
max-width: 760px;
}
@media (max-width: 480px) {
.rr-option-comic-strip {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: min(72vw, 260px);
justify-content: start;
scroll-snap-type: x mandatory;
}
.rr-option-comic-strip img {
scroll-snap-align: center;
}
}
/* Question blank highlight (for Fibbage) */
.rr-question-blank {
color: var(--accent-pink, #ff3b6f);
font-weight: 700;
border-bottom: 2px solid var(--accent-pink, #ff3b6f);
padding: 0 2px;
}
/* ========== One-phone turn results (quick mode) ========== */
/* Inline host: the reveal fills the space between the screen header and the game's own
«Продолжить» button instead of covering the whole screen. */
.rr-host {
position: relative;
flex: 1 1 auto;
min-height: 240px;
width: 100%;
/* One-phone games take the page's own text and card tokens (game-ui.css + the Game Theme). */
--rr-ink: var(--text-primary, #fff);
--rr-muted: var(--text-secondary, rgba(255, 255, 255, 0.6));
--rr-surface: var(--bg-card, rgba(255, 255, 255, 0.06));
--rr-border: color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
--rr-leading-surface: var(--bg-card, rgba(255, 255, 255, 0.1));
--rr-leading-border: color-mix(in srgb, var(--text-primary, #fff) 55%, transparent);
}
.rr-host .rr-screen1,
.rr-host .rr-screen2 {
padding: 4px 2px 12px;
}
.rr-container.rr-quick .rr-screen1 {
cursor: pointer;
}
.rr-container.rr-quick .rr-options {
gap: 8px;
flex: 0 0 auto;
}
.rr-container.rr-quick .rr-option {
padding: 11px 14px;
transition-duration: 0.45s;
}
.rr-container.rr-quick .rr-option-text {
font-size: 16px;
}
/* Skipped answer (word games): shared skip icon instead of ✓ / ✕. */
.rr-option.rr-type-skipped .rr-option-text {
color: var(--rr-card-muted, var(--rr-muted, rgba(255, 255, 255, 0.65)));
}
.rr-option.rr-type-skipped .rr-option-text::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 0 10px 0 2px;
vertical-align: -3px;
background-color: currentColor;
-webkit-mask: var(--rp-icon-skip) center / contain no-repeat;
mask: var(--rp-icon-skip) center / contain no-repeat;
}
/* Leaderboard name with a team colour dot or a player chip (PlayerAvatar.html). */
.rr-lb-name--rich {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.rr-lb-color {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.rr-lb-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Flow host: the leaderboard sits in a scrolling page and takes the height of its rows. */
.rr-host.rr-host--flow {
flex: 0 0 auto;
min-height: 0;
}
.rr-host--flow .rr-container,
.rr-host--flow .rr-screen2 {
position: relative;
inset: auto;
overflow: visible;
padding: 0;
}
/* A player named in the question or the line under it («Что выбрал [нмг]?», «[Тата] +500: тебя знают!»): the
«Аватарка с именем» chip as a pill, like the voters below. */
.rr-context :is(.rr-context-text, .rr-context-subtext) .rp-player {
padding: .1em .6em .1em .1em;
border-radius: 999px;
background: var(--rr-surface, rgba(255, 255, 255, 0.1));
white-space: nowrap;
}
/* Host's «Дальше» on the round reveal (shared/client/reveal-next.ts: every /tv/ game; Квиз has the same pill as
.quiz-reveal-next). Fixed at the bottom; the reveal keeps room for it. */
.rr-next-btn:not([hidden]) {
position: fixed;
left: 50%;
bottom: max(20px, env(safe-area-inset-bottom));
/* Above a game's own layers (Рисовач cards), below pause (980) and popups (1000). */
z-index: 900;
translate: -50% 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
background: var(--bg-primary);
box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
font-weight: 700;
}
body:has(.rr-next-btn:not([hidden])) :is(#round-results-screen, #reveal-screen) { padding-bottom: 84px; }
/* PC stage: the /tv/ reveal (dashboard, Геоугадайка map) keeps a strip for the pill, so it never sits on a card. */
html.rp-stage body:has(.rr-next-btn:not([hidden])) :is(.qs-reveal > .rr-container, #round-results-screen > .gss-root) { bottom: 80px; }
/* Phone: the answers scroll inside the reveal, so the last one can be scrolled above the pill (Рисовач). */
body:has(.rr-next-btn:not([hidden])) .rr-container:not(.rr-dashboard) .rr-options { padding-bottom: 76px; }
body:has(.rr-next-btn:not([hidden])) .rr-container:not(.rr-dashboard) .rr-option { scroll-margin-bottom: 84px; }
/* A game theme's outlined .btn-skip (Рисовач, Геоугадайка: transparent) must not let the reveal show through the pill. */
body .rr-next-btn.btn-skip:not([hidden]) { background: var(--bg-primary, #fff); }
/* /drawful/df-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / drawful (Drawful 2 adaptation).
bg #F0EEEB paper with the blue preview grid, surface #FFFFFF (border #E4E1DD), accent #C61D76 (white text),
ink #252525 / text #17191F. Light palette: page and cards are light, so text is dark everywhere except on
the ink cards (#252525) used for success/error/score chips, which keep the stock green/red tokens readable. */
:root {
/* Answer and gender tones: COMMON/roomplay-palettes.html / drawful (correct, wrong, male, female). */
--rp-correct: #30c883;
--rp-correct-ink: #17191f;
--rp-wrong: #bb3f58;
--rp-wrong-ink: #ffffff;
--rp-male: #0274c7;
--rp-female: #c61d76;
--bg-primary: #f0eeeb;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--text-primary: #17191f;
--text-secondary: #5a5650;
--text-placeholder: #6b6760;
--accent-purple: #c61d76;
--accent-purple-dark: #a3175f;
--accent-blue: #c61d76;
--accent-pink: #c61d76;
--accent-pink-dark: #a3175f;
--df-ink: #252525;
--df-text: #17191f;
--df-line: #e4e1dd;
--df-grid: rgba(139, 169, 198, .3);
--df-pink-tint: #fbe6f0;
--df-on-ink-muted: #d6d3cc;
--onboarding-accent: #c61d76;
--onboarding-accent-dark: #c61d76;
--onboarding-shadow: transparent;
--onboarding-shadow-hover: transparent;
--settings-accent: #c61d76;
--settings-accent-dark: #a3175f;
--packs-accent: #c61d76;
--packs-feedback-rgb: 198, 29, 118;
--ps-accent: #c61d76;
--game-accent: #c61d76;
}
html, body[data-rp-game="drawful"], .page-loader { background: var(--bg-primary); }
body[data-rp-game="drawful"] {
color: var(--df-text);
background-color: var(--bg-primary);
background-image: linear-gradient(var(--df-grid) 1px, transparent 1px), linear-gradient(90deg, var(--df-grid) 1px, transparent 1px);
background-size: 20px 20px;
}
[data-rp-game="drawful"] .loader-spinner,
[data-rp-game="drawful"] .connection-spinner,
[data-rp-game="drawful"] .rp-waiting-spinner { border-color: rgba(37, 37, 37, .15); border-top-color: var(--accent-pink); }
/* Actions: pink primary (white text 5.5:1), ink outline secondary. */
[data-rp-game="drawful"] .btn-play,
[data-rp-game="drawful"] .btn-next-slide,
[data-rp-game="drawful"] .btn-join.active { color: #fff; background: var(--accent-pink); border-color: transparent; box-shadow: none; }
[data-rp-game="drawful"] .btn-play:disabled { color: var(--text-secondary); background: var(--df-line); opacity: 1; }
[data-rp-game="drawful"] .btn-join { color: var(--accent-pink); border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .btn-join:disabled { color: var(--text-secondary); border-color: var(--df-line); }
[data-rp-game="drawful"] .btn-skip,
[data-rp-game="drawful"] .btn-play.outlined { color: var(--df-text); border: 2px solid var(--df-ink); background: transparent; box-shadow: none; }
[data-rp-game="drawful"] .btn-back { color: var(--df-text); }
[data-rp-game="drawful"] .btn-copy { color: var(--df-text); background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .dot { background: rgba(37, 37, 37, .22); }
[data-rp-game="drawful"] .dot.active { background: var(--accent-pink); }
[data-rp-game="drawful"] .input { color: var(--df-text); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .input:focus { border-color: var(--accent-pink); }
[data-rp-game="drawful"] .input:disabled { background: #f7f6f4; }
/* Paper cards: white with the stage border from the palette preview. */
[data-rp-game="drawful"] .player-item,
[data-rp-game="drawful"] .round-badge,
[data-rp-game="drawful"] .drawing-prompt,
[data-rp-game="drawful"] .artist-notice,
[data-rp-game="drawful"] .room-code-display,
[data-rp-game="drawful"] .score-item,
[data-rp-game="drawful"] .mini-score-item { color: var(--df-text); background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .round-badge,
[data-rp-game="drawful"] .artist-notice,
[data-rp-game="drawful"] .drawing-prompt-label { color: var(--text-secondary); }
[data-rp-game="drawful"] .drawing-prompt-word,
[data-rp-game="drawful"] .room-code-display { color: var(--accent-pink); }
[data-rp-game="drawful"] .lobby-hint,
[data-rp-game="drawful"] .lobby-status,
[data-rp-game="drawful"] .subtitle { color: var(--text-secondary); }
[data-rp-game="drawful"] .player-avatar:not(.has-photo),
[data-rp-game="drawful"] .mini-score-avatar-letter { color: #fff; background: var(--df-ink); }
[data-rp-game="drawful"] .player-name { color: var(--df-text); }
[data-rp-game="drawful"] .player-host { color: var(--accent-pink); }
[data-rp-game="drawful"] .timer-badge { color: #fff; background: var(--accent-pink); }
[data-rp-game="drawful"] .timer-badge.warning { color: var(--df-text); background: var(--error); }
/* Drawing tools: the canvas is a sheet on the gridded desk; swatches get an ink ring so white stays visible. */
[data-rp-game="drawful"] .canvas-container { background: #fff; box-shadow: 0 0 0 2px var(--df-line), 0 6px 0 rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .color-btn { border-color: rgba(37, 37, 37, .2) !important; }
[data-rp-game="drawful"] .color-btn.active { border-color: var(--df-ink) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--df-ink); }
[data-rp-game="drawful"] .toolbar-divider { background: rgba(37, 37, 37, .2); }
[data-rp-game="drawful"] .brush-size-btn { background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .brush-size-btn.active { border-color: var(--accent-pink); }
[data-rp-game="drawful"] .brush-dot { background: var(--df-ink); }
[data-rp-game="drawful"] .tool-btn { color: var(--text-secondary); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .tool-btn.active { color: #fff; background: var(--df-ink); border-color: var(--df-ink); }
[data-rp-game="drawful"] .submitted-overlay { background: rgba(37, 37, 37, .9); }
[data-rp-game="drawful"] .submitted-icon { color: var(--success); }
[data-rp-game="drawful"] .submitted-hint { color: var(--df-on-ink-muted); }
/* Stock success/error text sits on an ink pill so it stays readable on paper. */
[data-rp-game="drawful"] #presenting-status:not(:empty) { align-self: center; padding: 6px 14px; border-radius: 999px; background: var(--df-ink); }
/* Presenting and voting. */
[data-rp-game="drawful"] .drawing-display { background: #fff; box-shadow: 0 0 0 2px var(--df-line), 0 8px 0 rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .vote-option { color: var(--df-text); background: #fff; border-color: var(--df-line); }
[data-rp-game="drawful"] .vote-option.selected { border-color: var(--accent-pink); background: var(--df-pink-tint); }
[data-rp-game="drawful"] .option-letter { color: #fff; background: var(--df-ink); }
[data-rp-game="drawful"] .vote-option.selected .option-letter { background: var(--accent-pink); }
[data-rp-game="drawful"] .vote-option.excluded { border-color: var(--accent-pink); background: var(--df-pink-tint); }
[data-rp-game="drawful"] .option-own { color: #fff; background: var(--accent-pink); }
@media (hover: hover) {
[data-rp-game="drawful"] .vote-option:hover:not(.selected):not(.disabled):not(.excluded) { border-color: var(--accent-pink); }
}
/* Round reveal (shared RevealResults): white sheets, the real answer on an ink card with the stock green. */
[data-rp-game="drawful"] .rr-context-text { color: var(--df-text); }
[data-rp-game="drawful"] .rr-context-subtext,
[data-rp-game="drawful"] .rr-leaderboard-title { color: var(--text-secondary); }
[data-rp-game="drawful"] .rr-context-drawing { box-shadow: 0 0 0 2px var(--df-line); }
[data-rp-game="drawful"] .rr-option { background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .rr-option.rr-type-wrong { border-color: rgba(198, 29, 118, .35); }
[data-rp-game="drawful"] .rr-option-text { color: var(--df-text); }
[data-rp-game="drawful"] .rr-vote-count,
[data-rp-game="drawful"] .rr-voters-label,
[data-rp-game="drawful"] .rr-author,
[data-rp-game="drawful"] .rr-author-label { color: var(--text-secondary); }
[data-rp-game="drawful"] .rr-author-name { color: var(--accent-pink); }
[data-rp-game="drawful"] .rr-voter { color: var(--df-text); background: rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .rr-voter-points,
[data-rp-game="drawful"] .rr-author-points,
[data-rp-game="drawful"] .rr-lb-delta:not(.rr-zero) { padding: 1px 6px; border-radius: 6px; background: var(--df-ink); }
[data-rp-game="drawful"] .rr-option.rr-type-correct { background: var(--df-ink); border-color: var(--rp-correct); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-vote-count,
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voters-label { color: var(--df-on-ink-muted); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voter { color: #fff; background: rgba(255, 255, 255, .14); }
[data-rp-game="drawful"] .rr-option.rr-type-correct .rr-voter-points { padding: 0; background: none; }
[data-rp-game="drawful"] .rr-lb-row { background: #fff; border: 2px solid var(--df-line); }
[data-rp-game="drawful"] .rr-lb-row.rr-leading { border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .rr-lb-name,
[data-rp-game="drawful"] .rr-lb-score { color: var(--df-text); }
[data-rp-game="drawful"] .rr-lb-pos { color: var(--text-secondary); background: rgba(37, 37, 37, .08); }
[data-rp-game="drawful"] .rr-lb-delta.rr-zero { color: var(--text-secondary); }
/* Final results. */
[data-rp-game="drawful"] .winner-name { color: var(--accent-pink); }
[data-rp-game="drawful"] .score-item.leading { border-color: var(--accent-pink); background: #fff; }
[data-rp-game="drawful"] .score-name { color: var(--df-text); }
[data-rp-game="drawful"] .score-value,
[data-rp-game="drawful"] .mini-score-value { color: var(--accent-pink); }
[data-rp-game="drawful"] .score-position:not(.gold):not(.silver):not(.bronze) { color: var(--df-text); background: rgba(37, 37, 37, .08); }
/* Shared party finale card (#roomplay-party-finale): a white sheet, pink share, ink outline "next". */
[data-rp-game="drawful"] #roomplay-party-finale { color: var(--df-text); border: 2px solid var(--df-line); background: #fff; }
[data-rp-game="drawful"] #roomplay-party-finale p { color: var(--text-secondary); }
[data-rp-game="drawful"] #roomplay-party-finale .rpf-kicker { color: var(--accent-pink); }
[data-rp-game="drawful"] #roomplay-party-finale :is(.rpf-share, .rpf-premium) { color: #fff; background: var(--accent-pink); }
[data-rp-game="drawful"] #roomplay-party-finale .rpf-next { color: var(--df-text); background: transparent; box-shadow: inset 0 0 0 2px var(--df-ink); }
/* Overlays and popups. */
[data-rp-game="drawful"] .connection-overlay { background: rgba(240, 238, 235, .96); }
[data-rp-game="drawful"] .connection-text { color: var(--df-text); }
/* Exit confirmation and settings popups: white sheet, pink primary, ink outline cancel.
Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
[data-rp-game="drawful"] {
--rp-dialog-overlay: rgba(37, 37, 37, .6);
--rp-dialog-bg: #fff;
--rp-dialog-border: 2px solid var(--df-line);
--rp-dialog-shadow: 0 10px 0 rgba(37, 37, 37, .12);
--rp-dialog-title: var(--df-text);
--rp-dialog-text: var(--text-secondary);
--rp-dialog-primary-bg: var(--accent-pink);
--rp-dialog-secondary-border: var(--df-ink);
--rp-dialog-secondary-text: var(--df-text);
}
/* Onboarding: animated flat SVG characters (static copies via
for reduced motion). */
[data-rp-game="drawful"] #onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
[data-rp-game="drawful"] #onboarding-screen .slide-icon picture,
[data-rp-game="drawful"] #onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
[data-rp-game="drawful"] .slide-title { color: var(--df-text); }
[data-rp-game="drawful"] .slide-text { color: var(--text-secondary); }
@media (max-height: 600px) {
[data-rp-game="drawful"] #onboarding-screen .slide-icon { width: 120px; margin-bottom: 8px; }
}
/* Short landscape phones: character beside the copy so the text never runs under the dots/buttons. */
@media (max-height: 500px) and (min-width: 560px) {
[data-rp-game="drawful"] #onboarding-screen .onboarding-slide.active { display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding-top: 0; text-align: left; }
[data-rp-game="drawful"] #onboarding-screen .slide-icon { grid-row: 1 / span 2; width: 120px; margin: 0; }
[data-rp-game="drawful"] #onboarding-screen .slide-title { align-self: end; margin-bottom: 6px; }
[data-rp-game="drawful"] #onboarding-screen .slide-text { align-self: start; max-width: none; }
}
/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only: never delays drawing,
answers, timers or scoring; fully off under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
[data-rp-game="drawful"] {
--df-press: 100ms;
--df-settle: 240ms;
--df-spring: cubic-bezier(.2, .9, .3, 1.25);
}
[data-rp-game="drawful"] button:not(:disabled) {
transition: scale var(--df-settle) var(--df-spring), translate var(--df-settle) var(--df-spring), transform var(--df-settle) var(--df-spring),
background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
[data-rp-game="drawful"] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--df-press); }
[data-rp-game="drawful"] .btn-back:active { scale: .88; }
[data-rp-game="drawful"] .color-btn:not(:disabled):active,
[data-rp-game="drawful"] .brush-size-btn:not(:disabled):active { scale: .86; translate: 0 0; }
[data-rp-game="drawful"] .dot { transition: background-color 180ms ease, scale 180ms var(--df-spring); }
[data-rp-game="drawful"] .dot.active { scale: 1.12; }
[data-rp-game="drawful"] .onboarding-slide.active .slide-icon { animation: df-character-arrive 380ms var(--df-spring) both; }
[data-rp-game="drawful"] #lobby-screen.active .room-code-display { animation: df-stamp-in 360ms var(--df-spring) both; }
/* Drawing: the secret word is stamped, the sheet slides onto the desk. */
[data-rp-game="drawful"] #drawing-screen.active .drawing-prompt-word { animation: df-stamp-in 360ms var(--df-spring) both; }
[data-rp-game="drawful"] #drawing-screen.active .canvas-container { animation: df-paper-arrive 280ms var(--df-spring) both; }
[data-rp-game="drawful"] .submitted-overlay.visible .submitted-icon { animation: df-stamp-in 360ms var(--df-spring) both; }
/* Presenting and voting: the drawing lands, answers pop in one after another. */
[data-rp-game="drawful"] #presenting-screen.active .drawing-display,
[data-rp-game="drawful"] #voting-screen.active .drawing-display { animation: df-paper-arrive 280ms var(--df-spring) both; }
/* The titles are dealt in (cut-paper.css .rp-dealing, main.ts), as on /tv/. */
[data-rp-game="drawful"] #voting-screen.active .vote-option.selected { animation: df-answer-stamp 260ms var(--df-spring); }
[data-rp-game="drawful"] .vote-option.selected .option-letter { animation: df-nod 360ms ease-out; }
[data-rp-game="drawful"] #presenting-status:not(:empty) { animation: df-stamp-in 360ms var(--df-spring); }
/* Final standings and popups. */
[data-rp-game="drawful"] #results-screen.active .winner-icon { animation: df-nod 420ms ease-out 200ms both; }
[data-rp-game="drawful"] #results-screen.active .score-item { animation: df-paper-arrive 280ms var(--df-spring) both; }
[data-rp-game="drawful"] #results-screen.active .score-item:nth-child(2) { animation-delay: 60ms; }
[data-rp-game="drawful"] #results-screen.active .score-item:nth-child(3) { animation-delay: 120ms; }
[data-rp-game="drawful"] #results-screen.active .score-item:nth-child(n+4) { animation-delay: 160ms; }
[data-rp-game="drawful"] .confirm-dialog-overlay.active .confirm-dialog-modal { animation: df-paper-arrive 280ms var(--df-spring); }
}
@keyframes df-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes df-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes df-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes df-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes df-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }
/* The absolute 44px back arrow (left:16px) sat on top of the round badge («Рисуй!», «2/4»):
the header only reserved 40px. Reserve the arrow's full footprint (16 + 44 + 4px gap). */
[data-rp-game="drawful"] .screen > .btn-back-exit ~ .game-header,
[data-rp-game="drawful"] .screen > .btn-back-exit ~ .screen-content > .game-header { padding-left: 64px; }
/* Like / dislike / report on the drawing prompt (shared content-report.css): on the ink
«Рисунок отправлен» card after this phone sends its drawing, and on paper under each reveal.
The report sheet follows the light paper palette. */
:root {
--rp-report-surface: #ffffff;
--rp-report-text: var(--df-text);
--rp-report-muted: var(--text-secondary);
--rp-report-line: var(--df-line);
--rp-report-chip: #f0eeeb;
--rp-report-accent: #c61d76;
--rp-report-accent-ink: #ffffff;
--rp-report-error: #bb3f58;
--rp-report-flag: rgb(37 37 37 / 55%);
}
/* Inside the prompt card: thumbs centred on its bottom edge, flag in its bottom-right corner. On the
reveal the drawing + «Правильный ответ» block becomes a paper card while it holds them. */
[data-rp-game="drawful"] .drawing-prompt { position: relative; }
[data-rp-game="drawful"] .drawing-prompt:has(> .df-card-vote:not([hidden])) { padding-bottom: 50px; }
[data-rp-game="drawful"] #reveal-container .rr-context.df-reveal-prompt {
position: relative; padding: 16px 16px 56px; border: 2px solid var(--df-line); border-radius: 16px; background: #fff;
}
[data-rp-game="drawful"] .df-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
[data-rp-game="drawful"] .df-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
[data-rp-game="drawful"] :is(.df-card-vote, .df-report-flag)[hidden] { display: none; }
[data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn, .df-report-flag) { color: rgb(37 37 37 / 60%); }
[data-rp-game="drawful"] .df-card-vote--paper .rp-card-vote__btn[aria-pressed="true"] { color: var(--accent-pink); }
@media (hover: hover) {
[data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn:not([aria-pressed="true"]), .df-report-flag):hover { color: var(--df-text); }
}
[data-rp-game="drawful"] :is(.df-card-vote--paper .rp-card-vote__btn, .df-report-flag):active { background: rgb(37 37 37 / 8%); }
/* ── The /tv/ look on the phones and the PC (owner 2026-10-29: «на тел, пк и тв стили должны выглядеть одинаково…
за образец возьми тв»), as «Что за мем?» (Black#801) and «Бредовуха» (Black#794) ──
Background: the TV's spheres (particles.js, body[data-rp-spheres], the pale drawful colours shared with /tv/) over
the gridded paper. Cut paper: the reveal's titles and the boards are the shared cut-paper.css ();
here the game's colours as on /tv/ (white cards with ink and the grey edge, pink for the pick and the leader) and
its own cut pieces: the word card, the canvas and the drawing sheets, the titles (tv draw-stage.css). */
body[data-rp-game="drawful"] {
--paper-gold: var(--accent-pink);
--paper-surface: #fff;
--paper-line: var(--df-line);
--paper-line-width: 2px;
--paper-lead-shadow: 5px 6px 0 color-mix(in srgb, var(--accent-pink) 45%, transparent);
--cut-shadow: 4px 5px 0 rgb(23 25 31 / 14%);
}
/* The word: a white cut card, turned, with the pink shadow (tv .tv-draw-card); the word in the display font. */
[data-rp-game="drawful"] .drawing-prompt {
border-radius: 22px 13px 25px 15px / 15px 23px 13px 22px; rotate: -1deg;
box-shadow: 6px 7px 0 color-mix(in srgb, var(--accent-pink) 28%, transparent);
}
[data-rp-game="drawful"] .drawing-prompt-word { font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: -.02em; }
/* The canvas and the drawing: white cut sheets with a hard shadow (tv .tv-draw-frame). The canvas stays straight:
a turned canvas would draw off the pointer. */
[data-rp-game="drawful"] .canvas-container { border-radius: var(--cut-2); box-shadow: 0 0 0 2px var(--df-line), 6px 7px 0 rgb(23 25 31 / 12%); }
[data-rp-game="drawful"] .drawing-display {
padding: 8px; border: 2px solid var(--df-line); border-radius: var(--cut-2); rotate: -1deg;
box-shadow: 7px 8px 0 rgb(23 25 31 / 12%);
}
[data-rp-game="drawful"] .drawing-display img { border-radius: 8px; }
/* The titles: white cut cards with ink, leaning in turn, the letter a pink stamp (tv .tv-draw-options). */
[data-rp-game="drawful"] .vote-option { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
[data-rp-game="drawful"] .vote-option:nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .7deg; }
[data-rp-game="drawful"] .vote-option:nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.35deg; }
[data-rp-game="drawful"] .vote-option:nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .45deg; }
[data-rp-game="drawful"] .vote-option:nth-child(even) .option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }
[data-rp-game="drawful"] .option-letter { background: var(--accent-pink); }
[data-rp-game="drawful"] .vote-option.selected { box-shadow: var(--paper-lead-shadow); }
@media (hover: hover) {
[data-rp-game="drawful"] .vote-option:hover:not(.selected):not(.disabled):not(.excluded) { transform: none; }
}
/* The round board's rows: white cut cards with ink (cut-paper.css), the leader with the pink edge. */
[data-rp-game="drawful"] #reveal-container .score-item { background: #fff; border: 2px solid var(--df-line); }
/* /cut-paper.css */
/* «Вырезанная бумага» — the /tv/ look on the phones and the PC (owner 2026-10-29: «на тел, пк и тв стили должны
выглядеть одинаково… за образец возьми тв»; one shared file since 2026-10-29: «почему не применяется
переиспользование?»). Opt in with and load this file AFTER the game's theme CSS.
Answers, the reveal's answers and the boards are hand-cut pieces as on /tv/ (tv/style.css): uneven corners in
turn, a slight tilt, a hard shadow without blur. The tilt is the separate `rotate`, so a press (`scale` /
`translate`) and a stamp or shake (`transform`) still work. The round leaderboard rows stay straight boxes:
reveal-results.js measures them to slide overtakes (a tilted row measures taller and jumps, Black#722), so their
card is a ::before. Never tilt an element reveal-results.js measures.
A game sets only its colours, on [data-rp-game=""] in its theme:
--paper-gold the /tv/ «gold» of the game: the pick, the leader, the round scores (required)
--paper-surface the leaderboard card (default: a light veil)
--paper-line its edge (default: white 10 %)
--paper-line-width its edge width (default: 1px)
--paper-lead-surface the leader's card (default: --paper-surface)
--paper-lead-line the leader's edge (default: --paper-gold)
--paper-lead-shadow the pick's / leader's shadow (default: --paper-gold darkened)
--cut-shadow the plain card's shadow (default: black 34 %)
Game-only pieces (the board of «100 к 1», «VS» of «Смехлыст», the sides of «Что бы ты выбрал?») stay in the
game's theme and use the tokens below; an override there needs `body[data-rp-game="…"]` to win over this file.
Dealing: shared/client/tv-look.ts `deal()` puts `.rp-dealing` on a container for a moment; its children drop in
one by one. */
[data-rp-paper] {
/* The /tv/ display font (tv/style.css --font-display): letters, numbers, stamps. */
--font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cut-1: 18px 9px 16px 11px / 11px 17px 9px 15px;
--cut-2: 10px 17px 10px 18px / 17px 10px 16px 9px;
--cut-3: 16px 11px 19px 9px / 9px 15px 11px 18px;
--cut-4: 9px 18px 11px 16px / 16px 9px 18px 11px;
--cut-shadow: 4px 5px 0 rgb(0 0 0 / 34%);
--paper-lead-shadow: 5px 6px 0 color-mix(in srgb, var(--paper-gold, #ffd43a) 65%, #000);
}
/* Cards: answers, the reveal's answers, the final boards (also the shared game-end board, .leader-row). */
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row) { border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .7deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.35deg; }
[data-rp-paper] :is(.quiz-option, .rr-option, .score-item, .leader-row):nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .45deg; }
/* Board rows turn half as much as answer cards (owner 2026-10-29: «расброс наклона меньше»; /tv/ the same). */
[data-rp-paper] :is(.score-item, .leader-row) { rotate: -.3deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 2) { rotate: .35deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 3) { rotate: -.18deg; }
[data-rp-paper] :is(.score-item, .leader-row):nth-child(4n + 4) { rotate: .22deg; }
[data-rp-paper] .quiz-option.selected { box-shadow: var(--paper-lead-shadow); }
[data-rp-paper] :is(.quiz-option.correct, .rr-option.rr-type-correct) { box-shadow: 5px 6px 0 color-mix(in srgb, var(--rp-correct, #4ade80) 50%, #000); }
[data-rp-paper] .quiz-option.wrong { box-shadow: 4px 5px 0 color-mix(in srgb, var(--rp-wrong, #f87171) 45%, #000); }
/* The answer letter: a stamp, cut too and turned the other way (tv .tv-option-letter). */
[data-rp-paper] .option-letter {
border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg;
box-shadow: 2px 3px 0 rgb(0 0 0 / 30%); font-family: var(--font-display); font-weight: 800;
}
[data-rp-paper] .quiz-option:nth-child(even) .option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }
/* Final board: the winner leans out with the game's gold shadow. */
[data-rp-paper] :is(.score-item, .leader-row):first-child { rotate: -.6deg; box-shadow: var(--paper-lead-shadow); }
/* The game-end board scrolls (game-end.css: overflow-y auto), which clips the tilted rows and their shadows: room for
them inside the list (--cut-room, as in question-stage.css), taken back from the card's padding so nothing moves. */
[data-rp-paper] .leaderboard {
margin: calc(-1 * var(--cut-room, 10px));
padding: var(--cut-room, 10px);
}
/* Dealing: each card drops from a little above with a turn and settles with a bounce, 80 ms apart. */
[data-rp-paper] .rp-dealing > * {
animation: rp-cut-in .5s cubic-bezier(.3, 1.45, .5, 1) backwards;
animation-delay: calc(60ms + var(--deal, 0) * 80ms);
}
[data-rp-paper] .rp-dealing > :nth-child(2) { --deal: 1; }
[data-rp-paper] .rp-dealing > :nth-child(3) { --deal: 2; }
[data-rp-paper] .rp-dealing > :nth-child(4) { --deal: 3; }
[data-rp-paper] .rp-dealing > :nth-child(5) { --deal: 4; }
[data-rp-paper] .rp-dealing > :nth-child(6) { --deal: 5; }
[data-rp-paper] .rp-dealing > :nth-child(n + 7) { --deal: 6; }
@keyframes rp-cut-in { from { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(1.04); } }
/* Round leaderboard: the row box stays straight, its cut-paper card behind the content turns and shifts; the
leader leans out with the gold edge and shadow (tv .rr-lb-row). */
[data-rp-paper] .rr-lb-row {
--paper-row-bg: var(--paper-surface, rgb(255 255 255 / 6%)); --paper-row-line: var(--paper-line, rgb(255 255 255 / 10%));
--paper-tilt: -.3deg; --paper-shift: -1.5px 0; --paper-cut: var(--cut-1); --paper-row-shadow: var(--cut-shadow);
isolation: isolate; background: none; border-color: transparent;
}
[data-rp-paper] .rr-lb-row:nth-child(4n + 2) { --paper-tilt: .35deg; --paper-shift: 2px .5px; --paper-cut: var(--cut-2); }
[data-rp-paper] .rr-lb-row:nth-child(4n + 3) { --paper-tilt: -.18deg; --paper-shift: 1px -.5px; --paper-cut: var(--cut-3); }
[data-rp-paper] .rr-lb-row:nth-child(4n + 4) { --paper-tilt: .22deg; --paper-shift: -2px .5px; --paper-cut: var(--cut-4); }
[data-rp-paper] .rr-lb-row.rr-leading {
border-color: transparent; background: none;
--paper-row-bg: var(--paper-lead-surface, var(--paper-surface, rgb(255 255 255 / 10%)));
--paper-row-line: var(--paper-lead-line, var(--paper-gold));
--paper-tilt: -.6deg; --paper-shift: -2.5px -.5px; --paper-row-shadow: var(--paper-lead-shadow);
}
[data-rp-paper] .rr-lb-row::before {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: var(--paper-cut); background: var(--paper-row-bg);
border: var(--paper-line-width, 1px) solid var(--paper-row-line); box-shadow: var(--paper-row-shadow);
rotate: var(--paper-tilt); translate: var(--paper-shift);
transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1), translate .5s ease, border-radius .5s ease, box-shadow .4s ease, border-color .3s ease, background-color .3s ease;
}
/* The round's scores in the game's gold, as on /tv/ (tv/style.css .rr-lb-score). */
[data-rp-paper] .rr-lb-score { color: var(--paper-gold); }
@media (prefers-reduced-motion: reduce) {
[data-rp-paper] .rp-dealing > * { animation: none; }
[data-rp-paper] .rr-lb-row::before { transition: none; }
}
/* /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; }
}
/* /player-avatar.css */
/* PlayerAvatar — «avatar + name» chip for one-phone games (player-avatar.js).
Sizes follow the surrounding font, so the same markup works in a turn title and in a result row.
The emoji/initial tile uses the game theme: --ps-accent (player setup accent) or --accent. */
.rp-player {
display: inline-flex;
align-items: center;
gap: 0.4em;
max-width: 100%;
min-width: 0;
vertical-align: middle;
}
.rp-player-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rp-player-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.6em;
height: 1.6em;
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--ps-accent, var(--accent, #7c5cff)) 28%, transparent);
color: inherit;
font-size: 1em;
font-weight: 700;
line-height: 1;
vertical-align: middle;
text-transform: none;
letter-spacing: 0;
user-select: none;
}
.rp-player-avatar--emoji {
font-size: 0.95em;
font-weight: 400;
}
.rp-player-avatar--initial,
.rp-player-avatar--image {
font-size: 0.8em;
width: 2em;
height: 2em;
}
/* Photo/GIF avatars are cut-out stickers (transparent background), drawn like in online rooms
(game-ui.css .player-avatar.has-photo): no tile, whole sticker, slightly enlarged past the box. */
.rp-player-avatar[data-rp-avatar-state="ready"] {
background: none;
overflow: visible;
color: transparent;
}
.rp-player-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transform: scale(1.25);
}
/* Larger hero variant: «Ход игрока …», role cards. */
.rp-player--lg .rp-player-avatar {
width: 1.9em;
height: 1.9em;
}
.rp-player--lg .rp-player-avatar--initial,
.rp-player--lg .rp-player-avatar--image {
width: 2.375em;
height: 2.375em;
}
/* Stacked variant: big avatar above the name (pass-the-phone screens). */
.rp-player--stack {
flex-direction: column;
gap: 0.25em;
}
.rp-player--stack .rp-player-name {
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
/* /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: '';
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; } }
/* /question-stage.css */
/* «Квиз» and «Угадай мелодию»: the question on the big screen, one look on the shared screen (/tv/) and on a PC
player's stage (owner 2026-10-29: «версии некоторых экранов в ПК и ТВ почти не отличаются» → one code for both,
after the «100 к 1» pilot, hundred-board.css). The markup and the moving part are shared/client/question-stage.ts;
the page supplies the palette (--tv-surface, --tv-line, --accent, --accent-ink, --gold, --text-primary,
--text-secondary, --rp-correct, --rp-wrong).
The media on the left (the record, a picture, the four photos), the question and the answers A–D as hand-cut cards
dealt in one by one: two by two, or one column next to media. A PC player's answers are buttons: hover lifts the
card, the pick turns gold, the result green or red, the others fade. The .tv-option card is also the screen's
card in its other views (Бредовуха, Каракули, Как хорошо ты меня знаешь?), so its base look lives here unscoped. */
.qs-root {
--font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* The /tv/ hand-cut corners (tv/style.css .tv). */
--cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
--cut-2: 14px 24px 14px 26px / 24px 14px 22px 12px;
--cut-3: 22px 16px 28px 12px / 12px 20px 16px 26px;
--cut-4: 12px 26px 16px 22px / 22px 12px 26px 16px;
--cut-shadow: 5px 6px 0 rgb(0 0 0 / 34%);
}
.qs-root .hidden { display: none; }
@keyframes qs-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes qs-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes qs-cut-in { from { opacity: 0; transform: translateY(-26px) rotate(-5deg) scale(1.06); } }
@keyframes tv-option-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
/* ── Question ── */
.tv-q-main { flex: 1; min-height: 0; display: flex; align-items: center; gap: 44px; }
.tv-q-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.tv-q-topic { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; color: var(--text-secondary); animation: qs-in .4s ease both; }
.tv-q-topic-name { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.tv-q-text {
font-weight: 600; font-size: 40px; line-height: 1.25; text-align: center; text-wrap: balance;
animation: qs-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.tv-q-text:empty { display: none; }
.qs-root.has-media .tv-q-text { text-align: left; font-size: 34px; }
.tv-q-media { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; animation: qs-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
.tv-q-media img { display: block; max-width: 520px; max-height: 470px; border-radius: 20px; object-fit: contain; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent); }
/* A picture: its box is there before it loads (520×470, the picture's largest size), so nothing moves when it comes. */
.tv-q-media.is-image { width: 520px; height: 470px; }
.tv-q-media.is-image img { opacity: 0; scale: .96; transition: opacity .35s ease, scale .45s cubic-bezier(.3, 1.4, .5, 1); }
.tv-q-media.is-image img.is-loaded { opacity: 1; scale: 1; }
.tv-q-media.is-four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 460px; }
.tv-q-media.is-four img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: none; }
/* The record player (music-player.ts): the phones' record, big. */
.tv-q-media.is-record { width: 440px; flex-direction: column; }
.tv-record { width: 100%; }
.qs-root .music-player { width: 100%; }
.qs-root .music-player .vinyl-container { width: 380px; max-width: 380px; margin-bottom: 22px; animation: music-record-drop 420ms cubic-bezier(.2, .9, .25, 1.15) both; }
.qs-root .music-player .vinyl-play-icon { font-size: 54px; }
.qs-root .music-player .audio-player-bar { margin: 0; padding: 14px 20px; border-radius: 18px; }
.qs-root .music-player .audio-hint, .qs-root .music-player .audio-time { font-size: 18px; }
.qs-root .music-player .audio-progress-bar { height: 8px; }
/* Answers: the phones' .quiz-option (card, line, round letter), two by two; one column next to media. */
.tv-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qs-root.has-media .tv-options { grid-template-columns: 1fr; gap: 14px; }
.tv-option {
display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 14px 22px;
border-radius: 20px; background: var(--tv-surface); border: 2px solid var(--tv-line);
font-size: 26px; font-weight: 500; line-height: 1.25;
animation: tv-option-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(180ms + var(--i, 0) * 110ms);
}
.qs-root.has-media .tv-option { min-height: 74px; font-size: 24px; }
.tv-option-letter {
flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 22px;
}
.tv-option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tv-options.is-two .tv-option { justify-content: center; text-align: center; }
.tv-options.is-two .tv-option-letter { display: none; }
.tv-options.is-four { display: flex; justify-content: center; }
.tv-four-cells { display: flex; gap: 10px; }
.tv-four-cell {
width: 56px; height: 68px; border-radius: 12px; background: var(--tv-surface); border: 2px solid var(--tv-line);
animation: tv-option-in .4s ease both; animation-delay: calc(var(--i, 0) * 60ms);
}
/* ── Cut paper (tv/style.css «Cut paper», the same values): each answer a hand-cut card, tilted and shifted in turn,
with a hard shadow; two side by side lean towards each other, a column next to media zig-zags; the letter a stamp. */
.qs-root .tv-option {
border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.7deg; translate: -4px 0;
animation-name: qs-cut-in; animation-duration: .6s; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1);
}
.qs-root .tv-option:nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .8deg; translate: 6px 2px; }
.qs-root .tv-option:nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.4deg; translate: 3px -1px; }
.qs-root .tv-option:nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .5deg; translate: -6px 1px; }
.qs-root .tv-options:not(.is-four) { gap: 20px 22px; padding: 4px 8px; }
.qs-root .tv-options:not(.is-four) .tv-option:nth-child(odd) { rotate: -1.1deg; }
.qs-root .tv-options:not(.is-four) .tv-option:nth-child(even) { rotate: 1deg; translate: 0 6px; }
.qs-root.has-media .tv-options .tv-option:nth-child(odd) { rotate: -.6deg; translate: -4px 0; }
.qs-root.has-media .tv-options .tv-option:nth-child(even) { rotate: .6deg; translate: 8px 0; }
.qs-root .tv-option-letter {
border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg;
box-shadow: 2px 3px 0 rgb(0 0 0 / 30%); font-family: var(--font-display); font-weight: 800;
}
.qs-root .tv-option:nth-child(even) .tv-option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }
/* ── A PC player's answers (buttons): hover lifts the card, the pick is gold, the result green or red. ── */
.qs-root button.tv-option {
width: 100%; margin: 0; font-family: inherit; color: var(--text-primary); text-align: left; cursor: pointer;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .25s ease, scale .15s ease;
}
.qs-root .tv-options.is-two button.tv-option { text-align: center; }
.qs-root button.tv-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 7px 9px 0 rgb(0 0 0 / 34%); }
.qs-root button.tv-option:active:not(:disabled) { scale: .97; }
.qs-root button.tv-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.qs-root button.tv-option:disabled { cursor: default; }
.qs-root .tv-options.is-locked .tv-option:not(.is-selected, .is-correct, .is-wrong) { opacity: .5; }
.qs-root .tv-option.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--tv-surface)); box-shadow: 6px 7px 0 color-mix(in srgb, var(--gold) 55%, #000); animation: qs-stamp .26s cubic-bezier(.3, 1.45, .5, 1); }
.qs-root .tv-option.is-selected .tv-option-letter { background: var(--gold); color: var(--accent-ink); }
.qs-root .tv-option.is-correct { border-color: var(--rp-correct); background: color-mix(in srgb, var(--rp-correct) 14%, var(--tv-surface)); box-shadow: 6px 7px 0 color-mix(in srgb, var(--rp-correct) 55%, #000); animation: qs-stamp .32s cubic-bezier(.3, 1.45, .5, 1); }
.qs-root .tv-option.is-correct .tv-option-letter { background: var(--rp-correct); color: var(--accent-ink); }
.qs-root .tv-option.is-wrong { border-color: var(--rp-wrong); background: color-mix(in srgb, var(--rp-wrong) 12%, var(--tv-surface)); box-shadow: 4px 5px 0 color-mix(in srgb, var(--rp-wrong) 45%, #000); animation: qs-shake .36s ease-out; }
.qs-root .tv-option.is-wrong .tv-option-letter { background: var(--rp-wrong); color: var(--accent-ink); }
@keyframes qs-stamp { 0% { scale: 1; } 45% { scale: 1.04; } 100% { scale: 1; } }
@keyframes qs-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
/* ── Round end (reveal-results.js with `dashboard`), laid out for the wide screen: on /tv/ #r-box (every game), on a
PC player's stage #reveal-container (main.ts adds .qs-reveal there on the stage only). ── */
.qs-reveal .rr-container { z-index: 1; }
.qs-reveal .rr-screen1, .qs-reveal .rr-screen2 { padding: var(--cut-room, 14px) var(--cut-room, 14px) 24px; overflow: hidden; }
/* Answers: the question (or the record's cover) on the left, the answers one by one on the right. */
.qs-reveal .rr-screen1 {
display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 44px; align-items: center;
}
.qs-reveal .rr-context { grid-column: 1; margin: 0; align-self: center; }
.qs-reveal .rr-context-text { font-size: 30px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.qs-reveal .rr-context-subtext { font-size: 18px; line-height: 1.4; margin-top: 14px; }
.qs-reveal .rr-context-image { max-width: 360px; max-height: 360px; width: auto; border-radius: 22px; margin: 0 auto 18px; object-fit: contain; box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent); }
.qs-reveal .rr-context-fourphoto { width: 340px; gap: 6px; border-radius: 16px; }
/* Many answers (a big room) scroll inside their own column: reveal-results.js scrolls the newest answer into view, and
with the whole screen as the scroller the question on the left went up with it. The cards keep their height, and the
column's padding leaves room for their tilt and hard shadow (`--cut-room`). */
.qs-reveal .rr-options {
grid-column: 2; flex: none; gap: 12px; align-self: center; max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
padding: var(--cut-room, 14px); margin: 0 calc(-1 * var(--cut-room, 14px));
}
.qs-reveal .rr-options::-webkit-scrollbar { display: none; }
.qs-reveal .rr-options > * { flex-shrink: 0; }
.qs-reveal .rr-option { border-radius: 20px; padding: 16px 22px; border-width: 2px; }
.qs-reveal .rr-option-text { font-size: 24px; }
.qs-reveal .rr-option.rr-type-correct .rr-option-text::before, .qs-reveal .rr-option.rr-type-wrong .rr-option-text::before { width: 26px; height: 26px; }
.qs-reveal .rr-voters { gap: 10px; margin-top: 12px; }
.qs-reveal .rr-container.rr-dashboard .rr-voter { font-size: 23px; padding: 6px 16px 6px 6px; border-radius: 999px; gap: 9px; }
.qs-reveal .rr-voter-avatar { width: 38px; height: 38px; font-size: 18px; }
.qs-reveal .rr-voter-points { font-size: 21px; }
/* Scores: one wide card in the middle, the rows count up and change places as on the phones. */
/* The board fits the stage for any room: rows share the height (`--tv-rows` from main.ts), never cut at the top. */
.qs-reveal .rr-container.rr-dashboard .rr-screen2 { padding: 0 0 20px; align-items: center; justify-content: safe center; }
.qs-reveal .rr-leaderboard-title { font-size: 20px; margin-bottom: 14px; }
.qs-reveal .rr-leaderboard { width: 760px; gap: 10px; }
.qs-reveal .rr-lb-row {
padding: 0 22px; gap: 16px; border-radius: 18px;
height: min(68px, calc((556px - (var(--tv-rows, 1) - 1) * 10px) / var(--tv-rows, 1)));
}
.qs-reveal .rr-lb-pos { width: 40px; height: 40px; font-size: 18px; }
.qs-reveal .rr-lb-avatar { width: 40px; height: 40px; }
.qs-reveal .rr-lb-name { font-size: 24px; }
.qs-reveal .rr-lb-score { font-size: 26px; min-width: 70px; }
.qs-reveal .rr-lb-delta { font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
.qs-root *, .qs-root *::before, .qs-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* /draw-stage.css */
/* «Рисовач»: the drawing and its titles on the big screen, one look on the shared screen (/tv/) and on a PC player's
stage (owner 2026-10-29: «версии некоторых экранов в ПК и ТВ почти не отличаются» → one code for both, after
fibbage-stage.css, meme-stage.css and the others). The markup and the moving part are shared/client/draw-stage.ts;
the page supplies the palette (--light-card, --light-ink, --tv-line, --accent, --accent-ink, --text-primary,
--text-secondary; on /tv/ body[data-tv-game="drawful"], on the PC pc-stage.css). The title card's base is
question-stage.css .tv-option.
Drawing (`is-drawing`, the screen only): the white cut card «Рисуйте на телефонах» with the pencil stamp and a pen
line drawing itself. Presenting: the drawing big on its white cut sheet with the artist, the hint under it (and a PC
player's title field). Voting: the sheet on the left, the titles on the right as white cut cards two by two.
A PC player's titles are buttons: hover gives the pink edge, the pick keeps it, the others fade, its own title stays
dimmed. The reveal (question-stage.css .qs-reveal): the drawing on white, the titles on white with ink, the real
one on the ink card with the green edge, the author in pink. */
.dws-root {
--font-display: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* The /tv/ hand-cut corners (tv/style.css .tv). */
--cut-1: 26px 12px 22px 16px / 16px 24px 12px 22px;
--cut-2: 14px 24px 14px 26px / 24px 14px 22px 12px;
--cut-3: 22px 16px 28px 12px / 12px 20px 16px 26px;
--cut-4: 12px 26px 16px 22px / 22px 12px 26px 16px;
flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 0 8px;
}
@keyframes dws-cut-in { from { opacity: 0; transform: translateY(-26px) rotate(-5deg) scale(1.06); } }
@keyframes dws-scribble { 0%, 100% { rotate: -8deg; translate: 0 0; } 25% { rotate: 4deg; translate: 2px -3px; } 50% { rotate: -4deg; translate: -1px 1px; } 75% { rotate: 7deg; translate: 1px -2px; } }
@keyframes dws-line { 60%, 100% { stroke-dashoffset: 0; } }
.dws-root :is(.tv-draw-card, .tv-draw-frame, .tv-draw-side) { display: none; }
.dws-root.is-drawing .tv-draw-card { display: flex; }
.dws-root:is(.is-presenting, .is-voting) :is(.tv-draw-frame, .tv-draw-side) { display: flex; }
.dws-root.is-presenting { flex-direction: column; gap: 20px; }
/* ── Drawing: the card ── */
.tv-draw-card {
flex-direction: column; align-items: center; gap: 18px; width: 860px; padding: 52px 64px 44px; text-align: center;
background: var(--light-card); color: var(--light-ink); border: 2px solid var(--tv-line);
border-radius: 30px 18px 34px 20px / 20px 32px 18px 30px; box-shadow: 9px 11px 0 color-mix(in srgb, var(--accent) 28%, transparent);
rotate: -1.4deg; animation: dws-cut-in .7s cubic-bezier(.3, 1.45, .5, 1) both;
}
.tv-draw-pencil {
display: grid; place-items: center; width: 100px; height: 100px; border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%;
font-size: 50px; background: var(--accent); color: var(--accent-ink);
box-shadow: 4px 5px 0 rgb(23 25 31 / 20%); animation: dws-scribble 1.6s ease-in-out infinite;
}
.tv-draw-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 50px; line-height: 1.12; letter-spacing: -.035em; color: var(--accent); text-wrap: balance; }
.tv-draw-card-hint { margin: 0; font-size: 24px; font-weight: 600; color: var(--text-secondary); text-wrap: balance; }
/* A pen line drawing itself under the card's text, again and again. */
.tv-draw-scribble { width: 360px; height: 54px; }
.tv-draw-scribble path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: dws-line 2.6s ease-in-out infinite; }
/* ── The drawing on its sheet ── */
.tv-draw-frame {
position: relative; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 14px 14px 12px;
background: #fff; border: 2px solid var(--tv-line); border-radius: var(--cut-2);
box-shadow: 8px 10px 0 rgb(23 25 31 / 12%); rotate: -1deg; animation: dws-cut-in .6s cubic-bezier(.3, 1.45, .5, 1) both;
}
.tv-draw-frame > img { display: block; width: 400px; height: 300px; object-fit: contain; border-radius: 10px; background: #fff; }
.dws-root.is-presenting .tv-draw-frame > img { width: 520px; height: 340px; }
.tv-draw-frame.is-blank > img { visibility: hidden; }
.tv-draw-artist { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--text-secondary); }
.tv-draw-artist .rp-player { color: var(--light-ink); font-weight: 700; }
/* ── The hint and the titles ── */
.tv-draw-side { flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.dws-root.is-voting .tv-draw-side { flex: 1; align-items: stretch; }
.tv-draw-hint { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary); text-align: center; text-wrap: balance; }
.tv-draw-hint:empty { display: none; }
.tv-draw-options { width: 100%; grid-auto-rows: minmax(0, 1fr); gap: 20px 22px; padding: 4px 8px; max-height: calc(var(--tv-fb-rows, 2) * 96px + (var(--tv-fb-rows, 2) - 1) * 20px + 8px); }
.tv-draw-options:empty { display: none; }
.dws-root .tv-draw-options .tv-option {
min-height: 0; max-height: 96px; font-size: 23px; font-weight: 600; background: var(--light-card); color: var(--light-ink);
border: 2px solid var(--tv-line); box-shadow: 5px 6px 0 rgb(23 25 31 / 12%);
border-radius: var(--cut-1); rotate: -1.1deg;
animation-name: dws-cut-in; animation-duration: .6s; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1);
}
.dws-root .tv-draw-options .tv-option:nth-child(4n + 2) { border-radius: var(--cut-2); }
.dws-root .tv-draw-options .tv-option:nth-child(4n + 3) { border-radius: var(--cut-3); }
.dws-root .tv-draw-options .tv-option:nth-child(4n + 4) { border-radius: var(--cut-4); }
.dws-root .tv-draw-options .tv-option:nth-child(even) { rotate: 1deg; translate: 0 6px; }
.dws-root .tv-draw-options .tv-option-letter {
color: var(--accent-ink); background: var(--accent);
border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg;
box-shadow: 2px 3px 0 rgb(0 0 0 / 30%); font-family: var(--font-display); font-weight: 800;
}
.dws-root .tv-draw-options .tv-option:nth-child(even) .tv-option-letter { rotate: 5deg; border-radius: 54% 46% 46% 54% / 46% 54% 50% 50%; }
.tv-draw-options .tv-option-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tv-draw-slot { width: 100%; }
.tv-draw-slot:empty, .dws-root:not(.is-presenting) .tv-draw-slot { display: none; }
/* ── A PC player's titles (buttons) ── */
.dws-root button.tv-option {
width: 100%; margin: 0; font-family: inherit; text-align: left; cursor: default;
transition: border-color .2s ease, box-shadow .2s ease, opacity .25s ease, scale .15s ease;
}
.dws-root.is-votable:not(.is-locked) button.tv-option:not(:disabled) { cursor: pointer; }
.dws-root.is-votable:not(.is-locked) button.tv-option:hover:not(:disabled) { border-color: var(--accent); }
.dws-root button.tv-option:active:not(:disabled) { scale: .97; }
.dws-root button.tv-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dws-root .tv-option.is-own { opacity: .45; }
.dws-root.is-locked .tv-option:not(.is-selected) { opacity: .45; }
.dws-root .tv-draw-options .tv-option.is-selected { border-color: var(--accent); box-shadow: 6px 7px 0 color-mix(in srgb, var(--accent) 45%, transparent); }
/* ── The reveal (reveal-results.js `dashboard` in question-stage.css .qs-reveal: /tv/ #r-box, a PC player's
#reveal-container) in the phones' colours (df-theme.css) ── */
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-context-drawing { max-width: 360px; max-height: 270px; margin: 0 auto 16px; border: 2px solid var(--tv-line); border-radius: 14px; box-shadow: 6px 7px 0 rgb(23 25 31 / 12%); rotate: -1deg; }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-context-text { color: var(--light-ink); font-weight: 700; }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-option.rr-type-wrong { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-author-name { color: var(--accent); font-weight: 700; }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-option.rr-type-correct { background: var(--df-ink); border-color: var(--rp-correct); }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-option.rr-type-correct .rr-option-text { color: #fff; }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-option.rr-type-correct :is(.rr-vote-count, .rr-voters-label) { color: var(--df-on-ink-muted); }
:is(body[data-tv-game="drawful"], body[data-rp-game="drawful"]) .qs-reveal .rr-option.rr-type-correct .rr-voter { color: #fff; background: rgb(255 255 255 / 14%); }
@media (prefers-reduced-motion: reduce) {
.dws-root :is(.tv-draw-card, .tv-draw-frame, .tv-option, .tv-draw-pencil, .tv-draw-scribble path) { animation: none; }
.tv-draw-scribble path { stroke-dashoffset: 0; }
}
/* /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 ). 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; }