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;
}
/* /neverhaveiever/styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #0d1329;
--bg-secondary: #1a2140;
--bg-card: #252b4a;
--accent-purple: #9c27b0;
--accent-purple-dark: #7b1fa2;
--accent-pink: #e91e63;
--accent-pink-dark: #c2185b;
--text-primary: #ffffff;
--text-secondary: #8892b0;
--text-placeholder: #5a6380;
--success: #4ade80;
--error: #f87171;
--onboarding-accent: var(--accent-purple);
--onboarding-accent-dark: var(--accent-purple-dark);
--onboarding-shadow: rgba(156, 39, 176, 0.3);
--onboarding-shadow-hover: rgba(156, 39, 176, 0.4);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: linear-gradient(180deg, var(--bg-primary) 0%, #0a0f1f 100%);
min-height: 100vh;
min-height: var(--app-height, 100dvh);
color: var(--text-primary);
overflow-x: hidden;
}
.app {
max-width: 430px;
margin: 0 auto;
min-height: 100vh;
min-height: var(--app-height, 100dvh);
position: relative;
}
.screen {
display: none;
flex-direction: column;
min-height: 100vh;
min-height: var(--app-height, 100dvh);
padding: 40px 24px;
padding-top: calc(40px + env(safe-area-inset-top, 0px));
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
animation: fadeIn 0.3s ease;
}
.screen.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.title {
font-size: 28px;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
}
/* Back Button */
.btn-back {
position: absolute;
top: calc(40px + env(safe-area-inset-top, 0px));
left: 24px;
background: none;
border: none;
color: var(--text-primary);
font-size: 24px;
cursor: pointer;
padding: 8px;
z-index: 10;
}
/* Game Screen */
.game-container {
display: flex;
flex-direction: column;
flex: 1;
padding-top: 20px;
}
.card-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.statement-card {
background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 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(156, 39, 176, 0.4);
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
@media (hover: hover) {
.statement-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(156, 39, 176, 0.5);
}
}
.statement-card:active {
transform: translateY(0) scale(0.98);
}
.card-header {
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.card-text {
font-size: 26px;
font-weight: 700;
color: white;
line-height: 1.4;
}
.card-hint {
text-align: center;
color: var(--text-secondary);
font-size: 14px;
margin-top: 20px;
}
/* Punishment Section */
.punishment-section {
padding: 30px 0;
}
.btn-punishment {
width: 100%;
background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-pink-dark) 100%);
border: none;
color: white;
padding: 20px;
border-radius: 30px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(233, 30, 99, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@media (hover: hover) {
.btn-punishment:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(233, 30, 99, 0.4);
}
}
.btn-punishment:active {
transform: translateY(0);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 100;
padding: 24px;
animation: fadeIn 0.3s ease;
}
.modal.active {
display: flex;
}
.modal-content {
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
border-radius: 24px;
padding: 40px 30px;
max-width: 360px;
width: 100%;
text-align: center;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-icon {
font-size: 60px;
margin-bottom: 20px;
}
.modal-title {
font-size: 28px;
font-weight: 700;
color: var(--accent-pink);
margin-bottom: 20px;
}
.modal-text {
font-size: 20px;
color: var(--text-primary);
line-height: 1.5;
margin-bottom: 30px;
}
.btn-close-modal {
width: 100%;
background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dark) 100%);
border: none;
color: white;
padding: 16px;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(156, 39, 176, 0.3);
}
@media (hover: hover) {
.btn-close-modal:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(156, 39, 176, 0.4);
}
}
/* Card flip animation */
@keyframes cardFlip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}
.statement-card.flip {
animation: cardFlip 0.4s ease;
}
/* Bottom Section */
.bottom-section {
padding: 20px 0;
margin-top: auto;
}
/* Play Button */
.btn-play {
width: 100%;
background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-pink-dark) 100%);
border: none;
color: white;
padding: 18px;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(255, 59, 111, 0.3);
}
@media (hover: hover) {
.btn-play:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(255, 59, 111, 0.4);
}
}
.btn-play:active {
transform: translateY(0);
}
.btn-play:disabled {
background: var(--bg-card);
box-shadow: none;
cursor: not-allowed;
}
.play-icon {
font-size: 20px;
}
/* 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;
}
/* «Кто играет?» (one phone): the hint under the title, as in «Правда или действие». */
#players-screen .nhie-gender-hint,
#punish-pick-screen .nhie-gender-hint {
margin: -6px 0 14px;
color: var(--text-secondary);
text-align: center;
font-size: 14px;
}
#packs-screen .subtitle {
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;
background: linear-gradient(180deg, rgba(13, 19, 41, 0) 0, rgba(13, 19, 41, 0.96) 18px, #0d1329 100%);
}
/* 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));
}
.btn-back {
top: 20px;
left: 12px;
font-size: 20px;
padding: 6px;
}
.statement-card {
min-height: 200px;
padding: 24px 20px;
margin: 10px;
border-radius: 20px;
}
.card-header {
font-size: 14px;
margin-bottom: 12px;
letter-spacing: 1px;
}
.card-text {
font-size: 18px;
line-height: 1.3;
}
.card-hint {
font-size: 12px;
margin-top: 12px;
}
.punishment-section {
padding: 16px 0;
}
.btn-punishment {
padding: 16px;
border-radius: 24px;
font-size: 16px;
gap: 8px;
}
.modal-content {
padding: 30px 24px;
border-radius: 20px;
}
.modal-icon {
font-size: 48px;
margin-bottom: 16px;
}
.modal-title {
font-size: 24px;
margin-bottom: 16px;
}
.modal-text {
font-size: 16px;
line-height: 1.4;
margin-bottom: 20px;
}
.btn-close-modal {
padding: 14px;
border-radius: 24px;
font-size: 16px;
}
}
/* Responsive Height */
@media (max-height: 700px) {
.screen {
padding: 20px;
}
.statement-card {
min-height: 220px;
padding: 30px 24px;
}
.card-text {
font-size: 22px;
}
.punishment-section {
padding: 20px 0;
}
}
@media (max-height: 600px) {
.statement-card {
min-height: 180px;
padding: 24px 20px;
}
.card-header {
font-size: 14px;
margin-bottom: 12px;
}
.card-text {
font-size: 20px;
}
}
/* Tablet and larger */
@media (min-width: 768px) {
.app {
max-width: 100%;
}
.screen {
padding: 50px 40px;
}
.statement-card {
min-height: 320px;
padding: 50px 40px;
}
.card-text {
font-size: 30px;
}
.btn-punishment {
padding: 24px;
font-size: 22px;
}
.modal-content {
padding: 50px 40px;
}
.modal-title {
font-size: 32px;
}
.modal-text {
font-size: 22px;
}
}
/* Synchronized RU room mode */
.multiplayer-screen {
position: relative;
width: 100%;
max-width: 520px;
margin: 0 auto;
overflow-x: hidden;
background:
radial-gradient(circle at 86% 8%, rgba(255, 59, 111, 0.16), transparent 28%),
radial-gradient(circle at 12% 88%, rgba(156, 39, 176, 0.16), transparent 34%);
}
.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: 18px 0 12px;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(30px, 9vw, 42px);
font-style: italic;
line-height: 1.05;
}
.multiplayer-center > p:not(.multiplayer-kicker) {
color: #aeb7d8;
font-size: 15px;
line-height: 1.55;
}
.multiplayer-kicker {
color: #ff769a;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.17em;
}
.multiplayer-kicker strong {
color: #fff;
}
.waiting-orbit {
position: relative;
display: grid;
place-items: center;
width: 112px;
height: 112px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0.025), 0 24px 60px rgba(0, 0, 0, 0.34);
}
.waiting-orbit::before {
content: '';
position: absolute;
inset: -5px;
border: 3px solid transparent;
border-top-color: #ff3b6f;
border-right-color: #9c27b0;
border-radius: 50%;
animation: spin 1.8s linear infinite;
}
.waiting-orbit span {
font-family: Georgia, 'Times New Roman', serif;
font-size: 52px;
font-style: italic;
font-weight: 700;
}
.waiting-player-count {
margin-top: 26px;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: #cbd2ea;
background: rgba(255, 255, 255, 0.045);
font-size: 12px;
}
.multiplayer-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 34px;
margin: 0 2px 14px 52px;
}
.round-pill,
.answer-progress,
.next-round-label {
color: #cbd2ea;
font-size: 12px;
font-weight: 750;
}
.round-pill {
padding: 7px 11px;
border: 1px solid rgba(255, 101, 143, 0.36);
border-radius: 999px;
color: #ff88a8;
background: rgba(233, 30, 99, 0.08);
}
.multiplayer-lives {
display: flex;
flex: 0 0 auto;
gap: 8px;
margin: 0 -24px 16px;
padding: 0 24px 5px;
overflow-x: auto;
scrollbar-width: none;
}
.multiplayer-lives::-webkit-scrollbar {
display: none;
}
.life-player {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
min-width: 118px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 15px;
background: rgba(255, 255, 255, 0.045);
}
.life-player.current {
border-color: rgba(255, 82, 130, 0.48);
background: rgba(233, 30, 99, 0.1);
}
.life-player.disconnected {
opacity: 0.42;
}
.life-avatar,
.choice-avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 31px;
height: 31px;
overflow: hidden;
border-radius: 10px;
color: #fff;
background: linear-gradient(145deg, #8b3fe8, #ff3b6f);
font-size: 11px;
font-weight: 900;
}
.life-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.life-copy {
display: grid;
gap: 4px;
}
.life-copy strong {
max-width: 80px;
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.life-hearts {
display: flex;
gap: 2px;
}
.life-heart {
color: rgba(255, 255, 255, 0.16);
font-size: 11px;
line-height: 1;
}
.life-heart.active {
color: #ff527f;
filter: drop-shadow(0 2px 5px rgba(255, 59, 111, 0.45));
}
.life-hearts.compact .life-heart {
font-size: 9px;
}
#multiplayer-game-screen {
gap: 0;
}
.split-statement-card {
position: relative;
display: grid;
flex: 1 1 auto;
grid-template-rows: minmax(92px, 0.9fr) 24px minmax(135px, 1.25fr);
width: 100%;
min-height: 310px;
max-height: 470px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 30px;
background:
radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.11), transparent 24%),
linear-gradient(150deg, #9b2bd0 0%, #e91e63 58%, #ff654f 112%);
box-shadow: 0 24px 70px rgba(132, 24, 105, 0.38);
cursor: grab;
touch-action: pan-y;
user-select: none;
will-change: transform, opacity;
transition: transform 260ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease, filter 220ms ease;
}
.split-statement-card.dragging {
cursor: grabbing;
transition: none;
}
.split-statement-card.swipe-demo {
animation: swipe-affordance-card 1.55s cubic-bezier(.45, 0, .2, 1) 300ms both;
}
.split-statement-card.swipe-demo .swipe-stamp.happened {
animation: swipe-affordance-happened 1.55s ease 300ms both;
}
.split-statement-card.swipe-demo .swipe-stamp.never {
animation: swipe-affordance-never 1.55s ease 300ms both;
}
@keyframes swipe-affordance-card {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
24% { transform: translate3d(calc(34px * var(--rp-motion-swipe-intensity, 1)), 0, 0) rotate(calc(2.6deg * var(--rp-motion-swipe-intensity, 1))); }
43% { transform: translate3d(0, 0, 0) rotate(0); }
69% { transform: translate3d(calc(-34px * var(--rp-motion-swipe-intensity, 1)), 0, 0) rotate(calc(-2.6deg * var(--rp-motion-swipe-intensity, 1))); }
88% { transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes swipe-affordance-happened {
0%, 8%, 43%, 100% { opacity: 0; }
24%, 31% { opacity: 0.92; }
}
@keyframes swipe-affordance-never {
0%, 49%, 88%, 100% { opacity: 0; }
69%, 76% { opacity: 0.92; }
}
.split-statement-card.swipe-out-left,
.split-statement-card.swipe-out-right {
opacity: 0;
}
.split-statement-card.answered {
opacity: 0.48;
filter: saturate(0.55);
transform: scale(0.985);
}
.swipe-stamp {
position: absolute;
z-index: 4;
top: 25px;
padding: 8px 13px 7px;
border: 3px solid currentColor;
border-radius: 10px;
opacity: 0;
font-family: 'Trebuchet MS', 'Avenir Next', sans-serif;
font-size: 20px;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
pointer-events: none;
filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.25));
}
.swipe-stamp.happened {
left: 22px;
color: #fff4a8;
transform: rotate(-8deg);
}
.swipe-stamp.never {
right: 22px;
color: #9effc0;
transform: rotate(8deg);
}
.split-statement-card::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.13;
background-image: radial-gradient(rgba(255, 255, 255, 0.75) 0.75px, transparent 0.75px);
background-size: 7px 7px;
mix-blend-mode: soft-light;
}
.split-statement-lead,
.split-statement-text {
position: relative;
z-index: 1;
display: grid;
place-items: center;
padding: 22px 28px;
text-align: center;
}
.split-statement-lead {
align-items: end;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(28px, 8.5vw, 43px);
font-style: italic;
font-weight: 700;
letter-spacing: -0.035em;
}
.split-statement-text {
align-items: start;
font-family: 'Trebuchet MS', 'Avenir Next', sans-serif;
font-size: clamp(27px, 8vw, 40px);
font-weight: 900;
line-height: 1.08;
text-wrap: balance;
}
.split-statement-divider {
position: relative;
z-index: 1;
display: grid;
place-items: center;
}
.split-statement-divider span {
width: 58px;
height: 2px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}
.multiplayer-answer-area {
flex: 0 0 auto;
padding-top: 18px;
}
.multiplayer-answer-area > p {
min-height: 20px;
margin-bottom: 10px;
color: #adb6d4;
font-size: 13px;
text-align: center;
}
.multiplayer-answer-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.multiplayer-answer-button {
display: grid;
place-items: center;
min-height: 62px;
padding: 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 19px;
color: #fff;
background: #202744;
font: inherit;
cursor: pointer;
transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease;
}
.multiplayer-answer-button strong {
font-size: 18px;
letter-spacing: 0.01em;
}
.multiplayer-answer-button.selected {
border-color: #ff769a;
transform: translateY(-2px);
}
.multiplayer-answer-button.never.selected {
border-color: #69e49a;
}
.multiplayer-answer-button:disabled:not(.selected) {
opacity: 0.38;
}
#multiplayer-reveal-screen {
overflow-y: auto;
}
.reveal-statement {
margin-bottom: 15px;
padding: 17px 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
background: linear-gradient(135deg, rgba(156, 39, 176, 0.24), rgba(233, 30, 99, 0.14));
}
.reveal-statement span,
.reveal-statement strong {
display: block;
}
.reveal-statement span {
margin-bottom: 4px;
color: #ff83a4;
font-family: Georgia, 'Times New Roman', serif;
font-size: 18px;
font-style: italic;
}
.reveal-statement strong {
font-family: 'Trebuchet MS', 'Avenir Next', sans-serif;
font-size: 22px;
line-height: 1.14;
}
.choice-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.choice-column {
min-width: 0;
padding: 13px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
}
.choice-column h2 {
margin: 0 0 10px;
font-size: 14px;
}
.choice-column h2 span {
margin-right: 5px;
color: #ff527f;
}
.choice-column.never h2 span {
color: #4ade80;
}
.choice-column > div {
display: grid;
gap: 7px;
}
.choice-player {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
padding: 7px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.055);
}
.choice-avatar {
width: 27px;
height: 27px;
border-radius: 9px;
font-size: 9px;
}
.choice-player > span:last-child {
display: grid;
min-width: 0;
gap: 3px;
}
.choice-player strong {
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.choice-empty {
padding: 11px 0;
color: #77819f;
font-size: 12px;
text-align: center;
}
.punishment-phase-screen {
overflow-y: auto;
background:
radial-gradient(circle at 50% 8%, rgba(255, 184, 77, 0.24), transparent 32%),
radial-gradient(circle at 85% 88%, rgba(233, 30, 99, 0.18), transparent 34%);
}
.punishment-phase-content {
display: flex;
flex: 1;
flex-direction: column;
align-items: stretch;
justify-content: center;
width: 100%;
max-width: 410px;
margin: 0 auto;
text-align: center;
}
.punishment-phase-kicker {
margin-bottom: 13px;
color: #ffc76f;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
}
.punishment-phase-content h1 {
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(30px, 9vw, 43px);
font-style: italic;
line-height: 1.08;
}
.punishment-phase-copy {
max-width: 330px;
margin: 13px auto 22px;
color: #aeb7d8;
font-size: 13px;
line-height: 1.45;
}
.punishment-phase-list {
display: grid;
gap: 10px;
}
.punishment-task-card {
position: relative;
padding: 18px 18px 19px;
overflow: hidden;
border: 1px solid rgba(255, 195, 109, 0.32);
border-radius: 22px;
background:
radial-gradient(circle at 90% 10%, rgba(255, 202, 116, 0.13), transparent 28%),
linear-gradient(145deg, rgba(255, 157, 66, 0.13), rgba(233, 30, 99, 0.1));
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
text-align: left;
}
.punishment-task-card.current {
border-color: rgba(255, 205, 120, 0.75);
box-shadow: 0 18px 54px rgba(255, 145, 61, 0.18);
}
.punishment-task-card strong {
display: block;
margin-bottom: 7px;
color: #ffcb7d;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
}
.punishment-task-card p {
margin: 0;
font-family: 'Trebuchet MS', 'Avenir Next', sans-serif;
font-size: clamp(18px, 5.4vw, 23px);
font-weight: 800;
line-height: 1.25;
}
.punishment-phase-status {
margin: 17px 0 10px;
color: #c8cee4;
font-size: 12px;
font-weight: 750;
}
.punishment-complete-button {
min-height: 58px;
border: 0;
border-radius: 18px;
color: #15101a;
background: linear-gradient(100deg, #ffd27f, #ff9f43);
box-shadow: 0 13px 32px rgba(255, 159, 67, 0.24);
font: inherit;
font-size: 16px;
font-weight: 900;
cursor: pointer;
}
.punishment-complete-button[hidden] {
display: none;
}
.punishment-complete-button:disabled {
color: #d8dbe7;
background: #30364d;
box-shadow: none;
cursor: default;
}
.punishment-waiting {
min-height: 58px;
margin: 0;
padding: 18px 14px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
color: #c7cce0;
background: rgba(255, 255, 255, 0.04);
font-size: 13px;
}
.punishment-waiting[hidden] {
display: none;
}
.punishment-timebar {
height: 4px;
margin-top: 18px;
overflow: hidden;
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
}
.punishment-timebar span {
display: block;
width: 100%;
height: 100%;
transform-origin: left;
background: linear-gradient(90deg, #ffd27f, #ff7657);
}
.punishment-time-label {
margin-top: 8px;
color: #8f97b3;
font-size: 11px;
}
.next-round-track {
flex: 0 0 auto;
height: 3px;
margin-top: 14px;
overflow: hidden;
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
}
.next-round-track span {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
transform-origin: left;
background: linear-gradient(90deg, #ff3b6f, #9c27b0);
}
.packs-room-error {
min-height: 18px;
margin: 3px 0 0;
color: #ff8aa8;
font-size: 12px;
text-align: center;
}
.ended-icon {
display: grid;
place-items: center;
width: 86px;
height: 86px;
border-radius: 28px;
background: linear-gradient(145deg, #8b3fe8, #ff3b6f);
box-shadow: 0 18px 48px rgba(233, 30, 99, 0.28);
font-size: 39px;
}
#multiplayer-ended-screen .btn-play {
margin-top: 28px;
}
/* Connection overlay: base in ../connection-overlay.css */
.connection-overlay {
--rp-connection-z: 500;
--rp-connection-gap: 14px;
--rp-connection-color: #b8c0dc;
--rp-connection-bg: rgba(8, 12, 29, 0.9);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.connection-overlay p {
font-size: 13px;
}
@media (max-width: 480px) {
.multiplayer-lives {
margin-right: -12px;
margin-left: -12px;
padding-right: 12px;
padding-left: 12px;
}
.multiplayer-topline {
margin-left: 42px;
}
.split-statement-card {
min-height: 275px;
border-radius: 26px;
}
}
@media (max-height: 680px) {
.multiplayer-lives {
margin-bottom: 9px;
}
.split-statement-card {
min-height: 238px;
grid-template-rows: minmax(76px, 0.8fr) 18px minmax(110px, 1.1fr);
}
.split-statement-lead,
.split-statement-text {
padding: 14px 22px;
}
.multiplayer-answer-area {
padding-top: 10px;
}
.multiplayer-answer-button {
min-height: 54px;
}
}
@media (prefers-reduced-motion: reduce) {
.waiting-orbit::before {
animation: none;
}
.split-statement-card.swipe-demo,
.split-statement-card.swipe-demo .swipe-stamp {
animation: none;
}
.multiplayer-answer-button {
transition: none;
}
}
/* One-phone end (after «Количество карточек»): ru-party-finale.js covers it with the shared game-end screen */
.nhie-solo-final-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
}
/* One phone «Кого выбрали?» before a punishment: the shared player cards (player-pick.css). */
#punish-pick-screen #punish-players { flex: 1 1 auto; overflow-y: auto; align-content: start; }
.punishment-player { margin: -4px 0 10px; text-align: center; font-size: 17px; font-weight: 700; }
/* One phone: several picked players (shared task) wrap centered. */
#punishment-player { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
.punishment-player[hidden] { display: none; }
/* /neverhaveiever/multiplayer-roomplay.css */
/* RoomPlay shell for the synchronized "Never Have I Ever" mode.
RoomPlay defaults; swipe cards, lives and punishments are explicit game content. */
.multiplayer-screen {
--rp-bg: var(--bg-primary);
--rp-panel: var(--bg-card);
--rp-surface: #1a2140;
--rp-line: rgba(255, 255, 255, 0.12);
--rp-text: var(--text-primary);
--rp-muted: var(--text-secondary);
--game-accent: #ff527f;
--game-accent-soft: #ff91af;
--game-secondary: #9c5cf6;
--game-positive: #69e49a;
--game-warning: #ffc76f;
width: min(430px, 100%);
max-width: 430px;
padding: calc(10px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
overflow-x: hidden;
color: var(--rp-text);
background: linear-gradient(180deg, var(--bg-primary) 0%, #0a0f1f 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.multiplayer-topbar {
display: grid;
flex: 0 0 auto;
grid-template-columns: 48px 1fr 48px;
align-items: center;
min-height: 56px;
margin-bottom: 12px;
}
.multiplayer-icon-button {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--rp-line);
border-radius: 15px;
color: var(--rp-text);
background: rgba(11, 23, 50, 0.88);
cursor: pointer;
transition: transform 140ms ease, background 140ms ease;
}
.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(0.95);
}
.multiplayer-brand-mark {
display: flex;
justify-self: center;
align-items: center;
gap: 8px;
color: #dbe6ff;
font-size: 11px;
letter-spacing: 0.14em;
}
.multiplayer-brand-mark span {
width: 12px;
height: 12px;
transform: rotate(45deg);
border-radius: 3px;
background: linear-gradient(135deg, var(--game-secondary) 0 50%, var(--game-accent) 50%);
}
.multiplayer-topbar-spacer {
width: 48px;
height: 48px;
}
.multiplayer-center {
width: min(620px, 100%);
max-width: 620px;
min-height: calc(var(--app-height, 100dvh) - 130px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.multiplayer-center h1,
.punishment-phase-content h1 {
margin: 18px 0 12px;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.045em;
}
.multiplayer-center > p:not(.multiplayer-kicker),
.punishment-phase-copy {
max-width: 480px;
color: var(--rp-muted);
font-size: 15px;
line-height: 1.55;
}
.multiplayer-kicker,
.punishment-phase-kicker {
color: var(--game-accent-soft);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
}
.multiplayer-kicker strong {
color: var(--rp-text);
}
.waiting-orbit {
width: 128px;
height: 128px;
margin-bottom: 8px;
border-color: rgba(255, 82, 127, 0.38);
box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0.025), 0 24px 60px rgba(0, 0, 0, 0.34);
}
.waiting-orbit::before {
inset: auto;
top: 4px;
left: 16px;
width: 18px;
height: 18px;
border: 0;
border-radius: 6px;
background: var(--game-secondary);
animation: never-room-orbit 3s ease-in-out infinite alternate;
}
.waiting-orbit span {
width: 74px;
height: 74px;
display: grid;
place-items: center;
border-radius: 24px;
color: #220817;
background: var(--game-accent);
font: 800 34px Unbounded, sans-serif;
}
.waiting-player-count {
margin-top: 14px;
padding: 10px 14px;
border-color: var(--rp-line);
color: #d9e4f8;
background: rgba(255, 255, 255, 0.06);
font-weight: 700;
}
.multiplayer-topline {
min-height: 34px;
margin: 0 2px 14px;
}
.round-pill,
.answer-progress,
.next-round-label {
color: var(--rp-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
}
.round-pill {
border-color: rgba(255, 82, 127, 0.42);
color: var(--game-accent-soft);
background: rgba(255, 82, 127, 0.1);
}
.multiplayer-lives {
margin: 0 -18px 14px;
padding: 0 18px 5px;
}
.life-player {
min-width: 126px;
padding: 8px 10px;
border-color: var(--rp-line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.045);
}
.life-player.current {
border-color: rgba(255, 82, 127, 0.5);
background: rgba(255, 82, 127, 0.1);
}
.life-avatar,
.choice-avatar {
background: linear-gradient(145deg, var(--game-secondary), var(--game-accent));
}
.life-heart.active {
color: var(--game-accent);
filter: drop-shadow(0 2px 5px rgba(255, 82, 127, 0.45));
}
#multiplayer-game-screen {
gap: 0;
}
.split-statement-card {
grid-template-rows: minmax(88px, 0.85fr) 24px minmax(130px, 1.15fr);
min-height: 310px;
max-height: 480px;
border-color: rgba(255, 255, 255, 0.18);
border-radius: 30px;
background:
radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.12), transparent 24%),
linear-gradient(150deg, var(--game-secondary) 0%, var(--game-accent) 60%, #ff7657 112%);
box-shadow: 0 28px 76px rgba(99, 34, 112, 0.34);
}
.split-statement-lead {
font: 800 clamp(25px, 7vw, 39px)/1.08 Unbounded, Manrope, sans-serif;
font-style: normal;
letter-spacing: -0.045em;
}
.split-statement-text {
font: 800 clamp(25px, 7vw, 39px)/1.12 Manrope, sans-serif;
letter-spacing: -0.025em;
}
.swipe-stamp {
font-family: Unbounded, Manrope, sans-serif;
font-size: 17px;
}
.swipe-stamp.happened {
color: #fff0a8;
}
.swipe-stamp.never {
color: #a9ffc8;
}
.multiplayer-answer-area {
padding-top: 15px;
}
.multiplayer-answer-area > p {
color: var(--rp-muted);
font-size: 12px;
}
.multiplayer-answer-button {
min-height: 56px;
border-color: var(--rp-line);
border-radius: 17px;
background: rgba(255, 255, 255, 0.055);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.multiplayer-answer-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.09);
}
.multiplayer-answer-button.selected {
border-color: var(--game-accent);
background: rgba(255, 82, 127, 0.15);
}
.multiplayer-answer-button.never.selected {
border-color: var(--game-positive);
background: rgba(105, 228, 154, 0.12);
}
.reveal-statement {
margin-bottom: 14px;
padding: 18px;
border-color: var(--rp-line);
border-radius: 20px;
background: var(--rp-panel);
}
.reveal-statement span {
color: var(--game-accent-soft);
font: 700 13px/1.3 Manrope, sans-serif;
letter-spacing: 0.04em;
}
.reveal-statement strong {
margin-top: 7px;
font: 700 clamp(19px, 5vw, 26px)/1.25 Manrope, sans-serif;
}
.choice-columns {
gap: 12px;
}
.choice-column {
padding: 16px 12px;
border: 0;
border-radius: 22px;
color: #210b16;
}
.choice-column.happened {
background: linear-gradient(150deg, #ff9ab5, var(--game-accent));
}
.choice-column.never {
color: #082116;
background: linear-gradient(210deg, #b0f9c9, var(--game-positive));
}
.choice-column h2 {
font: 800 14px/1.2 Unbounded, Manrope, sans-serif;
}
.choice-column h2 span,
.choice-column.never h2 span {
color: currentColor;
}
.choice-player {
background: rgba(255, 255, 255, 0.3);
}
.choice-avatar {
color: #fff;
background: #111d38;
}
.choice-empty {
color: rgba(8, 20, 30, 0.62);
}
.punishment-phase-screen {
background:
radial-gradient(circle at 50% 8%, rgba(255, 199, 111, 0.19), transparent 32%),
radial-gradient(circle at 85% 88%, rgba(255, 82, 127, 0.13), transparent 34%),
linear-gradient(180deg, #0d1630 0%, var(--rp-bg) 100%);
}
.punishment-phase-content {
width: min(620px, 100%);
max-width: 620px;
}
.punishment-phase-content h1 {
margin: 0;
}
.punishment-phase-kicker {
color: var(--game-warning);
}
.punishment-phase-copy {
margin: 13px auto 22px;
}
.punishment-phase-list {
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.punishment-task-card {
border-color: rgba(255, 199, 111, 0.32);
border-radius: 22px;
background: var(--rp-panel);
}
.punishment-task-card.current {
border-color: rgba(255, 199, 111, 0.76);
box-shadow: 0 18px 54px rgba(255, 145, 61, 0.16);
}
.punishment-task-card strong {
color: var(--game-warning);
}
.punishment-task-card .punishment-player {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.punishment-task-card .punishment-avatar {
width: 28px;
height: 28px;
flex: 0 0 28px;
font-size: 12px;
}
.punishment-task-card p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.punishment-complete-button {
min-height: 56px;
border-radius: 18px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.punishment-waiting {
min-height: 56px;
border-color: var(--rp-line);
background: rgba(255, 255, 255, 0.04);
}
.next-round-track span {
background: linear-gradient(90deg, var(--game-accent), var(--game-secondary));
}
.ended-icon {
color: #fff;
background: linear-gradient(145deg, var(--game-secondary), var(--game-accent));
}
.ended-icon svg {
width: 42px;
height: 42px;
}
#multiplayer-ended-screen .btn-play {
width: min(420px, 100%);
min-height: 56px;
border-radius: 18px;
}
.connection-overlay {
color: var(--rp-muted);
background: rgba(7, 17, 38, 0.94);
}
.multiplayer-icon-button:focus-visible,
.multiplayer-answer-button:focus-visible,
.punishment-complete-button:focus-visible,
#multiplayer-ended-screen .btn-play:focus-visible {
outline: 3px solid #d9b8ff;
outline-offset: 3px;
}
@keyframes never-room-orbit {
to { transform: translate(92px, 95px) rotate(180deg); }
}
@media (max-width: 480px) {
.multiplayer-screen {
padding-right: max(12px, env(safe-area-inset-right, 0px));
padding-left: max(12px, env(safe-area-inset-left, 0px));
}
.multiplayer-lives {
margin-right: -12px;
margin-left: -12px;
padding-right: 12px;
padding-left: 12px;
}
.split-statement-card {
min-height: 275px;
border-radius: 26px;
}
.choice-column {
padding: 14px 10px;
}
}
@media (max-height: 680px) {
.multiplayer-topbar {
min-height: 48px;
margin-bottom: 7px;
}
.multiplayer-icon-button,
.multiplayer-topbar-spacer {
width: 44px;
height: 44px;
}
.split-statement-card {
min-height: 238px;
}
}
@media (orientation: landscape) and (max-height: 620px) and (min-width: 620px) {
#multiplayer-game-screen.active {
display: grid;
grid-template-columns: minmax(240px, 0.85fr) minmax(340px, 1.25fr);
grid-template-rows: auto auto 1fr auto;
gap: 8px 18px;
}
#multiplayer-game-screen .multiplayer-topbar {
grid-column: 1 / -1;
margin-bottom: 0;
}
#multiplayer-game-screen .multiplayer-topline {
grid-column: 1;
grid-row: 2;
margin: 0;
}
#multiplayer-game-screen .multiplayer-lives {
grid-column: 1;
grid-row: 3;
align-content: start;
flex-wrap: wrap;
margin: 0;
padding: 0;
overflow-y: auto;
}
#multiplayer-game-screen .split-statement-card {
grid-column: 2;
grid-row: 2 / 4;
min-height: 270px;
}
#multiplayer-game-screen .multiplayer-answer-area {
grid-column: 2;
grid-row: 4;
padding-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.waiting-orbit::before,
.split-statement-card.swipe-demo,
.split-statement-card.swipe-demo .swipe-stamp {
animation: none;
}
.multiplayer-icon-button,
.multiplayer-answer-button {
transition: none;
}
}
/* Common room shell; local cards are deliberately outside this scope. */
.multiplayer-screen { margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.multiplayer-screen h1 { font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: normal; }
.multiplayer-screen .multiplayer-icon-button { border: 0; background: transparent; border-radius: 0; }
.multiplayer-screen .players-list { width: 100%; margin-top: 24px; }
/* Shared preparation geometry; never applies to the one-phone game. */
.nhie-online #packs-screen,
.nhie-online #multiplayer-waiting-screen {
position: relative;
padding-top: calc(64px + env(safe-area-inset-top, 0px));
}
.nhie-online .btn-back {
top: calc(16px + env(safe-area-inset-top, 0px));
min-width: 48px;
min-height: 48px;
}
.nhie-online #packs-screen .title { margin-bottom: 8px; }
.nhie-online #packs-screen .subtitle { margin-bottom: 24px; }
.nhie-online #btn-start-with-packs .play-icon { display: none; }
.nhie-online #multiplayer-waiting-text { margin: 24px 0; text-align: center; }
.nhie-online #multiplayer-rules-button { margin-top: 16px; }
.nhie-online #multiplayer-waiting-screen .screen-content { padding: 0; }
#packs-room-status { display: none; }
.nhie-online #packs-room-status { display: block; margin-bottom: 16px; text-align: center; color: var(--text-secondary); }
.nhie-online #onboarding-screen { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
/* Game end: the shared game-end screen (../game-end.css) brings its own padding and one-screen height. */
#multiplayer-finale-screen { padding: 0; animation: none; }
/* «Было» costs a life: on the reveal the lost heart swells, shakes and goes out, and a «−1» floats up. */
.life-hearts { position: relative; align-items: center; }
.life-heart.losing {
display: inline-block;
animation: nhie-heart-loss 1.1s cubic-bezier(.3, .7, .4, 1) .35s both;
}
.life-loss {
position: absolute;
left: 100%;
top: 50%;
margin-left: 12px;
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
white-space: nowrap;
pointer-events: none;
animation: nhie-life-loss 1.8s ease-out .45s both;
}
@keyframes nhie-heart-loss {
0% { transform: scale(1); color: #ff8a93; }
22% { transform: scale(2.4); color: #ff8a93; }
38% { transform: scale(2.2) rotate(-14deg); color: #ff8a93; }
54% { transform: scale(2.2) rotate(12deg); color: #ff8a93; }
70% { transform: scale(1.6) rotate(0) translateY(2px); opacity: .6; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes nhie-life-loss {
0% { opacity: 0; transform: translateY(-20%) scale(.6); }
18% { opacity: 1; transform: translateY(-50%) scale(1.25); }
30% { transform: translateY(-50%) scale(1); }
75% { opacity: 1; transform: translateY(-120%); }
100% { opacity: 0; transform: translateY(-170%); }
}
@media (prefers-reduced-motion: reduce) {
.life-heart.losing { animation: none; }
.life-loss { animation: none; transform: translateY(-50%); }
}
/* Like / dislike on the online statement card once this phone answered (shared
content-report.css). Sheet tokens on :root follow the cutout palette; the thumbs sit on the dark
page, so the pressed thumb is paper (#f1dadd) rather than the crimson accent. */
:root {
--rp-report-surface: var(--bg-secondary);
--rp-report-text: var(--game-paper);
--rp-report-muted: rgb(241 218 221 / 72%);
--rp-report-accent: var(--game-accent);
--rp-report-accent-ink: var(--game-paper);
}
/* On the swipe card's bottom edge, centred, the report flag in the corner beside it. */
.nhie-online-card-vote { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; margin: 0; }
.nhie-online-card-vote[hidden] { display: none; }
.nhie-online-card-vote :is(.rp-card-vote__btn, .rp-report-flag) { color: rgb(241 218 221 / 60%); }
.nhie-online-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--game-paper); }
/* Host's «Завершить» in the top bar: a labelled pill, so it is never mistaken for the card's report flag. */
.multiplayer-topbar:has(.nhie-topbar-actions) { grid-template-columns: auto 1fr auto; gap: 8px; }
.multiplayer-topbar:has(.nhie-topbar-actions) .btn-back-multiplayer { justify-self: start; }
/* Right column: the host's shared «Пауза» (shared/client/online-pause.ts) and «Завершить» side by side. */
.nhie-topbar-actions { display: flex; justify-self: end; align-items: center; gap: 8px; min-width: 48px; justify-content: flex-end; }
.nhie-topbar-actions .rp-online-pause-btn--inline { margin: 0; }
.nhie-finish-button {
min-height: 36px;
padding: 0 14px;
border: 1.5px solid currentColor;
border-radius: 999px;
color: var(--game-paper, var(--rp-text));
background: transparent;
font: inherit;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.nhie-finish-button[hidden] { display: none; }
.nhie-finish-button:active { scale: .94; }
.nhie-finish-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Shared task for 2+ punished players: all of them on one card. */
.punishment-group-players {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
}
/* /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;
}
.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);
}
/* /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;
background: linear-gradient(180deg, rgba(13, 19, 41, 0) 0%, var(--bg-primary) 14px);
}
/* 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;
}
/* /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; }
/* /ui-icons.css */
/*
* UI icons: one flat SVG icon family for interface chrome instead of emoji.
* Emoji look different on every platform (Apple, Google, Samsung, Windows), ignore the
* game palette and break the "one vector family" rule in docs/ROOMPLAY_DESIGN_RULES.md.
* These are 24x24 shapes on a 2.1 round stroke (or solid fills), used as SVG masks, so
* the icon is 1em and takes currentColor: size and colour always come from the context.
*
* Markup:
* Pseudo-elements reuse the shapes through --rp-icon-
, e.g.
* .btn::before { content: ""; width: 1em; height: 1em; background: currentColor;
* -webkit-mask: var(--rp-icon-dice) center / contain no-repeat;
* mask: var(--rp-icon-dice) center / contain no-repeat; }
* Right/wrong marks stay in answer-marks.css (.rp-mark); gender signs in player-gender.css.
*/
:root {
--rp-icon-pause: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3Crect x='13.8' y='4.5' width='4.2' height='15' rx='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-play: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.6v12.8a1.1 1.1 0 0 0 1.7.93l10-6.4a1.1 1.1 0 0 0 0-1.86l-10-6.4A1.1 1.1 0 0 0 8 5.6Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-video: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='6.3' width='12.6' height='11.4' rx='2.4'/%3E%3Cpath d='M15.4 10.4l4.5-2.7a.8.8 0 0 1 1.2.7v7.2a.8.8 0 0 1-1.2.7l-4.5-2.7Z' fill='%23000'/%3E%3C/svg%3E");
--rp-icon-skip: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.3v11.4a1 1 0 0 0 1.55.83L15 12.83a1 1 0 0 0 0-1.66L6.55 5.47A1 1 0 0 0 5 6.3Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18.6 5.5v13'/%3E%3C/svg%3E");
--rp-icon-crown: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l4.6 4.2L12 5l3.9 6.7 4.6-4.2-1.7 10.3a1 1 0 0 1-1 .8H6.2a1 1 0 0 1-1-.8Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-card: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18M7 14.8h3.5'/%3E%3C/svg%3E");
--rp-icon-sound: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6v4.8a1 1 0 0 0 1 1h3l4.3 3.6a.7.7 0 0 0 1.2-.54V5.54a.7.7 0 0 0-1.2-.54L7.5 8.6h-3a1 1 0 0 0-1 1Z' fill='%23000' stroke='none'/%3E%3Cpath d='M16 9a4.2 4.2 0 0 1 0 6M18.8 6.3a8 8 0 0 1 0 11.4'/%3E%3C/svg%3E");
--rp-icon-vibrate: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3.5' width='8' height='17' rx='2.2'/%3E%3Cpath d='M4.8 8.5v7M19.2 8.5v7M2 10.5v3M22 10.5v3'/%3E%3C/svg%3E");
--rp-icon-star: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1.03 6L12 17l-5.38 2.85 1.03-6L3.3 9.6l6-.9Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
--rp-icon-lock: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='10.3' width='14.4' height='10.2' rx='2.6' fill='%23000' stroke='none'/%3E%3Cpath d='M8 10.3V8a4 4 0 0 1 8 0v2.3'/%3E%3C/svg%3E");
--rp-icon-dice: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='3.8' width='16.4' height='16.4' rx='4.2'/%3E%3Ccircle cx='8.6' cy='8.6' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.4' cy='15.4' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-eye: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-list: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2.6'/%3E%3Cpath d='M8.5 8.5h7M8.5 12.5h7M8.5 16.5h4'/%3E%3C/svg%3E");
--rp-icon-refresh: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.8 7.8 0 0 0 5.7 7.2L4.3 8.8'/%3E%3Cpath d='M4.3 4.3v4.5h4.5'/%3E%3Cpath d='M4.5 13.5a7.8 7.8 0 0 0 13.8 3.3l1.4-1.6'/%3E%3Cpath d='M19.7 19.7v-4.5h-4.5'/%3E%3C/svg%3E");
--rp-icon-heart: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-8.3-4.9-8.3-11a4.6 4.6 0 0 1 8.3-2.7 4.6 4.6 0 0 1 8.3 2.7c0 6.1-8.3 11-8.3 11Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-skull: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12 2.8a8.3 8.3 0 0 0-8.3 8.3c0 2.7 1.25 4.6 3.1 5.7v2.4a1.6 1.6 0 0 0 1.6 1.6h7.2a1.6 1.6 0 0 0 1.6-1.6v-2.4c1.85-1.1 3.1-3 3.1-5.7A8.3 8.3 0 0 0 12 2.8ZM6.9 11.3a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0ZM12.7 11.3a2.2 2.2 0 1 0 4.4 0a2.2 2.2 0 1 0-4.4 0ZM12 13.9l-1.2 2h2.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-close: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
--rp-icon-search: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='M15.2 15.2l5 5'/%3E%3C/svg%3E");
--rp-icon-ballot: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 11V4.5h9V11'/%3E%3Cpath d='M9.8 7.9l1.5 1.5 2.9-2.9'/%3E%3Cpath d='M3.8 11h16.4v8a1.5 1.5 0 0 1-1.5 1.5H5.3A1.5 1.5 0 0 1 3.8 19Z'/%3E%3Cpath d='M8.5 15h7'/%3E%3C/svg%3E");
--rp-icon-bolt: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6L5.2 13.4h6.1l-1 8 8.5-11h-6.2Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
--rp-icon-dove: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 6.2c-1.1-.9-2.9-1-4.1 0-1.2.9-1.6 2.3-2.7 3.5L9.5 4.2C8.3 7.1 8.6 9.6 10.1 11.5L3 12.4c1.2 3.8 4.6 6.4 8.7 6.4 4.6 0 7.4-3.4 7.4-7.4V9.2l1.9-.9Z' fill='%23000' stroke='none' stroke-linejoin='round'/%3E%3C/svg%3E");
--rp-icon-radiation: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3Cpath d='M10.20 8.88L7.25 3.77A9.5 9.5 0 0 1 16.75 3.77L13.80 8.88A3.6 3.6 0 0 0 10.20 8.88ZM15.60 12.00L21.50 12.00A9.5 9.5 0 0 1 16.75 20.23L13.80 15.12A3.6 3.6 0 0 0 15.60 12.00ZM10.20 15.12L7.25 20.23A9.5 9.5 0 0 1 2.50 12.00L8.40 12.00A3.6 3.6 0 0 0 10.20 15.12Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-stop: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12 2.8a9.2 9.2 0 1 0 0 18.4a9.2 9.2 0 1 0 0-18.4ZM6.8 10.4h10.4v3.2H6.8Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-phone: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.8' y='2.5' width='10.4' height='19' rx='2.6'/%3E%3Cpath d='M10.5 18.3h3'/%3E%3C/svg%3E");
--rp-icon-bug: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.2' y='8' width='9.6' height='12.5' rx='4.8'/%3E%3Cpath d='M9.4 8a2.6 2.6 0 0 1 5.2 0M10.2 5.6L8.8 3.6M13.8 5.6l1.4-2M7.2 11.2L4 9.4M7.2 14.4H3.6M7.6 17.6l-3.2 1.8M16.8 11.2L20 9.4M16.8 14.4h3.6M16.4 17.6l3.2 1.8'/%3E%3C/svg%3E");
--rp-icon-doc: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7.6l4.4 4.4v11.2a1.4 1.4 0 0 1-1.4 1.4H6.5a1.4 1.4 0 0 1-1.4-1.4V4.9a1.4 1.4 0 0 1 1.4-1.4Z'/%3E%3Cpath d='M13.8 3.7v4.5h4.5M8.6 12.6h6.8M8.6 16.4h6.8'/%3E%3C/svg%3E");
--rp-icon-image: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.5' width='17.6' height='15' rx='2.6'/%3E%3Ccircle cx='8.8' cy='9.6' r='1.7' fill='%23000' stroke='none'/%3E%3Cpath d='M3.8 17.2l5-4.9 3.8 3.7 2.6-2.5 5 4.4'/%3E%3C/svg%3E");
--rp-icon-users: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.2' r='3.6' fill='%23000' stroke='none'/%3E%3Cpath d='M2.3 19.8c.8-3.6 3.4-5.6 6.7-5.6s5.9 2 6.7 5.6Z' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.8' cy='7.4' r='3' fill='%23000' stroke='none'/%3E%3Cpath d='M16.9 12.6c2.6.2 4.3 2.2 4.9 5.2h-3.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-spy: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4h16M6.6 10.4l1.5-5.2a1.2 1.2 0 0 1 1.6-.8l2.3.9 2.3-.9a1.2 1.2 0 0 1 1.6.8l1.5 5.2Z' stroke-linejoin='round'/%3E%3Ccircle cx='8.4' cy='15.6' r='2.8'/%3E%3Ccircle cx='15.6' cy='15.6' r='2.8'/%3E%3Cpath d='M11.2 15.4a1.6 1.6 0 0 1 1.6 0'/%3E%3C/svg%3E");
--rp-icon-check-circle: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.8 12.4l2.9 2.9 5.5-5.8'/%3E%3C/svg%3E");
--rp-icon-sad: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.4 16.4c2-1.9 5.2-1.9 7.2 0'/%3E%3Ccircle cx='9' cy='10' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-hourglass: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11M6.5 20.5h11'/%3E%3Cpath d='M8 3.5c0 4.4 4 5 4 8.5s-4 4.1-4 8.5M16 3.5c0 4.4-4 5-4 8.5s4 4.1 4 8.5'/%3E%3C/svg%3E");
--rp-icon-gear: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill-rule='evenodd' d='M12.72 4.74L14.76 2.91L16.48 3.62L16.63 6.36L17.64 7.37L20.38 7.52L21.09 9.24L19.26 11.28L19.26 12.72L21.09 14.76L20.38 16.48L17.64 16.63L16.63 17.64L16.48 20.38L14.76 21.09L12.72 19.26L11.28 19.26L9.24 21.09L7.52 20.38L7.37 17.64L6.36 16.63L3.62 16.48L2.91 14.76L4.74 12.72L4.74 11.28L2.91 9.24L3.62 7.52L6.36 7.37L7.37 6.36L7.52 3.62L9.24 2.91L11.28 4.74ZM12 8.8a3.2 3.2 0 1 0 0 6.4a3.2 3.2 0 1 0 0-6.4Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-laugh: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M7.6 13.2h8.8a4.4 4.4 0 0 1-8.8 0Z' fill='%23000' stroke='none'/%3E%3Cpath d='M8 9.6l1.6-1.2M16 9.6l-1.6-1.2'/%3E%3C/svg%3E");
--rp-icon-palette: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 0 0 17.2c1.3 0 2-.8 2-1.8 0-1.3-1.2-1.7-1.2-2.9 0-1.1.9-1.9 2-1.9h1.9a3.9 3.9 0 0 0 3.9-3.9c0-3.8-3.8-6.7-8.6-6.7Z'/%3E%3Ccircle cx='7.6' cy='11.4' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='10.2' cy='7.4' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='7.6' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-puzzle: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h3.7a2.3 2.3 0 1 1 4.6 0h3.7v3.7a2.3 2.3 0 1 1 0 4.6V20h-12Z' stroke-linejoin='round'/%3E%3C/svg%3E");
--rp-icon-chat: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.6 3.6V17h0A2.4 2.4 0 0 1 4 14.5Z' stroke-linejoin='round'/%3E%3Cpath d='M8.5 9.4h7M8.5 12.6h4.5'/%3E%3C/svg%3E");
--rp-icon-masks: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.6c5-1.7 10-1.7 15 0v6.2c0 5-3.3 9-7.5 9s-7.5-4-7.5-9Z'/%3E%3Cpath d='M7.6 9.6c.9-.8 2.1-.8 3 0M13.4 9.6c.9-.8 2.1-.8 3 0'/%3E%3Cpath d='M8.4 13.2h7.2a3.6 3.6 0 0 1-7.2 0Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-question: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.5a2.7 2.7 0 1 1 3.9 2.4c-.8.4-1.3 1-1.3 1.9v.4'/%3E%3Ccircle cx='12' cy='17.1' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-globe: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M2.8 12h18.4M12 2.8c2.6 2.6 3.8 5.7 3.8 9.2s-1.2 6.6-3.8 9.2c-2.6-2.6-3.8-5.7-3.8-9.2S9.4 5.4 12 2.8Z'/%3E%3C/svg%3E");
--rp-icon-download: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8v11M7.4 10.6 12 15.2l4.6-4.6M4.5 19.6h15'/%3E%3C/svg%3E");
--rp-icon-flag: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 20.5V3.8'/%3E%3Cpath d='M5.5 4.6h12.2l-2.7 4.3 2.7 4.3H5.5Z' fill='%23000'/%3E%3C/svg%3E");
--rp-icon-thumb: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 10.6V20H4.4a1.1 1.1 0 0 1-1.1-1.1v-7.2a1.1 1.1 0 0 1 1.1-1.1Z'/%3E%3Cpath d='M7.2 10.6l3.7-6.6a1.9 1.9 0 0 1 3.5 1.3l-.8 4.1h5a2 2 0 0 1 2 2.4l-1.3 6.6A2.2 2.2 0 0 1 17.1 20H7.2'/%3E%3C/svg%3E");
--rp-icon-thumb-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 10.6V20H4.4a1.1 1.1 0 0 1-1.1-1.1v-7.2a1.1 1.1 0 0 1 1.1-1.1Z'/%3E%3Cpath d='M7.2 10.6l3.7-6.6a1.9 1.9 0 0 1 3.5 1.3l-.8 4.1h5a2 2 0 0 1 2 2.4l-1.3 6.6A2.2 2.2 0 0 1 17.1 20H7.2'/%3E%3C/svg%3E");
--rp-icon-move: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14.6' cy='4.4' r='2.2' fill='%23000' stroke='none'/%3E%3Cpath d='M13.6 8.6l-2.4 5.6 3.8 2.7-1 4.6'/%3E%3Cpath d='M11.2 14.2l-2.4 3.5-4.3.6'/%3E%3Cpath d='M6.3 10.6l3.4-2.6 3.9.6 2.6 3.2 3 .5'/%3E%3C/svg%3E");
--rp-icon-grid: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1.9'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1.9'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1.9'/%3E%3C/svg%3E");
--rp-icon-funnel: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h16a.9.9 0 0 1 .7 1.5l-6.2 7.3v5.5a.9.9 0 0 1-.5.8l-2.7 1.4a.7.7 0 0 1-1-.6v-7.1L3.3 6a.9.9 0 0 1 .7-1.5Z'/%3E%3C/svg%3E");
--rp-icon-split: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-6.2a3 3 0 0 0-.9-2.1L5.5 7.1M12 14.8a3 3 0 0 1 .9-2.1l5.6-5.6'/%3E%3Cpath d='M4.6 11.4V6.2h5.2M19.4 11.4V6.2h-5.2'/%3E%3C/svg%3E");
--rp-icon-stack: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3l8.6 4.3L12 11.9 3.4 7.6Z' fill='%23000' stroke='none'/%3E%3Cpath d='M3.4 12.1 12 16.4l8.6-4.3M3.4 16.4 12 20.7l8.6-4.3'/%3E%3C/svg%3E");
--rp-icon-flow: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='7.5' height='6.5' rx='1.8' fill='%23000' stroke='none'/%3E%3Crect x='14.6' y='14' width='6.4' height='6.5' rx='1.8'/%3E%3Cpath d='M6.8 10v4.2a3 3 0 0 0 3 3h2.4M10 14.6l2.6 2.6-2.6 2.6'/%3E%3C/svg%3E");
--rp-icon-mic: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.8' y='2.8' width='6.4' height='11.4' rx='3.2' fill='%23000' stroke='none'/%3E%3Cpath d='M5.4 11.2a6.6 6.6 0 0 0 13.2 0M12 17.8v3.4M8.6 21.2h6.8'/%3E%3C/svg%3E");
--rp-icon-chart: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M8 15.5l3.6-4.2 3 2.6L19.5 8'/%3E%3Cpath d='M15.6 8h3.9v3.9'/%3E%3C/svg%3E");
--rp-icon-coins: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 5.9v12.2M14.9 9.3c-.4-1-1.5-1.6-2.9-1.6-1.6 0-2.8.8-2.8 2 0 2.8 5.7 1.5 5.7 4.4 0 1.2-1.2 2.1-2.9 2.1-1.4 0-2.6-.6-3-1.7' stroke-width='1.8'/%3E%3C/svg%3E");
--rp-icon-menu: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M4.5 12h15M4.5 17h15' stroke-width='2.4'/%3E%3C/svg%3E");
--rp-icon-exit: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H7a1.5 1.5 0 0 0-1.5 1.5v12A1.5 1.5 0 0 0 7 19.5h6.5'/%3E%3Cpath d='M11 12h9.5M17 8.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E");
--rp-icon-sparkle: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2c.7 4 2.8 6.1 6.8 6.8-4 .7-6.1 2.8-6.8 6.8-.7-4-2.8-6.1-6.8-6.8 4-.7 6.1-2.8 6.8-6.8Z' fill='%23000' stroke='none'/%3E%3Cpath d='M18 13.6c.35 1.9 1.3 2.85 3.2 3.2-1.9.35-2.85 1.3-3.2 3.2-.35-1.9-1.3-2.85-3.2-3.2 1.9-.35 2.85-1.3 3.2-3.2Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--rp-icon-more: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.5' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.rp-icon {
display: inline-block;
flex: none;
width: 1em;
height: 1em;
vertical-align: -0.14em;
background-color: currentColor;
-webkit-mask: var(--rp-icon-star) center / contain no-repeat;
mask: var(--rp-icon-star) center / contain no-repeat;
}
/*
* Icon drawn in front of a label whose text is set by i18n (textContent), so the icon
* cannot live in the markup: