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;
}
/* /whosmostlikelyto/styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--accent-pink: #ff3b6f;
--accent-pink-dark: #cc2f59;
--accent-orange: #ff922b;
--settings-accent: var(--accent-pink);
--settings-accent-dark: var(--accent-pink-dark);
}
/* Back Button */
/* Bottom Section */
.bottom-section {
padding: 20px 0;
margin-top: auto;
}
/* Play Button */
/* Inline icon spacing for this game’s action content. */
.btn-play { display: flex; align-items: center; justify-content: center; gap: 10px; }
.play-icon {
font-size: 20px;
}
/* Secondary Button */
.btn-secondary {
width: 100%;
background: transparent;
border: 2px solid var(--accent-pink);
color: var(--text-primary);
padding: 16px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 12px;
transition: all 0.3s;
}
@media (hover: hover) {
.btn-secondary:hover {
background: rgba(255, 59, 111, 0.1);
}
}
/* Players Screen */
.players-list {
flex: 1;
overflow-y: auto;
padding-bottom: 20px;
}
/* Card Screen */
.question-progress {
text-align: center;
margin-bottom: 20px;
}
#question-counter {
color: var(--text-secondary);
font-size: 14px;
}
.card-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.statement-card {
background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-orange) 100%);
border-radius: 24px;
padding: 40px 30px;
width: 100%;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 8px 40px rgba(255, 59, 111, 0.4);
transition: all 0.3s ease;
user-select: none;
}
.card-header {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 20px;
letter-spacing: 1px;
}
.card-text {
font-size: 26px;
font-weight: 700;
color: white;
line-height: 1.4;
}
.card-instruction {
text-align: center;
color: var(--text-secondary);
font-size: 15px;
margin-top: 24px;
line-height: 1.5;
max-width: 320px;
}
/* Card flip animation */
@keyframes cardFlip {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.95); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
.statement-card.flip {
animation: cardFlip 0.4s ease;
}
/* Game Over Screen */
.gameover-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
}
.gameover-icon {
font-size: 80px;
margin-bottom: 20px;
}
.gameover-subtitle {
color: var(--text-secondary);
font-size: 18px;
margin-bottom: 40px;
line-height: 1.5;
}
/* Mobile Responsive */
@media (max-width: 480px) {
.app {
max-width: 100%;
}
.screen {
padding: 20px 12px;
padding-top: calc(20px + env(safe-area-inset-top, 0px));
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.title {
font-size: 22px;
margin-bottom: 20px;
}
.selector-label {
font-size: 13px;
margin-bottom: 10px;
}
.selector-options {
gap: 8px;
}
.selector-btn {
padding: 8px 14px;
font-size: 12px;
}
.btn-play {
padding: 16px;
font-size: 16px;
}
.btn-secondary {
padding: 14px;
font-size: 14px;
}
#question-counter {
font-size: 13px;
}
.settings-icon {
font-size: 60px;
margin-bottom: 16px;
}
.statement-card {
min-height: 220px;
padding: 28px 20px;
border-radius: 20px;
}
.card-header {
font-size: 14px;
margin-bottom: 14px;
}
.card-text {
font-size: 20px;
line-height: 1.3;
}
.card-instruction {
font-size: 13px;
margin-top: 18px;
}
.gameover-icon {
font-size: 60px;
}
.gameover-subtitle {
font-size: 16px;
}
.subtitle {
font-size: 13px;
margin-bottom: 16px;
}
}
/* Responsive Height */
@media (max-height: 700px) {
.screen {
padding: 20px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.statement-card {
min-height: 200px;
padding: 24px 20px;
}
.card-text {
font-size: 20px;
}
}
/* Tablet and larger */
@media (min-width: 768px) {
.app {
max-width: 100%;
}
.screen {
padding: 50px 40px;
}
.title {
font-size: 32px;
margin-bottom: 40px;
}
.statement-card {
min-height: 320px;
padding: 50px 40px;
}
.card-text {
font-size: 30px;
}
}
/* Pack gallery — square, full-bleed illustrated covers */
#packs-screen {
width: 100%;
max-width: 520px;
height: 100vh;
height: var(--app-height, 100dvh);
min-height: 0;
margin: 0 auto;
overflow: hidden;
}
#packs-screen .title {
margin-bottom: 6px;
}
#packs-screen .subtitle {
margin-top: 0;
margin-bottom: 20px;
color: var(--text-secondary);
text-align: center;
font-size: 14px;
}
#packs-screen .packs-container {
flex: 1 1 auto;
min-height: 0;
padding: 4px 2px 24px;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#packs-screen .bottom-section {
position: relative;
z-index: 10;
flex: 0 0 auto;
margin-top: 0;
padding: 14px 0 0;
}
/* Player avatars inside the question (PlayerAvatar chips replacing @) */
.card-text .rp-player { gap: 0.25em; }
/* Whole-question lines (most non-RU content) already start with «Who's most likely to…». */
.statement-card.wm-card--full-question .card-header { display: none; }
/* Premium sample card (../premium-teasers.js): only the placement of the shared chip and button. */
.statement-card .wm-teaser-chip { margin: 0 auto 14px; }
.card-area .wm-teaser-cta { margin-top: 18px; }
/* /packs.css */
/* ==================== */
/* Shared Pack Styles */
/* ==================== */
.packs-container {
flex: 1;
overflow-y: auto;
padding-top: 4px;
padding-bottom: 20px;
}
/* Layout: List (row cards, e.g. ALIAS) */
.packs-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Layout: Grid (2 columns, e.g. yesno) */
.packs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* Layout: Illustrated square gallery */
/* `.screen.` outranks the `.rp-local/.rp-direct .screen { height: auto }` reset, so the
gallery scrolls inside a screen-tall layout and Play stays pinned at the bottom. */
.screen.packs-illustrated-screen {
height: 100vh;
height: var(--app-height, 100dvh);
min-height: 0;
overflow: hidden;
}
.packs-illustrated-content {
min-height: 0;
overflow: hidden;
}
.packs-illustrated-scroll {
width: 100%;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
/* Room for the selected card's glow and tap pop, so its top edge is never cut. */
padding: 8px 4px 18px;
/* Soft edge above the action bar instead of a hard cut, hinting there is more below. */
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
.packs-illustrated-actions {
position: relative;
z-index: 5;
flex: 0 0 auto;
width: 100%;
margin-top: 0;
/* No plate behind the bar (owner 2026-10-31: «вокруг круглой кнопки квадратный background»): the round
«Правила», «Дополнительные настройки» and «Играть» sit straight on the page background. The gallery
scrolls in its own box above (.packs-illustrated-scroll, soft masked edge), so nothing runs under them. */
background: none;
}
/* One header geometry on every pack screen (the NHIE layout): back button and title share
the first 44px row at the same height, subtitle right under it. Themes keep their own
fonts and colours; only position and spacing are pinned, hence the !important against
per-game margins and absolute offsets. */
.screen.packs-screen-shell {
position: relative;
padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}
.screen.packs-screen-shell > .screen-content {
padding-top: 0 !important;
}
.screen.packs-screen-shell > .btn-back {
position: absolute !important;
z-index: 6;
top: calc(20px + env(safe-area-inset-top, 0px)) !important;
left: 12px !important;
right: auto !important;
width: 44px;
height: 44px;
margin: 0 !important;
transform: none !important;
}
.screen.packs-screen-shell .title {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 44px;
margin: 0 0 2px !important;
padding: 0 48px !important;
line-height: 1.1;
text-align: center;
}
.screen.packs-screen-shell .title + .subtitle {
margin: 0 0 16px !important;
text-align: center;
}
.screen.packs-screen-shell .packs-container {
margin-top: 0 !important;
}
.screen.packs-screen-shell .subtitle + .subtitle {
margin-top: -10px !important;
}
/* Compact action bar on every pack screen (any layout): on short phones the stacked
summary card + settings + Play took ~240px and left the gallery a ~300px window. The
settings button shares one row with Play, so the gallery keeps most of the screen.
`.screen .bottom-section` lifts specificity above per-game theme rules. */
.screen .bottom-section.packs-compact-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: 8px 10px;
padding-top: 10px;
}
.screen .bottom-section.packs-compact-actions > * {
flex: 1 1 100%;
min-width: 0;
margin: 0;
}
.screen .bottom-section.packs-compact-actions > .packs-summary {
order: -2;
padding: 6px 12px;
line-height: 20px;
}
/* The count lives inside Play (packs.js `_mirrorCountIntoPlay`); the summary card stays
in the DOM as the games' data source. */
.screen .bottom-section.packs-count-in-play > .packs-summary {
display: none;
}
.screen .bottom-section.packs-count-in-play > .btn-play {
flex-wrap: wrap;
align-content: center;
row-gap: 1px;
line-height: 1.15;
}
.packs-play-count {
display: block;
flex-basis: 100%;
font-size: 12px;
font-weight: 600;
opacity: 0.82;
}
.packs-play-count:empty {
display: none;
}
.screen .bottom-section.packs-compact-actions > .form-message {
order: -1;
}
.screen .bottom-section.packs-compact-actions > :is(.btn-additional-settings, .btn-settings-link) {
flex: 1 1 0;
min-height: 54px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.15;
}
.screen .bottom-section.packs-compact-actions > .btn-play {
flex: 1.35 1 0;
min-height: 54px;
padding: 8px 16px;
}
@media (max-width: 380px) {
.screen .bottom-section.packs-compact-actions > :is(.btn-additional-settings, .btn-settings-link) {
padding: 6px 8px;
font-size: 13px;
}
.screen .bottom-section.packs-compact-actions > .btn-play {
flex-grow: 1;
}
}
.packs-illustrated-grid {
--packs-accent: var(--accent-pink);
--packs-feedback-rgb: 255, 59, 111;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 12px;
width: 100%;
}
.packs-illustrated-grid .pack-card {
isolation: isolate;
aspect-ratio: 1;
min-width: 0;
padding: 0;
overflow: hidden;
border: 2px solid rgba(148, 163, 184, 0.72);
border-radius: 18px;
background: var(--bg-card);
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
transform: translateZ(0);
}
.packs-illustrated-grid .pack-card.premium,
.packs-illustrated-grid .pack-card.locked {
border-color: rgba(148, 163, 184, 0.72);
background: var(--bg-card);
}
.packs-illustrated-grid .pack-card.selected,
.packs-illustrated-grid .pack-card.premium.selected {
border-color: var(--packs-accent);
background: var(--bg-card);
box-shadow: 0 0 0 2px rgba(var(--packs-feedback-rgb), 0.28),
0 14px 30px rgba(var(--packs-feedback-rgb), 0.24);
}
.packs-illustrated-grid .pack-card.locked {
opacity: 1;
}
.packs-illustrated-grid .pack-art {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1), filter 0.25s ease;
}
.packs-illustrated-grid .pack-card.locked .pack-art {
filter: brightness(0.66) saturate(0.78);
}
.packs-illustrated-grid .pack-art-shade {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
rgba(7, 11, 25, 0.02) 28%,
rgba(7, 11, 25, 0.38) 58%,
rgba(7, 11, 25, 0.94) 100%);
}
.packs-illustrated-grid .pack-copy {
position: absolute;
left: 12px;
right: 12px;
bottom: 11px;
text-align: left;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
.packs-illustrated-grid .pack-name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: clamp(13px, 3.8vw, 16px);
font-weight: 800;
line-height: 1.08;
color: #fff;
}
.packs-illustrated-grid .pack-count {
margin-top: 4px;
color: rgba(255, 255, 255, 0.76);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
}
.packs-illustrated-grid .premium-badge {
position: absolute;
top: 9px;
right: 9px;
z-index: 2;
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(10, 15, 31, 0.74);
font-size: 14px;
line-height: 1;
backdrop-filter: blur(6px);
}
.packs-illustrated-grid .pack-lock-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 68px;
height: 68px;
object-fit: contain;
transform: translate(-50%, -58%);
filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.55));
}
@media (hover: hover) {
.packs-illustrated-grid .pack-card:not(.locked):hover {
border-color: var(--packs-accent);
transform: translateY(-3px);
box-shadow: 0 0 0 2px rgba(var(--packs-feedback-rgb), 0.2),
0 16px 34px rgba(var(--packs-feedback-rgb), 0.22);
}
.packs-illustrated-grid .pack-card:not(.locked):hover .pack-art {
transform: scale(1.045);
}
}
/* ---- Pack Card (common) ---- */
.pack-card {
background: var(--bg-card);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
display: flex;
align-items: center;
}
@media (hover: hover) {
.pack-card:hover {
transform: translateY(-2px);
border-color: var(--accent-pink);
}
}
.pack-card:active {
transform: scale(0.98);
}
/* List layout card */
.packs-list .pack-card {
flex-direction: row;
gap: 16px;
padding: 16px 20px;
width: 100%;
}
/* Grid layout card */
.packs-grid .pack-card {
flex-direction: column;
gap: 8px;
padding: 20px 16px;
text-align: center;
}
.packs-grid .pack-card:active {
transform: scale(0.97);
}
/* ---- State Styles ---- */
.pack-card.selected {
border-color: var(--accent-pink);
background: linear-gradient(135deg, rgba(255, 59, 111, 0.15) 0%, rgba(74, 108, 247, 0.15) 100%);
}
.pack-card.premium {
border-color: rgba(255, 215, 0, 0.3);
background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.08) 100%);
}
.pack-card.premium.selected {
border-color: #ffd700;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 59, 111, 0.1) 100%);
}
.pack-card.locked {
opacity: 0.7;
cursor: not-allowed;
}
@media (hover: hover) {
.pack-card.locked:hover {
transform: none;
border-color: rgba(255, 215, 0, 0.3);
}
}
.pack-card.locked:active {
transform: none;
}
/* Opt-in press feedback plus a CSS fallback for selection animation. */
.pack-card.packs-touch-press:not(.locked) {
transform: scale(0.965);
box-shadow: 0 0 0 3px rgba(255, 92, 138, 0.26), 0 8px 22px rgba(233, 30, 99, 0.24);
}
.pack-card.packs-touch-press:not(.locked) .pack-art {
transform: scale(1.09);
transition-duration: 0.12s;
}
.pack-card.packs-touch-pop:not(.locked) {
animation: packsTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}
.pack-card.packs-touch-pop:not(.locked) .pack-art {
animation: packsArtTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}
@keyframes packsTouchPop {
0% { transform: scale(calc(1 - .06 * var(--rp-motion-pack-intensity, 1))); }
55% { transform: scale(calc(1 + .035 * var(--rp-motion-pack-intensity, 1))); }
100% { transform: scale(1); }
}
@keyframes packsArtTouchPop {
0% { transform: scale(calc(1 + .12 * var(--rp-motion-pack-intensity, 1))); }
100% { transform: scale(calc(1 + .01 * var(--rp-motion-pack-intensity, 1))); }
}
@media (prefers-reduced-motion: reduce) {
.pack-card.packs-touch-press,
.pack-card.packs-touch-pop,
.pack-card.packs-touch-pop .pack-art {
animation: none;
transform: none;
}
/* Native WebViews can report reduced motion by default. The opt-in illustrated
gallery keeps its short selection feedback so taps never feel unresponsive. */
.packs-illustrated-grid .pack-card.packs-touch-press:not(.locked) {
transform: scale(0.965);
}
.packs-illustrated-grid .pack-card.packs-touch-pop:not(.locked) {
animation: packsTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}
.packs-illustrated-grid .pack-card.packs-touch-pop:not(.locked) .pack-art {
animation: packsArtTouchPop 0.68s cubic-bezier(0.18, 0.82, 0.22, 1);
}
}
/* ---- Elements ---- */
.pack-icon {
font-size: 36px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.pack-art {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 14px;
object-fit: cover;
}
.pack-art-progressive {
opacity: 0.9;
}
.pack-art-progressive.is-full-res {
opacity: 1;
transition: opacity 0.2s ease;
}
.packs-list .pack-art {
width: 56px;
height: 56px;
border-radius: 12px;
}
.pack-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.pack-name {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.pack-count {
font-size: 13px;
color: var(--text-secondary);
}
.pack-status {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Premium badge — inline in list, absolute in grid. Crown and lock are SVG (pack-glyph), not emoji. */
.premium-badge {
font-size: 18px;
color: #ffd166;
}
.pack-glyph {
display: block;
flex: none;
}
/* Premium pack the test sites open to everyone: the crown badge widens into a pill with «Тест». */
.premium-badge--test {
display: inline-flex;
align-items: center;
gap: 3px;
}
.premium-badge-test-label {
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
}
.packs-illustrated-grid .premium-badge.premium-badge--test,
.packs-illustrated-grid--3 .premium-badge.premium-badge--test {
display: flex;
width: auto;
padding: 0 8px 0 6px;
border-radius: 999px;
}
.packs-illustrated-grid--3 .premium-badge.premium-badge--test {
padding: 0 6px 0 5px;
}
.packs-illustrated-grid--3 .premium-badge-test-label {
font-size: 9px;
}
.packs-grid .premium-badge {
position: absolute;
top: 8px;
right: 8px;
font-size: 14px;
}
.pack-lock {
font-size: 20px;
}
.pack-lock-image {
width: 24px;
height: 24px;
object-fit: contain;
}
.packs-grid .pack-lock {
margin-top: 4px;
}
.pack-check {
width: 26px;
height: 26px;
background: var(--accent-pink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
font-weight: 700;
}
/* ---- Shake Animation ---- */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.pack-card.shake {
animation: shake 0.3s ease;
}
/* ---- Summary Bar ---- */
.packs-summary {
text-align: center;
margin-bottom: 12px;
padding: 12px;
background: var(--bg-card);
border-radius: 12px;
}
.summary-text {
color: var(--text-secondary);
font-size: 14px;
}
.summary-text strong {
color: var(--accent-pink);
font-size: 18px;
}
/* ---- Responsive: Small screens ---- */
@media (max-width: 480px) {
.packs-list,
.packs-grid {
gap: 10px;
}
.packs-illustrated-grid {
gap: 10px;
}
.packs-illustrated-grid .pack-card {
border-radius: 14px;
}
.pack-card {
border-radius: 12px;
}
.packs-list .pack-card {
padding: 14px 16px;
gap: 12px;
}
.packs-grid .pack-card {
padding: 16px 12px;
}
.pack-icon {
font-size: 30px;
}
.pack-name {
font-size: 14px;
}
.pack-count {
font-size: 12px;
}
.premium-badge {
font-size: 14px;
}
.pack-check {
width: 22px;
height: 22px;
font-size: 12px;
}
.packs-summary {
padding: 10px;
}
.summary-text {
font-size: 13px;
}
.summary-text strong {
font-size: 16px;
}
}
/* ---- Responsive: Large screens ---- */
@media (min-width: 768px) {
.packs-list,
.packs-grid {
gap: 16px;
}
.packs-illustrated-grid {
gap: 16px;
}
.packs-illustrated-grid .pack-name {
font-size: 17px;
}
.packs-list .pack-card {
padding: 18px 24px;
}
.pack-icon {
font-size: 42px;
}
.pack-name {
font-size: 18px;
}
.pack-count {
font-size: 14px;
}
}
/* ==================== */
/* Choice gate */
/* ==================== */
/* Until a pack is picked, the screen's actions are removed and the action bar
loses its backdrop, so the gallery uses the whole screen with nothing covering it. */
.packs-awaiting-choice .bottom-section :is(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary),
.packs-awaiting-choice .bottom-section .rp-setup-actions:not(:has(> :not(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary))) {
display: none !important;
}
.packs-awaiting-choice .bottom-section {
padding-top: 0;
background: none;
}
.packs-choice-cue {
position: absolute;
z-index: 6;
top: 8px;
right: 8px;
width: 64px;
height: 56px;
color: var(--packs-cue-color, var(--packs-accent, var(--accent-pink, #ff3b6f)));
pointer-events: none;
filter: drop-shadow(0 3px 0 var(--packs-cue-shadow, rgba(255, 255, 255, 0.92)));
}
.packs-choice-cue svg {
display: block;
width: 100%;
height: 100%;
}
.packs-list .packs-choice-cue {
top: 50%;
right: 12px;
width: 46px;
height: 40px;
margin-top: -20px;
}
@media (prefers-reduced-motion: no-preference) {
.packs-choice-cue {
animation: packs-choice-point 800ms ease-in-out infinite alternate;
}
.packs-choice-revealed .bottom-section :is(.btn-play, .btn-additional-settings, .btn-settings-link, .packs-summary) {
animation: packs-choice-reveal 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.packs-choice-revealed .bottom-section .btn-play {
animation-delay: 60ms;
}
}
@keyframes packs-choice-point {
from { transform: translate(calc(3px * var(--rp-motion-artwork-intensity, 1)), calc(-3px * var(--rp-motion-artwork-intensity, 1))); }
to { transform: translate(calc(-8px * var(--rp-motion-artwork-intensity, 1)), calc(8px * var(--rp-motion-artwork-intensity, 1))); }
}
@keyframes packs-choice-reveal {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: none; }
}
/* ==================== */
/* Flat character covers */
/* ==================== */
/* Packs with an animated cover (pack.activeImage) use the flat character art:
premium covers stay at full colour and a small flat lock sits in the top-right
corner instead of the centred glossy lock, in every layout. */
.pack-card.pack-card--flat-art.locked {
opacity: 1;
}
.pack-card.pack-card--flat-art.locked .pack-art {
filter: none;
}
.pack-card.pack-card--flat-art .pack-lock-image {
position: absolute;
top: 10px;
right: 10px;
left: auto;
z-index: 2;
width: 34px;
height: 34px;
margin: 0;
transform: none;
filter: drop-shadow(0 2px 6px rgba(23, 25, 31, 0.35));
}
/* ==================== */
/* Selected state */
/* ==================== */
/* Every game marks a picked pack the same clear way: a thick ring in the game's cue
colour (palette atlas, checked for contrast with the ink outline) plus a check badge
in the top-left corner (the lock sits top-right, and a picked pack is never locked).
`.screen` + `!important` win over per-game theme borders that were too subtle. */
.screen .pack-card {
--packs-select: var(--packs-cue-color, var(--packs-accent, var(--accent-pink, #ff3b6f)));
}
.screen .pack-card.selected:not(.locked),
.screen .pack-card.premium.selected:not(.locked) {
border-color: var(--packs-select) !important;
border-width: 4px !important;
border-style: solid !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 10px 26px rgba(0, 0, 0, 0.32) !important;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--packs-select) 45%, transparent),
0 10px 26px rgba(0, 0, 0, 0.32) !important;
}
.pack-selected-mark {
position: absolute;
z-index: 7;
top: 8px;
left: 8px;
display: none;
width: 32px;
height: 32px;
border: 2.5px solid #fff;
border-radius: 50%;
background-color: var(--packs-select);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111211' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.pack-card.selected:not(.locked) > .pack-selected-mark {
display: block;
}
@media (prefers-reduced-motion: no-preference) {
.pack-card.selected:not(.locked) > .pack-selected-mark {
animation: packs-mark-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
}
@keyframes packs-mark-pop {
from { transform: scale(0.4); opacity: 0; }
to { transform: none; opacity: 1; }
}
/* Long single words (German, Scandinavian) hyphenate where the browser can; otherwise
packs.js `_fitPackText` shrinks the name so whole words fit. */
.pack-card .pack-name {
-webkit-hyphens: auto;
hyphens: auto;
}
/* The shared badge replaces the old list-layout ✓. */
.pack-card .pack-check {
display: none;
}
/* «Выбрать все» tile (packs.js adds it first when no pack is premium): a flat card fan on
the game's cue colour instead of cover art; selected when every pack is picked. */
.pack-card.pack-select-all {
cursor: pointer;
}
/* `.screen` beats theme rules sized for cover images (Quiz shrinks .pack-art to 72%). */
.screen .packs-illustrated-grid .pack-select-all-art {
display: flex;
align-items: flex-start;
justify-content: center;
height: 100%;
padding: 14% 0 0;
box-sizing: border-box;
background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--packs-select) 34%, transparent) 0 38%, transparent 62%);
}
.packs-illustrated-grid .pack-select-all-art .pack-select-all-icon {
width: 64%;
height: auto;
transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1);
}
.packs-illustrated-grid .pack-select-all.selected .pack-select-all-icon {
transform: scale(1.06) rotate(-3deg);
}
.packs-grid .pack-select-all > .pack-select-all-icon,
.packs-list .pack-select-all > .pack-select-all-icon {
flex-shrink: 0;
width: 56px;
height: auto;
}
/* Plain grid with cover art: the fan fills the cover box (`.pack-art`, sized by the game
theme) instead of a 56px icon in the corner. */
.screen .packs-grid .pack-select-all-art {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--packs-select) 34%, transparent) 0 42%, transparent 66%);
}
.packs-grid .pack-select-all-art .pack-select-all-icon {
width: 82%;
max-height: 100%;
height: auto;
transition: transform 0.35s cubic-bezier(0.18, 0.82, 0.22, 1);
}
.packs-grid .pack-select-all.selected .pack-select-all-art .pack-select-all-icon {
transform: scale(1.06) rotate(-3deg);
}
/* Illustrated grid, three in a row (Packs.render `columns: 3`): for games with many packs.
Smaller covers, so the name, count, lock and «selected» mark shrink with them. */
.packs-illustrated-grid.packs-illustrated-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.packs-illustrated-grid--3 .pack-card {
border-radius: 14px;
}
.packs-illustrated-grid--3 .pack-copy {
left: 7px;
right: 7px;
bottom: 7px;
}
.packs-illustrated-grid--3 .pack-name {
font-size: clamp(11px, 3vw, 14px);
}
.packs-illustrated-grid--3 .pack-count {
margin-top: 2px;
font-size: 10px;
}
.packs-illustrated-grid--3 .premium-badge {
top: 6px;
right: 6px;
width: 22px;
height: 22px;
font-size: 12px;
}
.packs-illustrated-grid--3 .pack-lock-image {
width: 46px;
height: 46px;
}
.packs-illustrated-grid--3 .pack-card > .pack-selected-mark {
top: 6px;
left: 6px;
width: 24px;
height: 24px;
border-width: 2px;
background-size: 15px 15px;
}
@media (min-width: 768px) {
.packs-illustrated-grid.packs-illustrated-grid--3 {
gap: 12px;
}
.packs-illustrated-grid--3 .pack-name {
font-size: 15px;
}
}
/* Section heading inside a pack list (a pack's `section`, e.g. Melody «Режимы» / «Наборы»): spans the
whole row of any layout, so modes and packs read as two groups. */
.packs-section-title {
grid-column: 1 / -1;
margin: 10px 2px 0;
font-family: var(--font-display, inherit);
font-size: 15px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}
.packs-section-title:first-child {
margin-top: 0;
}
/* /premium-cta.css */
/* Premium upsell button (owner 2026-10-20): a pearlescent foil that slowly wobbles in 3D, like the
* cards in Balatro, so it never blends into a game's own palette. Shared: any game puts
* class="rp-premium-cta" on its upsell button and links /premium-cta.css. The glare moves with the tilt;
* with prefers-reduced-motion the button stays flat and still. No emoji: the optional crown is
* --rp-icon-crown from ui-icons.css (class rp-premium-cta--crown). */
.rp-premium-cta {
--rp-pearl-ink: #2b1236;
position: relative;
isolation: isolate;
display: block;
width: 100%;
min-height: 58px;
padding: 12px 18px;
border: 0;
border-radius: 20px;
overflow: hidden;
color: var(--rp-pearl-ink);
font: inherit;
font-size: 15px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
cursor: pointer;
background:
linear-gradient(115deg, #fde7f1 0%, #e4d4ff 18%, #cdf3ee 34%, #fff3c9 50%, #ffd6e6 66%, #d9d1ff 82%, #fde7f1 100%);
background-size: 280% 100%;
background-position: 0% 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .9),
inset 0 -3px 0 rgba(120, 70, 140, .22),
0 0 0 1px rgba(255, 255, 255, .55),
0 12px 28px rgba(190, 140, 255, .35),
0 4px 12px rgba(0, 0, 0, .25);
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Fine foil grain and the moving glare. */
.rp-premium-cta::before,
.rp-premium-cta::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.rp-premium-cta::before {
z-index: -1;
background:
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, .22) 6px 7px),
radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .55), transparent 55%);
mix-blend-mode: soft-light;
}
.rp-premium-cta::after {
z-index: 1;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 46%, rgba(255, 255, 255, .15) 54%, transparent 70%);
background-size: 250% 100%;
background-position: 100% 0;
mix-blend-mode: overlay;
}
.rp-premium-cta--crown .rp-premium-cta-label::before {
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin-right: 8px;
vertical-align: -3px;
background: linear-gradient(135deg, #b0487a, #6d3fbf);
-webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-cta-label { position: relative; z-index: 2; }
.rp-premium-cta:active { filter: brightness(.96); }
.rp-premium-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.rp-premium-cta {
animation: rp-pearl-tilt 4.8s ease-in-out infinite, rp-pearl-shift 4.8s ease-in-out infinite;
}
.rp-premium-cta::after { animation: rp-pearl-glare 4.8s ease-in-out infinite; }
.rp-premium-cta:active { animation-play-state: paused; }
}
/* A slow circle: the tilt goes round the four edges, the colour band and the glare follow it. */
@keyframes rp-pearl-tilt {
0%, 100% { transform: perspective(520px) rotateX(5deg) rotateY(0deg); }
25% { transform: perspective(520px) rotateX(0deg) rotateY(-9deg); }
50% { transform: perspective(520px) rotateX(-5deg) rotateY(0deg); }
75% { transform: perspective(520px) rotateX(0deg) rotateY(9deg); }
}
@keyframes rp-pearl-shift {
0%, 100% { background-position: 50% 50%; }
25% { background-position: 100% 50%; }
50% { background-position: 50% 50%; }
75% { background-position: 0% 50%; }
}
@keyframes rp-pearl-glare {
0%, 100% { background-position: 55% 0; opacity: .7; }
25% { background-position: 0% 0; opacity: 1; }
50% { background-position: 45% 0; opacity: .7; }
75% { background-position: 100% 0; opacity: 1; }
}
/* Premium sample card (premium-teasers.js): the chip «Из премиум-набора «…»» on the card and a
* pink glow around it. The same in every game; the chip sits on any card colour. */
.rp-premium-teaser {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
margin: 6px auto;
padding: 6px 12px 6px 9px;
border-radius: 999px;
background: rgba(23, 25, 31, .82);
border: 1px solid rgba(255, 255, 255, .16);
color: #fff;
font-size: 13px;
font-weight: 750;
line-height: 1.25;
text-align: left;
text-shadow: none;
}
.rp-premium-teaser::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: #ff8fa6;
-webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-teaser[hidden], .rp-premium-teaser-cta[hidden] { display: none; }
.rp-premium-teaser-card {
box-shadow: 0 0 0 2px rgba(255, 122, 147, .55), 0 0 34px rgba(255, 35, 80, .38), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
.rp-premium-teaser-cta { max-width: 420px; margin: 14px auto 0; }
/* A sample adds the chip and the button: on a short phone (or a low PC window) the game screen can get taller than the
* window, and game screens clip (overflow: hidden), so the last answers were cut off with no way to reach them
* (owner 2026-10-29, «Как хорошо ты меня знаешь?»). While a sample is on, its screen scrolls instead; a short window
* also takes a little air out of the button. No overscroll-behavior here: in games whose screen grows with its content
* and the page scrolls («Кто из нас», «Что бы ты выбрал?») `contain` on the screen stopped a finger's scroll from
* reaching the page, so nothing scrolled at all (owner 2026-10-30, «контент в телефоне не влазит но и не скроллится»). */
.screen:has(.rp-premium-teaser-cta:not([hidden])) { overflow-y: auto; }
@media (max-height: 740px) {
.rp-premium-teaser-cta:not(.rp-premium-cta--compact) { min-height: 48px; margin-top: 8px; padding-top: 10px; padding-bottom: 10px; }
}
/* Compact size for a tight game screen (a card, answer buttons and a player row on one phone screen):
* the same pearl button one line high and the chip in smaller type, so the sample does not squeeze the card.
* Used by the online «Я никогда не» card screen. */
.rp-premium-cta--compact {
min-height: 44px;
padding: 8px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.2;
}
.rp-premium-cta--compact.rp-premium-cta--crown .rp-premium-cta-label::before {
width: 16px;
height: 16px;
margin-right: 6px;
}
.rp-premium-teaser--compact {
gap: 5px;
margin: 4px auto;
padding: 4px 10px 4px 8px;
font-size: 12px;
}
.rp-premium-teaser--compact::before { width: 13px; height: 13px; }
/* /video-task.css */
/* «Сними ролик» (video-task.js, owner 2026-10-22): the quiet button «Получи до 7 500 ₽ за это видео. Как?»
* inside the task card, right under the task text, and the sheet with two ways to be paid.
* Calm on purpose (owner: it must not look like an ad banner): no shine, no pulse, it takes the
* card's own ink (currentColor) on a light tint, «Как?» underlined like a link.
* No emoji: icons from ui-icons.css. With prefers-reduced-motion nothing moves. */
.rp-video-task-cta[hidden] { display: none; }
.rp-video-task-cta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
width: 100%;
min-height: 48px;
margin: 16px 0 0;
padding: 10px 14px;
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: 14px;
background: color-mix(in srgb, currentColor 10%, transparent);
color: inherit;
font: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: normal;
text-transform: none;
text-align: left;
cursor: pointer;
transition: background .15s ease, transform .1s ease;
-webkit-tap-highlight-color: transparent;
}
.rp-video-task-cta .rp-icon { flex: none; width: 20px; height: 20px; }
.rp-video-task-cta-how { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rp-video-task-cta:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.rp-video-task-cta:active { transform: scale(.98); }
.rp-video-task-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.rp-video-task-card {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 18px 40px rgba(0, 0, 0, .35) !important;
}
/* The video task is not a card of the deck: no thumbs and no report flag on it. */
.rp-video-task-card .rp-card-vote,
.rp-video-task-card .rp-report-flag { visibility: hidden; }
/* The sheet: RoomPlay core surfaces, like «Час Premium за репост» (share-pass.js). */
.rp-video-task-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(10, 15, 31, .72);
opacity: 0;
transition: opacity .2s ease;
}
.rp-video-task-overlay.visible { opacity: 1; }
.rp-video-task-sheet {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 480px;
max-height: 100%;
overflow-y: auto;
padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
border-radius: 24px 24px 0 0;
background: #1a2140;
color: #fff;
font-family: inherit;
text-align: center;
transform: translateY(24px);
transition: transform .2s ease;
}
.rp-video-task-overlay.visible .rp-video-task-sheet { transform: none; }
.rp-video-task-sheet:focus { outline: none; }
.rp-video-task-close {
position: absolute;
top: 8px;
right: 8px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 20px;
opacity: .75;
cursor: pointer;
}
.rp-video-task-title { margin: 8px 40px 8px; font-size: 22px; font-weight: 800; line-height: 1.25; }
.rp-video-task-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option {
margin: 0 0 12px;
padding: 18px 16px 16px;
border-radius: 20px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
text-align: left;
}
.rp-video-task-option-icon { display: block; width: 28px; height: 28px; margin: 0 0 8px; }
.rp-video-task-option--premium .rp-video-task-option-icon { color: #ffd166; }
.rp-video-task-option--money .rp-video-task-option-icon { color: #6ee7b7; }
.rp-video-task-option-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.rp-video-task-option-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #c9cfe6; }
.rp-video-task-option-cta {
display: block;
width: 100%;
min-height: 48px;
padding: 10px 16px;
border: 0;
border-radius: 30px;
background: var(--settings-accent, #7c3aed);
color: var(--rp-video-cta-ink, #fff);
font: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.rp-video-task-option--money .rp-video-task-option-cta {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.rp-video-task-close:focus-visible, .rp-video-task-option-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.rp-video-task-cta { transition: none; }
.rp-video-task-overlay, .rp-video-task-sheet { transition: none; }
}
/* /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; }
/* /settings-popup.css */
/*
* Settings popup. Game Themes recolour it through the --rp-dialog-* tokens shared with
* confirm-dialog.css (see there), plus the controls:
* --rp-dialog-control-bg (selector track), --rp-dialog-control-btn-bg / -text / -active / -radius (−/+),
* --rp-dialog-value, --rp-dialog-toggle-bg / -text, --rp-dialog-toggle-on-bg / -on-text.
* The primary «Готово» falls back to --settings-accent; fallbacks keep the original navy look.
*/
.settings-popup-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;
}
.settings-popup-overlay.active {
display: flex;
}
.settings-popup-modal {
background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
/* Base text colour for currentColor parts such as «Предложить идею». */
color: var(--rp-dialog-title, #ffffff);
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: 380px;
width: 100%;
/* A tall sheet (many rows, a short phone): the title and «Готово» stay put and only the rows
scroll; a fade at the bottom edge (.settings-popup-content--more) shows there is more below. */
max-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.settings-popup-title {
font-size: 20px;
font-weight: 700;
color: var(--rp-dialog-title, #ffffff);
margin-bottom: 24px;
text-align: center;
}
.settings-popup-content {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
/* Room for focus outlines at the clipped edges. */
margin-inline: -4px;
padding: 2px 4px;
}
.settings-popup-content > * { flex: none; }
.settings-popup-title,
.settings-popup-done { flex: none; }
.settings-popup-content--more {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
.settings-popup-row {
/* Rows sit directly on the modal surface: Game Themes recolour the modal,
controls and text, never the row itself (a tinted row reads as a stray strip). */
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* App-wide «Звуки» / «Вибрация» rows (ui-feedback.js) follow the game's own settings,
separated by a thin divider in the label colour; when they are the only rows, no divider. */
.settings-popup-row-app-first:not(:first-child) {
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.settings-popup-label {
font-size: 15px;
color: var(--rp-dialog-text, #c0c8e0);
flex: 1;
min-width: 0;
}
.settings-popup-selector {
display: flex;
align-items: center;
gap: 0;
background: var(--rp-dialog-control-bg, rgba(255, 255, 255, 0.06));
border-radius: 14px;
padding: 4px;
flex-shrink: 0;
}
.settings-popup-btn {
width: 40px;
height: 40px;
border: none;
border-radius: var(--rp-dialog-control-btn-radius, 12px);
background: var(--rp-dialog-control-btn-bg, rgba(255, 255, 255, 0.08));
color: var(--rp-dialog-control-btn-text, var(--rp-dialog-title, #ffffff));
font-size: 20px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
font-family: inherit;
}
.settings-popup-btn:active {
background: var(--rp-dialog-control-btn-active, rgba(255, 255, 255, 0.15));
}
/* Hit areas. The shared press animation (game-motion.css: scale .96 + 2px down) moves a button
away from the finger, so a tap on its top edge was lifted outside it and lost, and the 4px
track padding around −/+ never counted. An invisible ::before larger than the button moves
with it and keeps those taps; −/+ also cover the track padding. Choice options touch each
other (4px gap), so they only grow into half the gap. */
.settings-popup-btn,
.settings-popup-toggle,
.settings-popup-link {
position: relative;
touch-action: manipulation;
}
.settings-popup-btn::before,
.settings-popup-toggle::before,
.settings-popup-link::before {
content: '';
position: absolute;
inset: -8px -6px;
}
.settings-popup-choice-option::before {
inset: -2px;
}
.settings-popup-link::before {
inset: -4px;
}
.settings-popup-value {
min-width: 60px;
padding: 0 8px;
white-space: nowrap;
text-align: center;
font-size: 18px;
font-weight: 700;
color: var(--rp-dialog-value, var(--rp-dialog-title, #ffffff));
}
.settings-popup-row-choice {
flex-wrap: wrap;
gap: 8px;
}
.settings-popup-row-choice .settings-popup-label {
flex-basis: 100%;
}
/* Segmented control for `type: 'choice'`: equal options, the chosen one in the primary colour. */
.settings-popup-choice {
flex: 1 1 100%;
flex-wrap: wrap;
min-width: 0;
gap: 4px;
}
.settings-popup-choice-option {
/* Sized by their labels, so a short «Классика» leaves room for «Большинство»; a label set
too long for one row wraps onto a second line instead of splitting a word. */
flex: 1 1 auto;
width: auto;
min-width: 0;
min-height: 44px;
height: auto;
padding: 6px 4px;
font-size: 13px;
font-weight: 700;
line-height: 1.15;
overflow-wrap: anywhere;
background: transparent;
color: var(--rp-dialog-text, #c0c8e0);
}
.settings-popup-choice-option.active {
color: var(--rp-dialog-toggle-on-text, var(--rp-dialog-primary-text, #ffffff));
background: var(--rp-dialog-toggle-on-bg, var(--rp-dialog-primary-bg, var(--settings-accent, #ff3b6f)));
}
/* Phones narrower than ~380 px can't fit three or more labels in a row: list them one under another. */
@media (max-width: 380px) {
.settings-popup-choice:has(> :nth-child(3)) { flex-direction: column; align-items: stretch; }
.settings-popup-choice:has(> :nth-child(3)) .settings-popup-choice-option { min-height: 40px; }
}
.settings-popup-choice-option:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
.settings-popup-choice-hint {
flex-basis: 100%;
margin: 0;
font-size: 13px;
line-height: 1.35;
color: var(--rp-dialog-text, #c0c8e0);
opacity: 0.8;
}
.settings-popup-toggle {
min-width: 104px;
min-height: 48px;
padding: 4px 6px 4px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 0;
border-radius: 24px;
color: var(--rp-dialog-toggle-text, var(--rp-dialog-text, #c0c8e0));
background: var(--rp-dialog-toggle-bg, rgba(255, 255, 255, 0.08));
cursor: pointer;
font: inherit;
font-weight: 700;
}
.settings-popup-toggle::after {
content: '';
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
transition: transform 0.2s ease;
}
.settings-popup-toggle.active {
color: var(--rp-dialog-toggle-on-text, var(--rp-dialog-primary-text, #ffffff));
background: var(--rp-dialog-toggle-on-bg, var(--rp-dialog-primary-bg, var(--settings-accent, #ff3b6f)));
}
.settings-popup-toggle.active::after {
transform: scale(0.78);
}
.settings-popup-toggle:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.settings-popup-done {
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;
background: var(--rp-dialog-primary-bg, linear-gradient(135deg, var(--settings-accent, #ff3b6f), var(--settings-accent-dark, #cc2f59)));
color: var(--rp-dialog-primary-text, white);
box-shadow: var(--rp-dialog-primary-shadow, none);
}
.btn-additional-settings {
width: 100%;
background: transparent;
border: 2px solid var(--settings-accent, #ff3b6f);
color: var(--text-primary, #ffffff);
padding: 16px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
font-family: inherit;
margin-bottom: 12px;
}
.btn-additional-settings:hover {
background: color-mix(in srgb, var(--settings-accent, #ff3b6f) 10%, transparent);
}
.btn-additional-settings:active {
transform: scale(0.98);
}
/* «Предложить идею»: a quiet text button under the app rows, and the idea form drawn in the
same modal. Colours come from currentColor so every Game Theme's modal palette applies. */
.settings-popup-row-idea { justify-content: center; }
.settings-popup-idea,
.settings-popup-idea-back {
min-height: 44px;
padding: 8px 12px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
opacity: 0.8;
cursor: pointer;
}
.settings-popup-idea-back { align-self: center; }
.settings-popup-idea:focus-visible,
.settings-popup-idea-back:focus-visible,
.settings-popup-idea-text:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.settings-popup-idea-hint,
.settings-popup-idea-thanks {
margin: 0;
font-size: 15px;
line-height: 1.4;
text-align: center;
opacity: 0.85;
}
.settings-popup-idea-thanks { font-size: 17px; opacity: 1; padding: 16px 0; }
.settings-popup-idea-text {
width: 100%;
min-height: 112px;
padding: 12px;
box-sizing: border-box;
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: 16px;
background: color-mix(in srgb, currentColor 6%, transparent);
color: inherit;
font: inherit;
font-size: 16px;
resize: vertical;
}
.settings-popup-idea-text::placeholder { color: inherit; opacity: 0.55; }
.settings-popup-idea-status { margin: 0; min-height: 18px; font-size: 14px; color: var(--rp-wrong, #ff8a9a); text-align: center; }
.settings-popup-done:disabled { opacity: 0.5; cursor: default; }
/* `type: 'link'` row: opens a game's own sub-screen. Summary text + chevron, same control
surface as the steppers so it reads as part of the same sheet. */
.settings-popup-link {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
max-width: 55%;
min-height: 48px;
padding: 4px 12px 4px 16px;
border: 0;
border-radius: 14px;
background: var(--rp-dialog-control-bg, rgba(255, 255, 255, 0.06));
color: var(--rp-dialog-value, var(--rp-dialog-title, #ffffff));
font: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.settings-popup-link-value {
min-width: 0;
overflow-wrap: anywhere;
text-align: right;
}
.settings-popup-link::after {
content: '';
flex-shrink: 0;
width: 8px;
height: 8px;
border-right: 2.1px solid currentColor;
border-top: 2.1px solid currentColor;
border-radius: 1px;
transform: rotate(45deg);
margin-right: 4px;
}
.settings-popup-link:active {
background: var(--rp-dialog-control-btn-active, rgba(255, 255, 255, 0.15));
}
.settings-popup-link:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
/* «Получи до 7 500 ₽ за рекомендацию RoomPlay. Как?»: the video task's quiet button (video-task.css) as a settings row. */
.settings-popup-row-earn { justify-content: center; }
.settings-popup-earn.rp-video-task-cta { margin: 0; justify-content: center; }
/* /player-setup.css */
/* Player Setup — shared styles for player/team input screens */
/* Uses ps- prefix to avoid collisions during incremental migration */
.ps-entry {
/* Same compact row as the room player list (create-room .player-item). */
display: flex;
align-items: center;
background: var(--bg-card);
border-radius: 14px;
min-height: 56px;
padding: 8px 12px;
margin-bottom: 6px;
animation: ps-slideIn 0.3s ease;
}
.ps-list.ps-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ps-list > .ps-entry { margin-bottom: 0; }
@keyframes ps-slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/*
* Add / remove motion, same as the room player list (create-room .player-item.is-new / .is-leaving):
* a new row opens its slot and pops in with a soft squash while its icon bounces and rings once in the
* setup accent; a removed row squashes, shrinks out and closes its slot so the rows below glide up.
* The -6px margin cancels the .ps-list gap while the slot is closed. JS adds these classes only when
* motion is allowed. !important: some Game Themes give every row an id-scoped arrival animation
* (#players-screen.active .ps-entry), which would otherwise win over these one-off states.
*/
.ps-entry.ps-entry--new {
transform-origin: 30px 50%;
animation: ps-row-slot 260ms ease-out both, ps-row-join 520ms cubic-bezier(.2, .9, .3, 1.25) both !important;
}
.ps-entry--new .ps-icon { animation: ps-icon-join 520ms cubic-bezier(.2, .9, .3, 1.25) 80ms both; }
/* After the join the row must not animate again: dropping .ps-entry--new would otherwise swap the
animation back to the row's own arrival (ps-slideIn or a theme's #players-screen.active .ps-entry)
and play it a second time. */
.ps-entry--settled { animation: none !important; }
.ps-entry.ps-entry--leaving {
pointer-events: none;
overflow: hidden;
transform-origin: 30px 50%;
animation: ps-row-leave 420ms cubic-bezier(.5, 0, .75, .3) both !important;
}
@keyframes ps-row-slot {
from { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; }
to { max-height: var(--ps-row-max, 80px); }
}
@keyframes ps-row-join {
0% { opacity: 0; transform: scale(.55); }
45% { opacity: 1; transform: scale(1.05, .93); }
70% { transform: scale(.98, 1.03); }
100% { opacity: 1; transform: none; }
}
@keyframes ps-icon-join {
0% { transform: scale(.3); box-shadow: 0 0 0 0 var(--ps-accent); }
50% { transform: scale(1.18, .86); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ps-accent) 45%, transparent); }
75% { transform: scale(.95, 1.06); }
100% { transform: none; box-shadow: 0 0 0 10px transparent; }
}
@keyframes ps-row-leave {
0% { opacity: 1; transform: none; max-height: var(--ps-row-max, 80px); }
22% { opacity: 1; transform: scale(1.04, .9); max-height: var(--ps-row-max, 80px); }
60% { opacity: 0; transform: scale(.5); max-height: var(--ps-row-max, 80px); min-height: 56px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; }
100% { opacity: 0; transform: scale(.5); max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -6px; }
}
.ps-icon {
position: relative;
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 18px;
cursor: pointer;
flex-shrink: 0;
}
.ps-icon--avatar {
overflow: hidden;
cursor: default;
background: var(--bg-secondary);
color: var(--text-primary);
font-weight: 700;
}
.ps-icon--avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Player mode icon states */
.ps-icon--filled {
background: var(--ps-accent);
}
.ps-icon--empty {
background: var(--bg-secondary);
border: 1px solid var(--text-secondary);
}
.ps-input {
flex: 1;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 16px;
outline: none;
min-width: 0;
}
.ps-input::placeholder {
color: var(--text-placeholder);
}
.ps-remove {
background: none;
border: none;
color: var(--text-secondary);
font-size: 24px;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Clear gap from the gender toggle so a tap on one never lands on the other. */
margin: -2px -6px -2px 16px;
position: relative;
transition: color 0.2s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
/* A just-added player: the ✕ is a ✓ in the setup accent until the name is saved. */
.ps-remove.ps-remove--confirm {
width: 36px;
height: 36px;
margin: 0 -4px 0 18px;
border-radius: 999px;
color: var(--ps-confirm-ink, #17191f);
background: var(--ps-accent);
}
.ps-remove--confirm svg { width: 20px; height: 20px; display: block; }
.ps-remove--confirm:active { transform: scale(0.9); }
.ps-remove:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
/* The ✕ that replaces the ✓ after saving pops in. */
.ps-remove--saved { animation: ps-remove-saved 320ms cubic-bezier(.2, .9, .3, 1.25); }
@keyframes ps-remove-saved {
0% { transform: scale(.4) rotate(-45deg); opacity: 0; }
70% { transform: scale(1.15) rotate(6deg); opacity: 1; }
100% { transform: none; }
}
/* Gender badge is a toggle: a tap switches male <-> female. */
.ps-gender {
position: relative;
width: 32px;
height: 32px;
border-radius: 999px;
border: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
margin-left: 8px;
font: inherit;
font-size: 16px;
font-weight: 800;
background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
color: var(--text-secondary);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease;
}
/* Compact visuals, but each control keeps a 44px touch area. */
.ps-icon::after,
.ps-gender::after,
.ps-remove::after { content: ''; position: absolute; inset: -4px; }
.ps-gender::after { inset: -6px; }
.ps-gender:active { transform: scale(0.9); }
.ps-gender:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-gender--flip .rp-gender-icon { animation: ps-gender-flip 0.28s ease; }
@keyframes ps-gender-flip {
0% { transform: scale(0.4) rotate(-40deg); opacity: 0; }
70% { transform: scale(1.15) rotate(6deg); opacity: 1; }
100% { transform: scale(1) rotate(0); }
}
.ps-gender--female { color: var(--rp-female, #ff7aaa); }
.ps-gender--male { color: var(--rp-male, #68a8ff); }
/*
* «Перенести игроков?» is a dialog like «Выйти из игры?» and the settings popup, so it takes the
* same --rp-dialog-* tokens every game theme sets (confirm-dialog.css), not the page's --bg-card /
* --text-primary: those meant white text on a cream card in «5 секунд» and «Покажи слово».
* Fallbacks are the shared navy dialog.
*/
.ps-roster-import-overlay {
--rp-import-ink: var(--rp-dialog-title, #ffffff);
--rp-import-muted: var(--rp-dialog-text, #8892b0);
--rp-import-accent: var(--rp-dialog-primary-bg, linear-gradient(135deg, #ff3b6f, #cc2f59));
--rp-import-on-accent: var(--rp-dialog-primary-text, #ffffff);
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
background: var(--rp-dialog-overlay, rgba(4, 7, 20, 0.82));
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 180ms ease;
}
.ps-roster-import-overlay.active { opacity: 1; }
.ps-roster-import-modal {
width: min(100%, 390px);
max-height: min(720px, calc(100dvh - 40px));
display: flex;
flex-direction: column;
padding: 24px;
border: var(--rp-dialog-border, 1px solid color-mix(in srgb, var(--rp-import-ink) 10%, transparent));
border-radius: var(--rp-dialog-radius, 26px);
background: var(--rp-dialog-bg, linear-gradient(135deg, #252b4a 0%, #1a2140 100%));
box-shadow: var(--rp-dialog-shadow, 0 28px 70px rgba(0, 0, 0, 0.45));
color: var(--rp-import-ink);
transform: translateY(14px) scale(0.98);
transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.ps-roster-import-overlay.active .ps-roster-import-modal {
transform: translateY(0) scale(1);
}
.ps-roster-import-title {
margin: 0;
text-align: center;
font-size: clamp(22px, 6vw, 28px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--rp-import-ink);
}
.ps-roster-import-subtitle,
.ps-roster-import-overflow {
margin: 8px 0 18px;
text-align: center;
color: var(--rp-import-muted);
font-size: 14px;
line-height: 1.4;
}
.ps-roster-import-list {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
display: grid;
gap: 8px;
padding: 2px 2px 4px;
scrollbar-width: thin;
}
.ps-roster-import-player {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 32px;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 6px 10px 6px 6px;
border-radius: 16px;
background: color-mix(in srgb, var(--rp-import-ink) 7%, transparent);
}
.ps-roster-import-avatar {
width: 46px;
height: 46px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--rp-import-accent);
color: var(--rp-import-on-accent);
font-weight: 800;
}
.ps-roster-import-avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ps-roster-import-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--rp-import-ink);
font-size: 17px;
font-weight: 650;
}
.ps-roster-import-gender {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--rp-import-ink) 8%, transparent);
color: var(--rp-import-muted);
font-size: 17px;
font-weight: 800;
}
.ps-roster-import-gender--female { color: var(--rp-female, #ff7aaa); }
.ps-roster-import-gender--male { color: var(--rp-male, #68a8ff); }
.ps-roster-import-overflow {
margin: 12px 4px 0;
font-size: 13px;
}
.ps-roster-import-actions {
display: grid;
gap: 10px;
margin-top: 20px;
}
.ps-roster-import-button {
min-height: 50px;
width: 100%;
border-radius: var(--rp-dialog-btn-radius, 999px);
border: 0;
font: inherit;
font-size: 16px;
font-weight: 750;
cursor: pointer;
touch-action: manipulation;
}
.ps-roster-import-button--primary {
background: var(--rp-import-accent);
color: var(--rp-import-on-accent);
box-shadow: var(--rp-dialog-primary-shadow, 0 10px 24px rgba(0, 0, 0, 0.22));
}
.ps-roster-import-button--secondary {
border: 2px solid var(--rp-dialog-secondary-border, #3a4167);
background: var(--rp-dialog-secondary-bg, transparent);
color: var(--rp-dialog-secondary-text, var(--rp-import-muted));
}
.ps-roster-import-button:focus-visible {
outline: 3px solid var(--rp-import-ink);
outline-offset: 3px;
}
@media (max-height: 560px) and (orientation: landscape) {
.ps-roster-import-modal { max-height: calc(100dvh - 20px); padding: 18px; }
.ps-roster-import-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-roster-import-player { grid-template-columns: 40px minmax(0, 1fr) 28px; min-height: 46px; }
.ps-roster-import-avatar { width: 40px; height: 40px; }
.ps-roster-import-actions { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ps-entry,
.ps-gender,
.ps-remove--saved,
.ps-gender--flip .rp-gender-icon,
.ps-roster-import-overlay,
.ps-roster-import-modal { animation: none; transition: none; }
}
@media (hover: hover) {
.ps-remove:hover {
color: var(--ps-accent);
}
}
/* Add button (games apply this class to their existing button) */
.ps-add-btn {
background: transparent;
border: 2px solid var(--ps-accent);
color: var(--text-primary);
padding: 16px 40px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin: 0 auto 30px;
display: block;
transition: all 0.3s ease;
}
@media (hover: hover) {
.ps-add-btn:hover {
background: var(--ps-accent);
transform: scale(1.02);
}
}
.ps-add-btn:active {
transform: scale(0.98);
}
/* Mobile */
@media (max-width: 480px) {
.ps-add-btn {
padding: 14px 30px;
font-size: 14px;
margin-bottom: 20px;
}
}
/*
* Gender icons: one upright ♂ / ♀ pair as SVG masks instead of font glyphs, so the
* sign is always centred in its badge whatever the game font (font ♂/♀ glyphs sit
* high/low and off to the side). Colour comes from currentColor.
* Markup:
* The same shapes are defined in player-gender.css and player-setup.css; keep them in sync.
*/
:root {
--rp-icon-male: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='14' r='5.5'/%3E%3Cpath d='M14 10l5.5-5.5M14 4.5h5.5V10'/%3E%3C/svg%3E");
--rp-icon-female: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='M12 14v7M8.5 17.8h7'/%3E%3C/svg%3E");
}
.rp-gender-icon {
display: block;
flex: none;
width: 0.9em;
height: 0.9em;
background-color: currentColor;
-webkit-mask: var(--rp-icon-male) center / contain no-repeat;
mask: var(--rp-icon-male) center / contain no-repeat;
}
.rp-gender-icon--female {
-webkit-mask-image: var(--rp-icon-female);
mask-image: var(--rp-icon-female);
}
.ps-gender .rp-gender-icon,
.ps-roster-import-gender .rp-gender-icon {
width: 18px;
height: 18px;
}
/* ---- Avatar picker (shared avatar-capture.js sheet, loaded on the first avatar tap) ----
Same bottom sheet as the room picker (create-room/room-themes.css), coloured from the game theme:
page background, translucent text-colour surfaces, and the setup accent. player-setup.js puts the
resolved accent and its ink on (--ps-ac-accent / --ps-ac-on-accent) before opening. */
.avatar-capture-overlay { background: rgba(0, 0, 0, 0.6); align-items: flex-end; }
.avatar-capture-modal {
background: linear-gradient(180deg, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 84%, #000) 100%);
border-top: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
color: var(--text-primary);
}
.avatar-capture-close {
background: color-mix(in srgb, var(--text-primary) 14%, transparent);
color: var(--text-primary);
}
.avatar-capture-tabs {
background: color-mix(in srgb, var(--text-primary) 12%, transparent);
border-radius: 14px;
margin-right: 44px;
}
.avatar-capture-tab { color: var(--text-secondary); border-radius: 10px; }
.avatar-capture-tab.active { background: var(--ps-ac-accent, var(--settings-accent)); color: var(--ps-ac-on-accent, #ffffff); }
.avatar-capture-gif-item { background: color-mix(in srgb, var(--text-primary) 12%, transparent); border-radius: 10px; }
.avatar-capture-gif-item:hover { border-color: var(--ps-ac-accent, var(--settings-accent)); }
.avatar-capture-gif-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 22%, transparent); }
.avatar-capture-guide, .avatar-capture-preview { border-color: var(--ps-ac-accent, var(--settings-accent)); }
.avatar-capture-btn { border-radius: 14px; }
.avatar-capture-btn-capture, .avatar-capture-btn-use { background: var(--ps-ac-accent, var(--settings-accent)); color: var(--ps-ac-on-accent, #ffffff); }
.avatar-capture-btn-retake { border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); color: var(--text-primary); }
/*
* Teams with players (PlayerSetup config.members): each team is a card with its name row on top and
* its players as chips below. A chip is dragged to another team, or tapped and then the team (the
* other teams show a dashed «Сюда» target). Colours come from the game theme: the card is the theme's
* .ps-entry, chips are a translucent tint of the card's ink, highlights use --ps-accent. A theme whose
* cards are lighter than its screen sets --ps-card-ink / --ps-card-muted on .ps-entry.
*/
.ps-entry.ps-entry--team {
--ps-row-max: 420px;
flex-direction: column;
align-items: stretch;
padding: 8px 12px 12px;
transition: box-shadow 160ms ease, transform 160ms ease;
}
.ps-team-head {
display: flex;
align-items: center;
min-height: 40px;
}
.ps-team-members {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 8px;
min-height: 44px;
}
.ps-team-tools {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
}
.ps-team-hint {
flex: 1;
margin: 0;
font-size: 14px;
line-height: 1.35;
color: var(--text-secondary);
}
.ps-team-shuffle {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
min-height: 40px;
padding: 0 14px;
border: 1.5px solid color-mix(in srgb, var(--text-primary) 45%, transparent);
border-radius: 999px;
background: transparent;
color: var(--text-primary);
font: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
transition: transform 120ms ease, background-color 160ms ease;
}
.ps-team-shuffle::after { content: ''; position: absolute; inset: -4px 0; }
.ps-team-shuffle .rp-icon { font-size: 18px; }
.ps-team-shuffle:active { transform: scale(0.95); background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.ps-team-shuffle:active .rp-icon { animation: ps-dice-roll 360ms ease; }
.ps-team-shuffle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ps-team-shuffle[hidden] { display: none; }
@keyframes ps-dice-roll {
0% { transform: rotate(0); }
100% { transform: rotate(180deg); }
}
.ps-member,
.ps-member-add,
.ps-member-drop,
.ps-member-input {
box-sizing: border-box;
min-height: 40px;
border-radius: 999px;
font: inherit;
font-size: 15px;
line-height: 1.2;
-webkit-tap-highlight-color: transparent;
}
.ps-member {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 4px 14px 4px 5px;
background: color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 9%, transparent);
color: var(--ps-card-ink, var(--text-primary));
font-weight: 600;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
transition: background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
/* Bigger touch target than the visual pill. */
.ps-member::before { content: ''; position: absolute; inset: -2px -2px; }
.ps-member .rp-player { gap: 8px; min-width: 0; }
.ps-member .rp-player-avatar { font-size: 15px; width: 30px; height: 30px; }
.ps-member .rp-player-avatar--emoji { font-size: 17px; }
.ps-member-label { display: inline-flex; min-width: 0; max-width: 100%; }
.ps-member:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-member:active { cursor: grabbing; }
.ps-member--selected {
background: color-mix(in srgb, var(--ps-accent) 22%, transparent);
box-shadow: 0 0 0 2px var(--ps-accent);
padding-right: 4px;
}
.ps-member-remove {
display: none;
position: relative;
width: 30px;
height: 30px;
margin-left: 6px;
padding: 0;
border: none;
border-radius: 50%;
background: color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 14%, transparent);
color: var(--ps-card-ink, var(--text-primary));
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.ps-member-remove::after { content: ''; position: absolute; inset: -6px; }
.ps-member--selected .ps-member-remove { display: inline-flex; align-items: center; justify-content: center; }
.ps-member-remove:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 1px; }
.ps-member--dragging { opacity: 0.32; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ps-card-ink, var(--text-primary)) 35%, transparent); }
.ps-member--dragging > * { visibility: hidden; }
.ps-member.ps-member--ghost {
position: fixed;
z-index: 1400;
margin: 0;
pointer-events: none;
background: var(--ps-ghost-bg, #fff);
background-image: linear-gradient(color-mix(in srgb, var(--ps-accent) 20%, transparent), color-mix(in srgb, var(--ps-accent) 20%, transparent));
box-shadow: 0 0 0 2px var(--ps-accent), 0 14px 28px rgba(0, 0, 0, 0.32);
transform-origin: 30% 50%;
will-change: transform;
}
.ps-member-add,
.ps-member-drop {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
border: 1.5px dashed color-mix(in srgb, var(--ps-card-muted, var(--text-secondary)) 70%, transparent);
background: transparent;
color: var(--ps-card-muted, var(--text-secondary));
font-weight: 600;
cursor: pointer;
}
.ps-member-add span:first-child { font-size: 19px; font-weight: 700; line-height: 1; }
.ps-member-add:active { transform: scale(0.95); }
.ps-member-add:focus-visible,
.ps-member-drop:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-member-drop {
border-color: var(--ps-accent);
color: var(--ps-card-ink, var(--text-primary));
background: color-mix(in srgb, var(--ps-accent) 10%, transparent);
animation: ps-drop-pulse 1.2s ease-in-out infinite;
}
@keyframes ps-drop-pulse {
0%, 100% { background-color: color-mix(in srgb, var(--ps-accent) 8%, transparent); }
50% { background-color: color-mix(in srgb, var(--ps-accent) 22%, transparent); }
}
.ps-member-input {
width: 140px;
padding: 0 14px;
border: 1.5px solid var(--ps-accent);
background: transparent;
color: var(--ps-card-ink, var(--text-primary));
outline: none;
}
/* ✓ beside the new member's name field (owner 2026-11-02), the same accent circle as .ps-remove--confirm. */
.ps-member-confirm {
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ps-confirm-ink, #17191f);
background: var(--ps-accent);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ps-member-confirm svg { width: 20px; height: 20px; display: block; }
.ps-member-confirm:active { transform: scale(0.9); }
.ps-member-confirm:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-member-input::placeholder { color: var(--ps-card-muted, var(--text-placeholder, var(--text-secondary))); }
/* Picking with a tap: the other teams are targets, the whole card is tappable. */
.ps-list--picking .ps-entry--pick-target { cursor: pointer; }
.ps-entry--team.ps-entry--drop {
box-shadow: 0 0 0 2.5px var(--ps-accent), 0 8px 20px color-mix(in srgb, var(--ps-accent) 25%, transparent);
transform: scale(1.015);
}
.ps-list--dragging { cursor: grabbing; }
.ps-entry--received { animation: ps-team-receive 420ms ease !important; }
@keyframes ps-team-receive {
0% { box-shadow: 0 0 0 0 var(--ps-accent); }
40% { box-shadow: 0 0 0 3px var(--ps-accent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.ps-member--new { animation: ps-member-join 420ms cubic-bezier(.2, .9, .3, 1.25) both; }
.ps-member--landed { animation: ps-member-land 380ms cubic-bezier(.2, .9, .3, 1.25); }
@keyframes ps-member-join {
0% { opacity: 0; transform: scale(.4); }
55% { opacity: 1; transform: scale(1.08, .92); }
100% { opacity: 1; transform: none; }
}
@keyframes ps-member-land {
0% { transform: scale(1.1, .88); }
55% { transform: scale(.96, 1.05); }
100% { transform: none; }
}
/* Turn screen: «Ходит» + the player, teammates as small avatars (PlayerSetup.renderTeamTurn). */
.ps-team-turn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 12px auto 16px;
text-align: center;
color: var(--text-primary);
}
.ps-team-turn[hidden] { display: none; }
.ps-team-turn-label {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.ps-team-turn-player.rp-player { font-size: 24px; font-weight: 800; }
.ps-team-turn-others {
display: inline-flex;
gap: 4px;
font-size: 17px;
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
.ps-member, .ps-entry--team, .ps-team-shuffle { transition: none; }
.ps-member--new, .ps-member--landed, .ps-entry--received, .ps-member-drop, .ps-team-shuffle:active .rp-icon { animation: none !important; }
.ps-entry--team.ps-entry--drop { transform: 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;
}
/* /player-pick.css */
/*
* «Кого выбрали?» (player-pick.js): the players as cards to tap on one phone, the same in every game.
* Colours: --rp-pick-surface (card), --rp-pick-accent (picked card), --rp-pick-ring (picked border).
*/
.rp-pick-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
padding-bottom: 8px;
}
.rp-pick-option {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 64px;
padding: 8px 10px;
border: 2px solid transparent;
border-radius: 18px;
color: var(--text-primary, #fff);
background: var(--rp-pick-surface, #262629);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.rp-pick-option:active { transform: scale(.97); }
@media (hover: hover) { .rp-pick-option:hover { border-color: var(--rp-pick-ring, #e0336e); } }
.rp-pick-option:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rp-pick-option.selected { border-color: var(--rp-pick-ring, #e0336e); background: var(--rp-pick-accent, #a51043); }
.rp-pick-option .rp-pick-avatar { flex: 0 0 auto; width: 40px; height: 40px; font-size: 16px; }
.rp-pick-name { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rp-pick-check {
display: none;
place-items: center;
width: 24px;
height: 24px;
flex: 0 0 auto;
border-radius: 50%;
color: var(--rp-pick-accent, #a51043);
background: #fff;
font-size: 14px;
}
.rp-pick-option.selected .rp-pick-check { display: grid; }
@media (max-width: 299px) { .rp-pick-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rp-pick-option { transition: none; } }
/* /answer-marks.css */
/*
* Answer marks: the one upright ✓ / ✕ pair for right and wrong answers in every game.
* SVG masks instead of font glyphs, so the shape never depends on the game font
* (no italic or slanted checks) and the colour always comes from the theme
* (--rp-correct / --rp-wrong / --rp-*-ink, see COMMON/roomplay-palettes.html).
*
* Markup:
*
* The mark is 1em and takes currentColor; size and colour come from the context.
* Pseudo-elements reuse the same shapes through --rp-icon-check / --rp-icon-cross
* (bare glyph) and --rp-icon-check-badge / --rp-icon-cross-badge (glyph in a circle).
*/
:root {
--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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
--rp-icon-cross: 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.2' stroke-linecap='round'%3E%3Cpath d='M6.8 6.8l10.4 10.4M17.2 6.8L6.8 17.2'/%3E%3C/svg%3E");
/* Filled circle with the check cut out, and a ring around the cross. */
--rp-icon-check-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M7.2 12.4l3.2 3.2 6.4-6.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' mask='url(%23m)'/%3E%3C/svg%3E");
--rp-icon-cross-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.8' stroke-width='2.4'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2' stroke-width='2.4'/%3E%3C/svg%3E");
}
.rp-mark {
display: inline-block;
flex: none;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background-color: currentColor;
-webkit-mask: var(--rp-icon-check) center / contain no-repeat;
mask: var(--rp-icon-check) center / contain no-repeat;
}
.rp-mark--wrong {
-webkit-mask-image: var(--rp-icon-cross);
mask-image: var(--rp-icon-cross);
}
/* /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); }
/* /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; }
}
/* /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; }
}
/* /whosmostlikelyto/wm-theme.css */
/* Game Theme only. Palette: COMMON/roomplay-palettes.html / whosmostlikelyto («Кто из нас»).
bg #171719 near-black, surface #262629, accent #A51043 crimson (white text 7.6:1; fills only — as text on bg it is 2.4:1,
so text accents use #FF7AA2: 7.3:1 on bg, 6.2:1 on surface; outlines/borders use #E0336E: 4.2:1 on bg, 3.5:1 on surface),
secondary #E4E3E5 light grey (14.0:1 on bg, 11.8:1 on surface). Muted text #B4B3B8: 8.6:1 on bg, 7.2:1 on surface.
The statement card stays dark (surface) with crimson used for the action and the «?» mark. Premium gold is unchanged. */
:root {
/* Answer and gender tones: COMMON/roomplay-palettes.html / whosmostlikelyto (correct, wrong, male, female). */
--rp-correct: #30c883;
--rp-correct-ink: #17191f;
--rp-wrong: #fe7b90;
--rp-wrong-ink: #17191f;
--rp-male: #63b0fc;
--rp-female: #f77cb0;
color-scheme: dark;
--bg-primary: #171719;
--bg-secondary: #262629;
--bg-card: #262629;
--text-primary: #ffffff;
--text-secondary: #b4b3b8;
--text-placeholder: #8e8d93;
--accent-pink: #a51043;
--accent-pink-dark: #a51043;
--accent-purple: #a51043;
--accent-purple-dark: #a51043;
--accent-blue: #a51043;
--accent-orange: #a51043;
--wm-crimson: #a51043;
--wm-crimson-deep: #7d0c33;
--wm-rose: #e0336e;
--wm-rose-text: #ff7aa2;
--wm-grey: #e4e3e5;
--wm-surface: #262629;
--wm-ink: #17191f;
--onboarding-accent: #a51043;
--onboarding-accent-dark: #a51043;
--onboarding-shadow: transparent;
--onboarding-shadow-hover: transparent;
--settings-accent: #a51043;
--settings-accent-dark: #a51043;
--packs-accent: #a51043;
--packs-feedback-rgb: 224, 51, 110;
--ps-accent: #a51043;
}
html, body[data-rp-game="whosmostlikelyto"], .page-loader { background: var(--bg-primary); }
.loader-spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--wm-rose); }
.btn-back { color: #fff; }
/* Actions: crimson primary with white text, light-grey outline secondary. */
.btn-play,
.btn-next-slide { color: #fff; background: var(--wm-crimson); box-shadow: none; }
@media (hover: hover) {
.btn-play:hover,
.btn-next-slide:hover { background: var(--wm-crimson-deep); box-shadow: none; }
}
.btn-play:disabled { color: var(--text-secondary); background: #3a3a3e; opacity: 1; }
.btn-skip,
.btn-additional-settings,
.btn-secondary { color: #fff; border-color: rgba(228, 227, 229, .6); background: transparent; }
@media (hover: hover) { .btn-secondary:hover { background: rgba(228, 227, 229, .08); } }
.dot { background: rgba(228, 227, 229, .25); }
.dot.active { background: var(--wm-rose); }
.slide-title,
.title { color: #fff; }
.slide-text,
.subtitle,
#question-counter,
.card-instruction,
.gameover-subtitle { color: var(--text-secondary); }
/* Player setup: dark surface rows. */
.ps-add-btn { color: #fff; border-color: var(--wm-rose); }
@media (hover: hover) { .ps-add-btn:hover { color: #fff; background: var(--wm-crimson); } }
.ps-entry { background: var(--wm-surface); }
.ps-icon--filled { background: var(--wm-crimson); }
.ps-icon--avatar { background: #333337; }
.ps-gender { background: #333337; }
/* Packs: illustrated covers stay; frame, selection and the bottom fade follow the palette. */
/* packs.js sets these inline from the game's accentColor, so they need !important. */
.packs-illustrated-grid { --packs-accent: #e0336e !important; --packs-feedback-rgb: 224, 51, 110 !important; }
.packs-summary { color: var(--text-secondary); background: var(--wm-surface); }
.packs-summary .summary-text { color: var(--text-secondary); }
.packs-summary .summary-text strong { color: var(--wm-rose-text); }
/* Statement card: dark surface, crimson rail, a big crimson «?» in the corner, light-grey type. */
.statement-card {
position: relative;
overflow: hidden;
background: var(--wm-surface);
border: 1px solid rgba(228, 227, 229, .1);
border-top: 6px solid var(--wm-crimson);
box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
}
.statement-card::after {
content: '?';
position: absolute;
right: 14px;
bottom: -26px;
font-size: 150px;
font-weight: 900;
line-height: 1;
color: var(--wm-crimson);
opacity: .4;
pointer-events: none;
}
.card-header { position: relative; z-index: 1; color: var(--wm-rose-text); letter-spacing: .06em; }
.card-text { position: relative; z-index: 1; color: var(--wm-grey); }
/* Finale panel (shared ru-party-finale.js). */
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale { color: #fff; background: var(--wm-surface); border: 1px solid rgba(228, 227, 229, .12); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale p { color: var(--text-secondary); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-kicker { color: var(--wm-rose-text); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-primary { color: #fff; background: var(--wm-crimson); }
body[data-rp-game="whosmostlikelyto"] #roomplay-local-finale .rplf-secondary { color: #fff; background: rgba(228, 227, 229, .12); }
/* Settings popup and exit confirmation: surface sheets, crimson action.
Colours go through the shared --rp-dialog-* tokens (assets/css/confirm-dialog.css). */
:root {
--rp-dialog-overlay: rgba(10, 10, 12, .8);
--rp-dialog-bg: var(--wm-surface);
--rp-dialog-border: 1px solid rgba(228, 227, 229, .12);
--rp-dialog-text: var(--text-secondary);
--rp-dialog-primary-bg: var(--wm-crimson);
--rp-dialog-secondary-border: rgba(228, 227, 229, .6);
--rp-dialog-secondary-text: #fff;
--rp-dialog-control-btn-bg: rgba(228, 227, 229, .12);
--rp-dialog-toggle-bg: rgba(228, 227, 229, .1);
}
/* Onboarding: animated flat SVG characters (static copies via
for reduced motion). */
#onboarding-screen .slide-icon { width: min(240px, 55vw); margin-bottom: 18px; font-size: 0; line-height: 0; }
#onboarding-screen .slide-icon picture,
#onboarding-screen .slide-icon img { display: block; width: 100%; height: auto; }
@media (max-height: 600px) {
#onboarding-screen .slide-icon { width: 110px; margin-bottom: 8px; }
}
@media (max-height: 430px) {
#onboarding-screen .slide-icon { width: 60px; margin-bottom: 4px; }
}
/* Light motion, same rhythm as «Я никогда не» (cutout-theme.css). Decorative only; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
:root { --wm-press: 100ms; --wm-settle: 240ms; --wm-spring: cubic-bezier(.2, .9, .3, 1.25); }
button:not(:disabled) {
transition: scale var(--wm-settle) var(--wm-spring), translate var(--wm-settle) var(--wm-spring),
background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--wm-press); }
.btn-back:active { scale: .88; }
.dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--wm-spring); }
.dot.active { scale: 1.12; }
.onboarding-slide.active .slide-icon { animation: wm-character-arrive 380ms var(--wm-spring) both; }
.pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--wm-press); }
.pack-card.packs-touch-pop:not(.locked) { animation: wm-pop 320ms var(--wm-spring); }
.pack-card.packs-touch-pop:not(.locked) .pack-art { animation: wm-nod 360ms ease-out; }
#players-screen.active .ps-entry { animation: wm-paper-arrive 280ms var(--wm-spring) both; }
#players-screen.active .ps-entry:nth-child(2) { animation-delay: 40ms; }
#players-screen.active .ps-entry:nth-child(3) { animation-delay: 80ms; }
#players-screen.active .ps-entry:nth-child(4) { animation-delay: 120ms; }
#players-screen.active .ps-entry:nth-child(n+5) { animation-delay: 160ms; }
#card-screen.active .statement-card { animation: wm-paper-arrive 280ms var(--wm-spring) both; }
#card-screen.active .statement-card::after { animation: wm-mark-in 360ms var(--wm-spring) 120ms both; }
.statement-card.wm-swap-out .card-text { animation: wm-text-out 130ms ease-in both; }
.statement-card.wm-swap-in .card-text { animation: wm-text-in 240ms var(--wm-spring) both; }
#card-screen.active .card-instruction { animation: wm-paper-arrive 280ms var(--wm-spring) 120ms both; }
#gameover-screen.active .gameover-icon { animation: wm-nod 420ms ease-out 200ms both; }
#gameover-screen.active .title { animation: wm-stamp-in 360ms var(--wm-spring) both; }
.confirm-dialog-overlay.active .confirm-dialog-modal,
.settings-popup-overlay.active .settings-popup-modal { animation: wm-paper-arrive 280ms var(--wm-spring); }
}
@keyframes wm-character-arrive { from { opacity: 0; scale: .82; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes wm-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes wm-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes wm-paper-arrive { from { opacity: 0; translate: 0 12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wm-text-out { to { opacity: 0; translate: -18px 0; } }
@keyframes wm-text-in { from { opacity: 0; translate: 22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes wm-stamp-in { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }
@keyframes wm-mark-in { from { opacity: 0; scale: 1.3; rotate: -12deg; } to { opacity: .4; scale: 1; rotate: 0deg; } }
/* Pack choice arrow: COMMON/roomplay-palettes.html / whosmostlikelyto secondary #E4E3E5 (the accent is too dark for the ink outline). */
:root {
--packs-cue-color: #E4E3E5;
}
/* «Сообщить об ошибке»: flag in the card's top-right corner, report sheet in the game palette. */
:root {
--rp-report-surface: var(--wm-surface);
--rp-report-text: #fff;
--rp-report-muted: var(--text-secondary);
--rp-report-line: rgba(228, 227, 229, .2);
--rp-report-chip: rgba(228, 227, 229, .08);
--rp-report-accent: var(--wm-crimson);
--rp-report-accent-ink: #fff;
--rp-report-error: var(--rp-wrong);
--rp-report-flag: rgba(228, 227, 229, .45);
}
.wm-report-flag { position: absolute; top: 4px; right: 4px; z-index: 2; }
.statement-card:has(.wm-card-vote) { padding-bottom: 56px; }
.wm-card-vote { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; }
/* /whosmostlikelyto/multiplayer.css */
/* Online «Кто из нас» (RU rooms). RoomPlay room shell (top bar, waiting, punishment, reconnect)
as in online «Я никогда не», coloured with the whosmostlikelyto palette tokens from wm-theme.css:
bg #171719, surface #262629, crimson #A51043 (fills), rose #E0336E (outlines), rose text #FF7AA2,
light grey #E4E3E5. The one-phone game never gets these screens. */
/* Online-only controls stay out of the one-phone packs screen. */
#packs-room-status,
.packs-room-error { display: none; }
.wm-online .packs-room-error { display: block; min-height: 18px; margin: 0; color: var(--rp-wrong); font-size: 14px; text-align: center; }
.wm-online .packs-room-error:empty { display: none; }
.wm-online #packs-room-status { display: block; margin: 0; color: var(--text-secondary); font-size: 14px; text-align: center; }
.wm-online #packs-room-status:empty { display: none; }
.wm-online #btn-start-with-packs .play-icon { display: none; }
.rp-direct .screen.multiplayer-screen {
position: relative;
width: 100%;
max-width: 520px;
margin: 0 auto;
padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
overflow-x: hidden;
color: var(--text-primary);
background: var(--bg-primary);
}
/* Preparation screens keep the shared back button geometry. */
.wm-online #onboarding-screen,
.wm-online #packs-screen,
.wm-online #multiplayer-waiting-screen { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
.wm-online .btn-back { top: calc(16px + env(safe-area-inset-top, 0px)); min-width: 48px; min-height: 48px; }
.wm-online #multiplayer-waiting-screen .screen-content { padding: 0; }
.wm-online #multiplayer-waiting-text { margin: 24px 0; text-align: center; color: var(--text-secondary); }
.wm-online #multiplayer-rules-button { margin-top: 16px; }
.multiplayer-screen .players-list { width: 100%; margin-top: 24px; }
.multiplayer-topbar {
display: grid;
flex: 0 0 auto;
/* Side columns grow alike, so the mark stays centred when the host's «Пауза» takes the right one. */
grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
align-items: center;
min-height: 56px;
margin-bottom: 8px;
}
.multiplayer-icon-button {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
color: var(--text-primary);
background: transparent;
cursor: pointer;
}
.multiplayer-icon-button svg,
.ended-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.multiplayer-icon-button:active { transform: scale(.95); }
.multiplayer-brand-mark {
display: flex;
justify-self: center;
align-items: center;
gap: 8px;
color: var(--wm-grey);
font-size: 11px;
letter-spacing: .14em;
}
.multiplayer-brand-mark span {
width: 12px;
height: 12px;
transform: rotate(45deg);
border-radius: 3px;
background: linear-gradient(135deg, var(--wm-grey) 0 50%, var(--wm-crimson) 50%);
}
.multiplayer-topbar-spacer { width: 48px; height: 48px; }
.multiplayer-topbar > .btn-back-multiplayer { justify-self: start; }
/* The host's shared «Пауза» (shared/client/online-pause.ts) goes before the spacer and replaces it. */
.multiplayer-topbar > .rp-online-pause-btn { justify-self: end; margin: 0; }
.multiplayer-topbar > .rp-online-pause-btn:not([hidden]) + .multiplayer-topbar-spacer { display: none; }
.multiplayer-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 32px;
margin: 0 0 12px;
}
.round-pill,
.answer-progress,
.next-round-label { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.round-pill {
padding: 6px 12px;
border: 1px solid var(--wm-rose);
border-radius: 999px;
color: var(--wm-rose-text);
}
/* ---- Question + vote ---- */
.wm-question-card {
position: relative;
flex: 0 0 auto;
padding: 20px 20px 22px;
overflow: hidden;
border-radius: 24px;
background: var(--wm-surface);
}
.wm-question-mark {
position: absolute;
top: -18px;
right: 8px;
color: var(--wm-crimson);
font: 900 120px/1 Manrope, sans-serif;
pointer-events: none;
}
.wm-question-lead {
position: relative;
margin-bottom: 8px;
color: var(--wm-rose-text);
font-size: 15px;
font-weight: 700;
}
.wm-question-text {
position: relative;
max-width: calc(100% - 48px);
font-size: clamp(22px, 6.4vw, 30px);
font-weight: 800;
line-height: 1.18;
overflow-wrap: anywhere;
}
.wm-question-text:first-letter { text-transform: uppercase; }
.wm-vote-hint {
flex: 0 0 auto;
margin: 16px 0 12px;
color: var(--text-secondary);
font-size: 15px;
text-align: center;
}
.wm-vote-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding-bottom: 8px;
}
.wm-vote-option {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 64px;
padding: 8px 10px;
border: 2px solid transparent;
border-radius: 18px;
color: var(--text-primary);
background: var(--wm-surface);
text-align: left;
cursor: pointer;
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.wm-vote-option:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .wm-vote-option:hover:not(:disabled) { border-color: rgba(224, 51, 110, .6); } }
.wm-vote-option:disabled { cursor: default; }
.wm-vote-option.disconnected { opacity: .45; }
.wm-vote-grid .wm-vote-option:disabled:not(.selected) { opacity: .5; }
.wm-vote-option.selected { border-color: var(--wm-rose); background: var(--wm-crimson); }
.wm-vote-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.wm-vote-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.wm-vote-copy small { color: var(--text-secondary); font-size: 12px; }
.wm-vote-check {
display: none;
place-items: center;
width: 24px;
height: 24px;
flex: 0 0 auto;
border-radius: 50%;
color: var(--wm-crimson);
background: #fff;
font-size: 14px;
font-weight: 900;
}
.wm-vote-option.selected .wm-vote-check { display: grid; }
.wm-avatar,
.wm-voter-avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
color: var(--wm-ink);
background: var(--wm-grey);
font-size: 14px;
font-weight: 800;
}
.wm-avatar img,
.wm-voter-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wm-voter-avatar {
width: 24px;
height: 24px;
margin-left: -6px;
border: 2px solid var(--wm-surface);
font-size: 9px;
}
.wm-voter-avatar:first-child { margin-left: 0; }
.wm-hearts { display: flex; flex-wrap: wrap; gap: 1px; }
.wm-heart { color: rgba(228, 227, 229, .22); font-size: 12px; line-height: 1; }
.wm-heart.active { color: var(--wm-rose-text); }
.wm-vote-option.selected .wm-heart.active { color: #fff; }
.wm-heart.breaking { animation: wm-heart-break 900ms ease-in both; }
@keyframes wm-heart-break {
0%, 30% { color: var(--wm-rose-text); transform: scale(1); }
45% { color: var(--wm-rose-text); transform: scale(1.6) rotate(-12deg); }
60% { transform: scale(1.4) rotate(12deg); }
100% { color: rgba(228, 227, 229, .22); transform: scale(1); }
}
/* ---- Reveal ---- */
#multiplayer-reveal-screen { overflow-y: auto; }
.reveal-statement {
flex: 0 0 auto;
margin-bottom: 12px;
padding: 16px 18px;
border-radius: 20px;
background: var(--wm-surface);
}
.reveal-statement > span,
.reveal-statement strong { display: block; }
.reveal-statement > span { margin-bottom: 4px; color: var(--wm-rose-text); font-size: 14px; font-weight: 700; }
.reveal-statement strong { font-size: clamp(18px, 5.2vw, 23px); line-height: 1.2; }
.reveal-statement strong:first-letter { text-transform: uppercase; }
/* Whole questions («Who's most likely to…?») carry their own lead. */
.wm-question-lead[hidden],
.reveal-statement > span[hidden] { display: none; }
/* Player names inside a question, a task or a line: the shared «avatar + name» chip, as on the one-phone card. */
.wm-question-text .rp-player,
.reveal-statement .rp-player,
.punishment-task-card p .rp-player { gap: 0.25em; }
.punishment-waiting .rp-player,
.wm-reveal-summary .rp-player { margin: 0 0.15em; }
.wm-tally { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wm-tally-row {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 64px;
padding: 10px 12px;
overflow: hidden;
border: 2px solid transparent;
border-radius: 18px;
background: var(--wm-surface);
animation: wm-row-in 320ms ease-out both;
}
.wm-tally-row:nth-child(2) { animation-delay: 60ms; }
.wm-tally-row:nth-child(3) { animation-delay: 120ms; }
.wm-tally-row:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes wm-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wm-tally-bar {
position: absolute;
inset: 0;
transform: scaleX(var(--share, 0));
transform-origin: left;
background: rgba(228, 227, 229, .06);
transition: transform 600ms ease-out;
pointer-events: none;
}
.wm-tally-row.lost { border-color: var(--wm-rose); }
.wm-tally-row.lost .wm-tally-bar { background: rgba(165, 16, 67, .55); }
.wm-tally-row > *:not(.wm-tally-bar) { position: relative; }
.wm-tally-main { display: grid; flex: 1; min-width: 0; gap: 4px; }
.wm-tally-main strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.wm-tally-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wm-tally-lost {
padding: 2px 8px;
border-radius: 999px;
color: #fff;
background: var(--wm-crimson);
font-size: 12px;
font-weight: 800;
}
/* Guess mode: the right answer to «most / fewest votes» (rose outline, like the selected vote). */
.wm-tally-row.picked:not(.lost) { border-color: var(--wm-rose); }
.wm-tally-picked {
padding: 2px 8px;
border: 1.5px solid var(--wm-rose);
border-radius: 999px;
color: var(--wm-rose-text);
font-size: 12px;
font-weight: 800;
}
.wm-reveal-summary {
flex: 0 0 auto;
display: grid;
gap: 2px;
margin: 0 0 12px;
color: var(--text-secondary);
font-size: 15px;
line-height: 1.35;
text-align: center;
}
.wm-reveal-summary strong { color: var(--text-primary, #fff); font-size: 16px; }
.wm-reveal-summary[hidden] { display: none; }
/* Guess mode: points instead of hearts, the second question and the points table. */
.wm-score { color: var(--wm-rose-text); font-size: 13px; font-weight: 800; }
.wm-guess-banner {
flex: 0 0 auto;
display: grid;
gap: 2px;
margin-top: 12px;
padding: 12px 16px;
border: 2px solid var(--wm-rose);
border-radius: 18px;
text-align: center;
animation: wm-row-in 320ms ease-out both;
}
.wm-guess-banner[hidden] { display: none; }
.wm-guess-banner span { color: var(--wm-rose-text); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wm-guess-banner strong { font-size: clamp(18px, 5.2vw, 22px); line-height: 1.2; }
.wm-leaderboard { flex: 0 0 auto; margin-top: 16px; }
.wm-leaderboard[hidden] { display: none; }
/* Guess-mode points: shared reveal-results.css leaderboard in the room palette. */
.wm-leaderboard {
--rr-surface: var(--wm-surface);
--rr-border: transparent;
--rr-leading-surface: var(--wm-surface);
--rr-leading-border: var(--wm-rose);
}
.wm-leaderboard .rr-leaderboard-title { margin-bottom: 8px; color: var(--wm-rose-text); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.wm-leaderboard .rr-lb-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm-leaderboard .rr-lb-label > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wm-leaderboard .wm-leader-avatar { flex: 0 0 auto; width: 28px; height: 28px; font-size: 11px; }
.wm-tally-votes { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.wm-tally-count { color: var(--text-secondary); font-size: 13px; font-weight: 700; white-space: nowrap; }
.wm-tally-row.lost .wm-tally-count { color: #fff; }
.wm-tally-voters { display: flex; }
.wm-tally-row.lost .wm-voter-avatar { border-color: var(--wm-crimson); }
.wm-tally-empty { padding: 16px; color: var(--text-secondary); text-align: center; }
.next-round-track {
flex: 0 0 auto;
height: 4px;
margin-top: 16px;
overflow: hidden;
border-radius: 99px;
background: rgba(228, 227, 229, .12);
}
.next-round-track span {
display: block;
width: 100%;
height: 100%;
transform-origin: left;
background: var(--wm-rose);
}
/* ---- Punishment ---- */
.punishment-phase-screen { overflow-y: auto; }
.punishment-phase-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 420px;
margin: 0 auto;
text-align: center;
}
.punishment-phase-kicker { margin: 0 0 12px; color: var(--wm-rose-text); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.punishment-phase-content h1 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.15; }
.punishment-phase-copy { max-width: 340px; margin: 12px auto 20px; color: var(--text-secondary); font-size: 15px; line-height: 1.45; }
.punishment-phase-list { display: grid; gap: 8px; }
.punishment-task-card {
padding: 18px;
border: 2px solid transparent;
border-radius: 22px;
background: var(--wm-surface);
text-align: left;
}
.punishment-task-card.current { border-color: var(--wm-rose); }
.punishment-task-card strong { display: block; margin-bottom: 8px; color: var(--wm-rose-text); font-size: 13px; font-weight: 800; }
.punishment-task-card p { margin: 0; font-size: clamp(18px, 5.4vw, 22px); font-weight: 800; line-height: 1.25; }
.punishment-phase-status { margin: 16px 0 8px; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.punishment-complete-button {
min-height: 56px;
border: 0;
border-radius: 16px;
color: #fff;
background: var(--wm-crimson);
font-size: 17px;
font-weight: 800;
cursor: pointer;
}
.punishment-complete-button:disabled { color: var(--text-secondary); background: #3a3a3e; cursor: default; }
.punishment-waiting {
min-height: 56px;
margin: 0;
padding: 16px;
border-radius: 16px;
color: var(--text-secondary);
background: var(--wm-surface);
font-size: 15px;
}
.punishment-timebar { height: 4px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: rgba(228, 227, 229, .12); }
.punishment-timebar span { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--wm-rose); }
.punishment-time-label { margin: 8px 0 0; color: var(--text-secondary); font-size: 13px; }
/* ---- Ended + reconnect ---- */
.multiplayer-center {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 360px;
margin: 0 auto;
text-align: center;
}
.multiplayer-center h1 { margin: 16px 0 12px; font-size: 28px; font-weight: 800; }
.multiplayer-center p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.ended-icon {
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 28px;
color: #fff;
background: var(--wm-crimson);
}
.ended-icon svg { width: 42px; height: 42px; }
#multiplayer-ended-screen .btn-play { width: 100%; margin-top: 24px; }
/* Connection overlay: base in ../connection-overlay.css */
.connection-overlay {
--rp-connection-z: 500;
--rp-connection-gap: 14px;
--rp-connection-color: var(--text-secondary);
--rp-connection-bg: rgba(23, 23, 25, .94);
}
.wm-vote-option:focus-visible,
.multiplayer-icon-button:focus-visible,
.punishment-complete-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 299px) {
.wm-vote-grid { grid-template-columns: 1fr; }
}
@media (max-height: 640px) {
.wm-question-card { padding: 16px 16px 18px; }
.wm-question-text { font-size: 22px; }
.wm-vote-hint { margin: 10px 0 8px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 620px) {
#multiplayer-game-screen.active {
display: grid;
grid-template-columns: minmax(240px, .9fr) minmax(300px, 1.1fr);
grid-template-rows: auto auto auto 1fr;
gap: 0 16px;
max-width: 860px;
}
#multiplayer-game-screen .multiplayer-topbar { grid-column: 1 / -1; margin-bottom: 0; }
#multiplayer-game-screen .multiplayer-topline { grid-column: 1; }
#multiplayer-game-screen .wm-question-card { grid-column: 1; grid-row: 3 / 5; align-self: start; }
#multiplayer-game-screen .wm-vote-hint { grid-column: 2; grid-row: 2; margin: 0 0 8px; }
#multiplayer-game-screen .wm-vote-grid { grid-column: 2; grid-row: 3 / 5; align-content: start; overflow-y: auto; }
#multiplayer-reveal-screen.active { max-width: 860px; }
}
@media (prefers-reduced-motion: reduce) {
.wm-tally-row,
.wm-heart.breaking { animation: none; }
.wm-tally-bar,
.wm-vote-option { transition: none; }
}
/* Like / dislike centred at the question card's bottom edge and «Сообщить об ошибке» in its
bottom-right corner (the top-right holds the decorative «?»), shown once this phone voted
(shared content-report.css; --rp-report-* tokens come from wm-theme.css). */
.wm-question-card:has(.wm-online-card-vote:not([hidden])) { padding-bottom: 56px; }
.wm-online-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.wm-online-card-vote[hidden],
.wm-online-report-flag[hidden] { display: none; }
.wm-online-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.wm-online-card-vote .rp-card-vote__btn,
.wm-online-report-flag { color: rgba(228, 227, 229, .6); }
.wm-online-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wm-crimson); }
/* Like / dislike / «Сообщить об ошибке» inside each punishment card: thumbs centred at the bottom,
the flag in the bottom-right corner (game-feedback.ts addCardFeedback). */
.punishment-task-card { position: relative; padding-bottom: 56px; }
.punishment-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.punishment-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.punishment-card-vote .rp-card-vote__btn,
.punishment-report-flag { color: rgba(228, 227, 229, .6); }
.punishment-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wm-crimson); }
/* «Кто из нас» online: results after the last round (the ended screen under the shared game end). */
.wm-final-board { list-style: none; margin: 8px 0 20px; padding: 0; width: 100%; max-width: 360px; display: grid; gap: 8px; }
.wm-final-board[hidden] { display: none; }
.wm-final-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--wm-surface, rgba(255, 255, 255, 0.08)); text-align: left; }
.wm-final-row.leading { box-shadow: inset 0 0 0 2px var(--wm-rose-text, currentColor); }
.wm-final-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wm-final-row strong { font-size: 18px; }
#multiplayer-replay-button { margin-bottom: 12px; }
/* Premium sample round (../premium-teasers.js): only the placement of the shared chip and button. */
.wm-question-card .wm-teaser-chip { margin: 0 0 10px; }
#multiplayer-game-screen .wm-teaser-cta--online { flex: none; margin: 12px auto 0; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 620px) {
#multiplayer-game-screen .wm-teaser-cta--online { grid-column: 1; grid-row: 5; }
}
/* Premium sample punishment (online and one phone): the shared chip under the name, the pearl button under the list. */
.punishment-task-card .wm-punishment-teaser { margin: 0 0 8px; }
.punishment-phase-list + .wm-punishment-cta { flex: none; margin: 16px auto 0; }
/* One phone: «Кого выбрали?» and the punishment screens look like the online punishment phase. */
.wm-punish-screen { overflow-y: auto; }
.wm-punish-screen .punishment-phase-content { justify-content: flex-start; padding: 56px 0 16px; }
.wm-punishment-player .rp-player { color: inherit; }
/* Group punishment: every punished player's chip in one row above the shared task. */
.wm-punishment-group { display: flex; flex-wrap: wrap; gap: 6px 12px; }
/* ── The /tv/ look on the phones and the PC (owner 2026-10-29: «на тел, пк и тв стили должны выглядеть одинаково…
за образец возьми тв»), as «Как хорошо ты меня знаешь?» (Black#795) and «Что бы ты выбрал?» (Black#737) ──
Background: the TV's spheres (particles.js, body[data-rp-spheres], the game's colours from its shared rule), so the
room screens let them through. Cut paper (, cut-paper.css): the statement card with the crimson
shadow (tv .tv-wml-card), the players one per row (owner 2026-10-29 in КХТМЗ: «на теле лучше 4 строки показывать» —
two columns cut long names), the tally rows and the punishments as the screen's cut cards. */
[data-rp-game="whosmostlikelyto"] {
--paper-gold: var(--wm-rose-text);
--paper-surface: var(--wm-surface);
--paper-line: rgb(228 227 229 / 14%);
--paper-lead-line: var(--wm-rose);
--paper-lead-shadow: 6px 7px 0 color-mix(in srgb, var(--wm-crimson) 60%, #000);
--cut-shadow: 4px 5px 0 rgb(0 0 0 / 40%);
--wm-card-shadow: 6px 8px 0 color-mix(in srgb, var(--wm-crimson) 60%, transparent);
}
.rp-direct[data-rp-spheres] .screen.multiplayer-screen { background: transparent; }
[data-rp-paper] .wm-question-card,
[data-rp-paper] .reveal-statement {
overflow: visible; text-align: center; border: 2px solid rgb(228 227 229 / 14%);
border-radius: 22px 13px 25px 15px / 15px 23px 13px 22px; box-shadow: var(--wm-card-shadow); rotate: -1deg;
}
[data-rp-paper] .wm-question-card { margin: 4px 6px 0 2px; }
[data-rp-paper] .wm-question-mark { display: none; }
[data-rp-paper] .wm-question-text { max-width: none; text-wrap: balance; }
[data-rp-paper] .reveal-statement { margin: 2px 6px 16px 2px; }
[data-rp-paper] .wm-guess-banner { border-radius: var(--cut-2); box-shadow: var(--cut-shadow); rotate: .6deg; }
/* The players: one per row, cut cards leaning in turn, the pick crimson with the rose edge and its shadow. */
[data-rp-paper] .wm-vote-grid { grid-template-columns: 1fr; gap: 12px; padding: 2px 8px 12px 2px; }
[data-rp-paper] .wm-vote-option { min-height: 60px; border-color: rgb(228 227 229 / 14%); border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.6deg; }
[data-rp-paper] .wm-vote-option:nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .6deg; }
[data-rp-paper] .wm-vote-option:nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.3deg; }
[data-rp-paper] .wm-vote-option:nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .4deg; }
[data-rp-paper] .wm-vote-option.selected { border-color: var(--wm-rose); box-shadow: var(--paper-lead-shadow); }
[data-rp-paper] .wm-vote-copy strong { white-space: normal; overflow-wrap: anywhere; font-size: 16px; }
/* The votes: the screen's tally rows (cut, leaning in turn, the bar in rose). */
[data-rp-paper] .wm-tally { gap: 10px; padding: 0 8px 4px 2px; }
/* The rows come in once, by the deal (cut-paper.css .rp-dealing): their own wm-row-in came back when the deal's class
left and played the entrance a second time (owner 2026-10-30: «аним отображения вариантов 2 раза играет»). */
[data-rp-paper] .wm-tally .wm-tally-row { animation: none; }
[data-rp-paper] .wm-tally.rp-dealing > .wm-tally-row { animation: rp-cut-in .5s cubic-bezier(.3, 1.45, .5, 1) backwards; animation-delay: calc(60ms + var(--deal, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { [data-rp-paper] .wm-tally.rp-dealing > .wm-tally-row { animation: none; } }
[data-rp-paper] .wm-tally-row { border-color: rgb(228 227 229 / 14%); border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.5deg; }
[data-rp-paper] .wm-tally-row:nth-child(even) { border-radius: var(--cut-2); rotate: .5deg; }
[data-rp-paper] .wm-tally-row.lost,
[data-rp-paper] .wm-tally-row.picked { border-color: var(--wm-rose); }
[data-rp-paper] .wm-tally-bar { background: color-mix(in srgb, var(--wm-rose) 22%, transparent); }
[data-rp-paper] .wm-tally-row.lost .wm-tally-bar { background: color-mix(in srgb, var(--wm-crimson) 60%, transparent); }
/* The punishments: cut cards with the rose edge and the crimson shadow (tv .tv-wml-task). */
[data-rp-paper] .punishment-phase-list { gap: 14px; padding: 0 8px 6px 2px; }
[data-rp-paper] .punishment-task-card { border-color: var(--wm-rose); border-radius: var(--cut-1); box-shadow: 6px 7px 0 color-mix(in srgb, var(--wm-crimson) 55%, transparent); rotate: -1deg; }
[data-rp-paper] .punishment-task-card:nth-child(even) { border-radius: var(--cut-3); rotate: 1deg; }
[data-rp-paper] .punishment-phase-content h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; color: var(--wm-rose-text); }
/* /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); } }
/* /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; } }
/* /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; }
}
/* /wml-stage.css */
/* «Кто из нас»: a step of a round 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
hundred-board.css, question-stage.css, quiplash-matchup.css, truth-detect.css, wyr-choice.css, fibbage-stage.css and
knowme-stage.css). The markup and the moving part are shared/client/wml-stage.ts. The page supplies the palette
(--wm-crimson, --wm-rose, --wm-rose-text, --tv-surface, --tv-line, --text-secondary, --rp-correct) and the cuts
(--cut-1…4, --cut-shadow).
vote: the statement on a dark cut card with the lead in rose and the crimson shadow, the hint under it (a PC player:
the players as cut-card buttons). reveal: the statement small on the left, the votes as the phones' tally rows
(hearts, voters, a bar to the most votes). punish: the punishments on cut cards with the rose edge. */
@keyframes wms-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes wms-cut-in { from { opacity: 0; transform: translateY(-26px) rotate(-5deg) scale(1.06); } }
@keyframes wms-row-in { from { opacity: 0; transform: translateX(30px); } }
@keyframes wms-bar { from { transform: scaleX(0); } }
@keyframes wms-heart { 0% { color: var(--wm-rose-text); transform: scale(1); } 40% { transform: scale(1.5); } 100% { color: rgb(228 227 229 / 22%); transform: scale(1); } }
.wms-root .hidden { display: none !important; }
.wms-root .tv-wml-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 12px; }
.wms-root .tv-wml-card {
display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 1060px; padding: 40px 60px;
background: var(--tv-surface); 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(--wm-crimson) 60%, transparent); rotate: -1.2deg;
animation: wms-cut-in .7s cubic-bezier(.3, 1.45, .5, 1) both;
}
.wms-root .tv-wml-lead { margin: 0; font-size: 24px; font-weight: 700; color: var(--wm-rose-text); }
.wms-root .tv-wml-question { margin: 0; color: #fff; font-weight: 700; font-size: 44px; line-height: 1.22; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.wms-root .tv-wml-hint { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; font-weight: 700; color: var(--text-secondary); text-align: center; }
.wms-root :is(.tv-wml-tally, .tv-wml-summary, .tv-wml-punish, .wms-players) { display: none; }
.wms-root:is([data-step="reveal"], [data-step="punish"]) .tv-wml-hint,
.wms-root[data-step="punish"] .tv-wml-card { display: none; }
.wms-root[data-step="reveal"] .tv-wml-main { flex-direction: row; align-items: center; gap: 40px; }
.wms-root[data-step="reveal"] .tv-wml-card { flex: 0 0 360px; padding: 28px 30px; }
.wms-root[data-step="reveal"] .tv-wml-question { font-size: 28px; }
.wms-root[data-step="reveal"] .tv-wml-lead { font-size: 18px; }
.wms-root[data-step="reveal"] .tv-wml-tally { display: flex; }
.wms-root[data-step="reveal"] .tv-wml-summary:not(.hidden) { display: flex; }
.wms-root[data-step="punish"] .tv-wml-punish { display: flex; }
.wms-root .tv-wml-tally {
flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 10px; max-height: 590px; margin: 0;
padding: var(--cut-room, 14px); list-style: none; overflow: hidden;
}
.wms-root .tv-wml-row {
position: relative; display: flex; align-items: center; gap: 16px; min-height: 0; flex: 0 1 72px; padding: 8px 20px;
background: var(--tv-surface); border: 2px solid var(--tv-line); border-radius: var(--cut-1); box-shadow: var(--cut-shadow);
overflow: hidden; rotate: -.5deg; animation: wms-row-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(200ms + var(--i, 0) * 120ms);
}
.wms-root .tv-wml-row:nth-child(even) { border-radius: var(--cut-2); rotate: .5deg; translate: 4px 0; }
.wms-root .tv-wml-row > :not(.tv-wml-bar) { position: relative; }
.wms-root .tv-wml-bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--share, 0) * 100%); background: color-mix(in srgb, var(--wm-rose) 22%, transparent); transform-origin: left; animation: wms-bar .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(500ms + var(--i, 0) * 120ms); }
.wms-root .tv-wml-row.is-lost { border-color: var(--wm-rose); }
.wms-root .tv-wml-row.is-lost .tv-wml-bar { background: color-mix(in srgb, var(--wm-crimson) 60%, transparent); }
.wms-root .tv-wml-row.is-answer:not(.is-lost) { border-color: var(--wm-rose); }
.wms-root .tv-wml-row-main { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.wms-root .tv-wml-row-main .rp-player { font-size: 24px; color: #fff; }
.wms-root .tv-wml-hearts { display: inline-flex; gap: 3px; }
.wms-root .tv-wml-heart { font-size: 18px; color: rgb(228 227 229 / 22%); }
.wms-root .tv-wml-heart.is-on { color: var(--wm-rose-text); }
.wms-root .tv-wml-heart.is-breaking { animation: wms-heart 1s 1s ease-in both; }
.wms-root .tv-wml-badge { padding: 3px 10px; border-radius: 8px; font-size: 15px; font-weight: 800; color: #fff; background: var(--wm-crimson); }
.wms-root .tv-wml-row-votes { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wms-root .tv-wml-count { font-size: 18px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.wms-root .tv-wml-row.is-lost .tv-wml-count { color: #fff; }
.wms-root .tv-wml-voters { display: flex; }
.wms-root .tv-wml-voters > * { width: 34px; height: 34px; margin-left: -8px; font-size: 14px; border: 2px solid var(--tv-surface); border-radius: 50%; }
.wms-root .tv-wml-empty { padding: 20px; font-size: 22px; color: var(--text-secondary); text-align: center; }
.wms-root .tv-wml-summary { flex-direction: column; gap: 6px; margin: 0; font-size: 20px; color: var(--text-secondary); }
.wms-root .tv-wml-summary strong { font-size: 24px; color: var(--wm-rose-text); }
.wms-root[data-step="reveal"] .tv-wml-main:has(.tv-wml-summary:not(.hidden)) { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 14px; align-content: center; }
.wms-root[data-step="reveal"] .tv-wml-main:has(.tv-wml-summary:not(.hidden)) .tv-wml-card { grid-column: 1; grid-row: 1; }
.wms-root[data-step="reveal"] .tv-wml-main:has(.tv-wml-summary:not(.hidden)) .tv-wml-summary { grid-column: 1; grid-row: 2; align-self: start; padding: 0 10px; }
.wms-root[data-step="reveal"] .tv-wml-main:has(.tv-wml-summary:not(.hidden)) .tv-wml-tally { grid-column: 2; grid-row: 1 / 3; }
.wms-root .tv-wml-punish { flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 1180px; }
.wms-root .tv-wml-punish-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; color: var(--wm-rose-text); text-align: center; animation: wms-in .5s ease both; }
.wms-root .tv-wml-tasks { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; width: 100%; }
.wms-root .tv-wml-task {
text-align: left;
flex: 1 1 340px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; padding: 28px 32px;
background: var(--tv-surface); border: 2px solid var(--wm-rose); border-radius: var(--cut-1);
box-shadow: 7px 9px 0 color-mix(in srgb, var(--wm-crimson) 55%, transparent); rotate: -1deg;
animation: wms-cut-in .6s cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: calc(150ms + var(--i, 0) * 140ms);
}
.wms-root .tv-wml-task:nth-child(even) { border-radius: var(--cut-3); rotate: 1deg; }
.wms-root .tv-wml-task.is-done { border-color: var(--rp-correct); }
.wms-root .tv-wml-task-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.wms-root .tv-wml-task-who .rp-player { font-size: 24px; color: #fff; }
.wms-root .tv-wml-task-who .tv-chip-mark {
position: static; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50%;
color: #fff; background: var(--rp-correct); font-size: 17px;
}
.wms-root .tv-wml-task-text { margin: 0; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.wms-root .tv-wml-task-teaser {
align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; color: #fff;
background: var(--wm-crimson); font-size: 19px; font-weight: 700; border-radius: var(--cut-2); box-shadow: var(--cut-shadow); rotate: -1.5deg;
}
.wms-root .tv-wml-punish-hint { margin: 0; font-size: 21px; font-weight: 600; color: var(--text-secondary); text-align: center; }
/* ── A PC player's vote (buttons; the screen has none): the players as dark cut cards, up to four a row and centred, a number stamp each,
hearts (guess mode: points) under the name; hover lifts the edge to rose, the pick turns crimson with the rose edge
and its shadow, the others fade. ── */
.wms-root[data-step="vote"] .wms-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; width: 100%; max-width: 1180px; padding: 6px 14px 14px 6px; }
.wms-root .wms-player {
position: relative; flex: 0 1 270px; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 84px; padding: 10px 16px 10px 12px;
color: #fff; font: inherit; text-align: left; cursor: pointer; background: var(--tv-surface); border: 2px solid var(--tv-line);
border-radius: var(--cut-1); box-shadow: var(--cut-shadow); rotate: -.8deg;
transition: border-color .15s ease, translate .15s ease, opacity .2s ease;
}
.wms-root .wms-player:nth-child(4n + 2) { border-radius: var(--cut-2); rotate: .7deg; }
.wms-root .wms-player:nth-child(4n + 3) { border-radius: var(--cut-3); rotate: -.4deg; }
.wms-root .wms-player:nth-child(4n + 4) { border-radius: var(--cut-4); rotate: .5deg; }
.wms-root .wms-players.rp-dealt .wms-player { animation: wms-cut-in .5s cubic-bezier(.3, 1.45, .5, 1) backwards; animation-delay: calc(380ms + var(--i, 0) * 90ms); }
.wms-root .wms-players.is-votable .wms-player:hover { border-color: var(--wm-rose); translate: 0 -3px; }
.wms-root .wms-player:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.wms-root .wms-player:disabled { cursor: default; }
.wms-root .wms-players.is-locked .wms-player:not(.is-selected) { opacity: .45; }
.wms-root .wms-player.is-offline { opacity: .45; }
.wms-root .wms-player.is-selected { background: var(--wm-crimson); border-color: var(--wm-rose); box-shadow: 6px 7px 0 color-mix(in srgb, var(--wm-crimson) 55%, #000); }
.wms-root .wms-player-key {
flex: none; display: grid; place-items: center; width: 34px; height: 34px; font-family: var(--font-display); font-size: 16px; font-weight: 800;
color: #fff; background: var(--wm-crimson); border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; rotate: -6deg; box-shadow: 2px 3px 0 rgb(0 0 0 / 30%);
}
.wms-root .wms-player.is-selected .wms-player-key { color: var(--wm-crimson); background: #fff; }
.wms-root .wms-player-copy { display: grid; gap: 4px; min-width: 0; }
.wms-root .wms-player-copy .rp-player { min-width: 0; font-size: 21px; font-weight: 700; color: #fff; }
.wms-root .wms-player-meta { display: flex; align-items: center; gap: 10px; }
.wms-root .wms-player-score { font-size: 16px; font-weight: 800; color: var(--wm-rose-text); }
.wms-root .wms-player-you { font-size: 14px; color: var(--text-secondary); }
.wms-root .wms-player.is-selected :is(.tv-wml-heart.is-on, .wms-player-score, .wms-player-you) { color: #fff; }
/* /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; }