/* Animated room characters: the hero art above «Создать комнату» (create-room) and
   «Присоединиться к любой игре» (join-any). Inline SVG in the onboarding character style
   (flat arch blobs, white eyes, dark pupils). Colours come from --rch-* tokens so the page
   decides the palette: create-room maps them to its --room-* game palette (they cross-fade
   with it), join-any keeps the RoomPlay default. Static under prefers-reduced-motion. */

.rch-scene {
    --rch-a: #10b981;           /* main character */
    --rch-a-ink: #ffffff;       /* mouth on the main character */
    --rch-b: #ffffff;           /* friend */
    --rch-b-ink: #0d1329;       /* mouth on the friend */
    --rch-c: #8b5cf6;           /* newcomer / second friend */
    --rch-c-line: #ffffff;      /* newcomer outline + mouth */
    --rch-line: #ffffff;        /* empty slot, door frame */
    --rch-eye: #ffffff;
    --rch-pupil: #17191f;
    --rch-shadow: rgba(0, 0, 0, 0.22);
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    line-height: 0;
}
.rch-scene svg { width: 200px; height: auto; aspect-ratio: 260 / 150; overflow: visible; }
.rch-shadow { fill: var(--rch-shadow); }
.rch-eye { fill: var(--rch-eye); }
.rch-pupil { fill: var(--rch-pupil); }
.rch-a { fill: var(--rch-a); }
.rch-a-arm { stroke: var(--rch-a); }
.rch-a-ink { fill: var(--rch-a-ink); }
.rch-b { fill: var(--rch-b); }
.rch-b-ink { stroke: var(--rch-b-ink); }
.rch-c { fill: var(--rch-c); stroke: var(--rch-c-line); }
.rch-c-ink { stroke: var(--rch-c-line); }
.rch-c-arm { stroke: var(--rch-c); }
.rch-line { stroke: var(--rch-line); }
.rch-spark { fill: var(--rch-line); }
/* Reduced motion / first frame: the friend has already arrived, the empty slot is hidden. */
.rch-slot { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .rch-bob, .rch-blink, .rch-pop, .rch-plus, .rch-twinkle, .rch-hop, .rch-chev { transform-box: fill-box; }
    .rch-bob { transform-origin: 50% 100%; animation: rch-bob 2.2s ease-in-out infinite; }
    .rch-blink { transform-origin: center; animation: rch-blink 4.4s infinite; }
    /* Arms pivot at the shoulder given in viewBox px (fill-box would read it as an offset). */
    .rch-wave { transform-box: view-box; animation: rch-wave 0.9s ease-in-out infinite alternate; }
    .rch-pop { transform-origin: 50% 100%; animation: rch-pop 4.8s ease-in-out infinite; }
    .rch-slot { animation: rch-slot 4.8s ease-in-out infinite; }
    .rch-plus { transform-origin: center; animation: rch-plus 1.2s ease-in-out infinite; }
    .rch-twinkle { transform-origin: center; animation: rch-twinkle 1.8s ease-in-out infinite; }
    .rch-hop { transform-origin: 50% 100%; animation: rch-hop 1.6s ease-in-out infinite; }
    .rch-chev { animation: rch-chev 1.2s ease-in-out infinite; }
}

@keyframes rch-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rch-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.1); } }
@keyframes rch-wave { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes rch-pop {
    0%, 28% { transform: scale(0); opacity: 0; }
    36% { transform: scale(1.12, 0.92); opacity: 1; }
    42% { transform: scale(0.96, 1.05); }
    48%, 86% { transform: scale(1); opacity: 1; }
    94%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes rch-slot { 0%, 28% { opacity: 0.55; } 34%, 90% { opacity: 0; } 97%, 100% { opacity: 0.55; } }
@keyframes rch-plus { 0%, 100% { transform: scale(0.88); } 50% { transform: scale(1.08); } }
@keyframes rch-twinkle { 0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
@keyframes rch-hop {
    0%, 100% { transform: translate(0, 0) scale(1.05, 0.95); }
    25% { transform: translate(4px, -14px) scale(0.97, 1.04); }
    50% { transform: translate(8px, 0) scale(1.05, 0.95); }
    75% { transform: translate(4px, -14px) scale(0.97, 1.04); }
}
@keyframes rch-chev { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }