/* Online «Кто из нас» (RU rooms). RoomPlay room shell (top bar, waiting, punishment, reconnect)
   as in online «Я никогда не», coloured with the whosmostlikelyto palette tokens from wm-theme.css:
   bg #171719, surface #262629, crimson #A51043 (fills), rose #E0336E (outlines), rose text #FF7AA2,
   light grey #E4E3E5. The one-phone game never gets these screens. */

/* Online-only controls stay out of the one-phone packs screen. */
#packs-room-status,
.packs-room-error { display: none; }
.wm-online .packs-room-error { display: block; min-height: 18px; margin: 0; color: var(--rp-wrong); font-size: 14px; text-align: center; }
.wm-online .packs-room-error:empty { display: none; }
.wm-online #packs-room-status { display: block; margin: 0; color: var(--text-secondary); font-size: 14px; text-align: center; }
.wm-online #packs-room-status:empty { display: none; }
.wm-online #btn-start-with-packs .play-icon { display: none; }

.rp-direct .screen.multiplayer-screen {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Preparation screens keep the shared back button geometry. */
.wm-online #onboarding-screen,
.wm-online #packs-screen,
.wm-online #multiplayer-waiting-screen { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
.wm-online .btn-back { top: calc(16px + env(safe-area-inset-top, 0px)); min-width: 48px; min-height: 48px; }
.wm-online #multiplayer-waiting-screen .screen-content { padding: 0; }
.wm-online #multiplayer-waiting-text { margin: 24px 0; text-align: center; color: var(--text-secondary); }
.wm-online #multiplayer-rules-button { margin-top: 16px; }
.multiplayer-screen .players-list { width: 100%; margin-top: 24px; }

.multiplayer-topbar {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    min-height: 56px;
    margin-bottom: 8px;
}
.multiplayer-icon-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
}
.multiplayer-icon-button svg,
.ended-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.multiplayer-icon-button:active { transform: scale(.95); }
.multiplayer-brand-mark {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 8px;
    color: var(--wm-grey);
    font-size: 11px;
    letter-spacing: .14em;
}
.multiplayer-brand-mark span {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 3px;
    background: linear-gradient(135deg, var(--wm-grey) 0 50%, var(--wm-crimson) 50%);
}
.multiplayer-topbar-spacer { width: 48px; height: 48px; }

.multiplayer-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin: 0 0 12px;
}
.round-pill,
.answer-progress,
.next-round-label { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.round-pill {
    padding: 6px 12px;
    border: 1px solid var(--wm-rose);
    border-radius: 999px;
    color: var(--wm-rose-text);
}

/* ---- Question + vote ---- */
.wm-question-card {
    position: relative;
    flex: 0 0 auto;
    padding: 20px 20px 22px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--wm-surface);
}
.wm-question-mark {
    position: absolute;
    top: -18px;
    right: 8px;
    color: var(--wm-crimson);
    font: 900 120px/1 Manrope, sans-serif;
    pointer-events: none;
}
.wm-question-lead {
    position: relative;
    margin-bottom: 8px;
    color: var(--wm-rose-text);
    font-size: 15px;
    font-weight: 700;
}
.wm-question-text {
    position: relative;
    max-width: calc(100% - 48px);
    font-size: clamp(22px, 6.4vw, 30px);
    font-weight: 800;
    line-height: 1.18;
    overflow-wrap: anywhere;
}
.wm-question-text:first-letter { text-transform: uppercase; }
.wm-vote-hint {
    flex: 0 0 auto;
    margin: 16px 0 12px;
    color: var(--text-secondary);
    font-size: 15px;
    text-align: center;
}
.wm-vote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 8px;
}
.wm-vote-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 10px;
    border: 2px solid transparent;
    border-radius: 18px;
    color: var(--text-primary);
    background: var(--wm-surface);
    text-align: left;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.wm-vote-option:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .wm-vote-option:hover:not(:disabled) { border-color: rgba(224, 51, 110, .6); } }
.wm-vote-option:disabled { cursor: default; }
.wm-vote-option.disconnected { opacity: .45; }
.wm-vote-grid .wm-vote-option:disabled:not(.selected) { opacity: .5; }
.wm-vote-option.selected { border-color: var(--wm-rose); background: var(--wm-crimson); }
.wm-vote-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.wm-vote-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.wm-vote-copy small { color: var(--text-secondary); font-size: 12px; }
.wm-vote-check {
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--wm-crimson);
    background: #fff;
    font-size: 14px;
    font-weight: 900;
}
.wm-vote-option.selected .wm-vote-check { display: grid; }

.wm-avatar,
.wm-voter-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--wm-ink);
    background: var(--wm-grey);
    font-size: 14px;
    font-weight: 800;
}
.wm-avatar img,
.wm-voter-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wm-voter-avatar {
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border: 2px solid var(--wm-surface);
    font-size: 9px;
}
.wm-voter-avatar:first-child { margin-left: 0; }

.wm-hearts { display: flex; flex-wrap: wrap; gap: 1px; }
.wm-heart { color: rgba(228, 227, 229, .22); font-size: 12px; line-height: 1; }
.wm-heart.active { color: var(--wm-rose-text); }
.wm-vote-option.selected .wm-heart.active { color: #fff; }
.wm-heart.breaking { animation: wm-heart-break 900ms ease-in both; }
@keyframes wm-heart-break {
    0%, 30% { color: var(--wm-rose-text); transform: scale(1); }
    45% { color: var(--wm-rose-text); transform: scale(1.6) rotate(-12deg); }
    60% { transform: scale(1.4) rotate(12deg); }
    100% { color: rgba(228, 227, 229, .22); transform: scale(1); }
}

/* ---- Reveal ---- */
#multiplayer-reveal-screen { overflow-y: auto; }
.reveal-statement {
    flex: 0 0 auto;
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--wm-surface);
}
.reveal-statement span,
.reveal-statement strong { display: block; }
.reveal-statement span { margin-bottom: 4px; color: var(--wm-rose-text); font-size: 14px; font-weight: 700; }
.reveal-statement strong { font-size: clamp(18px, 5.2vw, 23px); line-height: 1.2; }
.reveal-statement strong:first-letter { text-transform: uppercase; }
/* Whole questions («Who's most likely to…?») carry their own lead. */
.wm-question-lead[hidden],
.reveal-statement span[hidden] { display: none; }
.wm-tally { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wm-tally-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 18px;
    background: var(--wm-surface);
    animation: wm-row-in 320ms ease-out both;
}
.wm-tally-row:nth-child(2) { animation-delay: 60ms; }
.wm-tally-row:nth-child(3) { animation-delay: 120ms; }
.wm-tally-row:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes wm-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wm-tally-bar {
    position: absolute;
    inset: 0;
    transform: scaleX(var(--share, 0));
    transform-origin: left;
    background: rgba(228, 227, 229, .06);
    transition: transform 600ms ease-out;
    pointer-events: none;
}
.wm-tally-row.lost { border-color: var(--wm-rose); }
.wm-tally-row.lost .wm-tally-bar { background: rgba(165, 16, 67, .55); }
.wm-tally-row > *:not(.wm-tally-bar) { position: relative; }
.wm-tally-main { display: grid; flex: 1; min-width: 0; gap: 4px; }
.wm-tally-main strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.wm-tally-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wm-tally-lost {
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--wm-crimson);
    font-size: 12px;
    font-weight: 800;
}
/* Guess mode: the right answer to «most / fewest votes» (rose outline, like the selected vote). */
.wm-tally-row.picked:not(.lost) { border-color: var(--wm-rose); }
.wm-tally-picked {
    padding: 2px 8px;
    border: 1.5px solid var(--wm-rose);
    border-radius: 999px;
    color: var(--wm-rose-text);
    font-size: 12px;
    font-weight: 800;
}
.wm-reveal-summary {
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
}
.wm-reveal-summary strong { color: var(--text-primary, #fff); font-size: 16px; }
.wm-reveal-summary[hidden] { display: none; }

/* Guess mode: points instead of hearts, the second question and the points table. */
.wm-score { color: var(--wm-rose-text); font-size: 13px; font-weight: 800; }
.wm-guess-banner {
    flex: 0 0 auto;
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 2px solid var(--wm-rose);
    border-radius: 18px;
    text-align: center;
    animation: wm-row-in 320ms ease-out both;
}
.wm-guess-banner[hidden] { display: none; }
.wm-guess-banner span { color: var(--wm-rose-text); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wm-guess-banner strong { font-size: clamp(18px, 5.2vw, 22px); line-height: 1.2; }
.wm-leaderboard { flex: 0 0 auto; margin-top: 16px; }
.wm-leaderboard[hidden] { display: none; }
.wm-leaderboard h2 { margin: 0 0 8px; color: var(--wm-rose-text); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wm-leaderboard ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wm-leader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 12px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--wm-surface);
}
.wm-leader-row.current { border-color: rgba(228, 227, 229, .22); }
.wm-leader-row.leading { border-color: var(--wm-rose); }
.wm-leader-row .wm-leader-avatar { width: 32px; height: 32px; font-size: 12px; }
.wm-leader-rank { min-width: 18px; color: var(--text-secondary); font-size: 14px; font-weight: 800; text-align: center; }
.wm-leader-row strong { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.wm-leader-plus {
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--wm-crimson);
    font-size: 12px;
    font-weight: 800;
    animation: wm-row-in 320ms ease-out both;
}
.wm-leader-score { min-width: 24px; font-size: 18px; font-weight: 800; text-align: right; }
.wm-tally-votes { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.wm-tally-count { color: var(--text-secondary); font-size: 13px; font-weight: 700; white-space: nowrap; }
.wm-tally-row.lost .wm-tally-count { color: #fff; }
.wm-tally-voters { display: flex; }
.wm-tally-row.lost .wm-voter-avatar { border-color: var(--wm-crimson); }
.wm-tally-empty { padding: 16px; color: var(--text-secondary); text-align: center; }

.next-round-track {
    flex: 0 0 auto;
    height: 4px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(228, 227, 229, .12);
}
.next-round-track span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    background: var(--wm-rose);
}

/* ---- Punishment ---- */
.punishment-phase-screen { overflow-y: auto; }
.punishment-phase-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}
.punishment-phase-kicker { margin: 0 0 12px; color: var(--wm-rose-text); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.punishment-phase-content h1 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.15; }
.punishment-phase-copy { max-width: 340px; margin: 12px auto 20px; color: var(--text-secondary); font-size: 15px; line-height: 1.45; }
.punishment-phase-list { display: grid; gap: 8px; }
.punishment-task-card {
    padding: 18px;
    border: 2px solid transparent;
    border-radius: 22px;
    background: var(--wm-surface);
    text-align: left;
}
.punishment-task-card.current { border-color: var(--wm-rose); }
.punishment-task-card strong { display: block; margin-bottom: 8px; color: var(--wm-rose-text); font-size: 13px; font-weight: 800; }
.punishment-task-card p { margin: 0; font-size: clamp(18px, 5.4vw, 22px); font-weight: 800; line-height: 1.25; }
.punishment-phase-status { margin: 16px 0 8px; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.punishment-complete-button {
    min-height: 56px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: var(--wm-crimson);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.punishment-complete-button:disabled { color: var(--text-secondary); background: #3a3a3e; cursor: default; }
.punishment-waiting {
    min-height: 56px;
    margin: 0;
    padding: 16px;
    border-radius: 16px;
    color: var(--text-secondary);
    background: var(--wm-surface);
    font-size: 15px;
}
.punishment-timebar { height: 4px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: rgba(228, 227, 229, .12); }
.punishment-timebar span { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--wm-rose); }
.punishment-time-label { margin: 8px 0 0; color: var(--text-secondary); font-size: 13px; }

/* ---- Ended + reconnect ---- */
.multiplayer-center {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}
.multiplayer-center h1 { margin: 16px 0 12px; font-size: 28px; font-weight: 800; }
.multiplayer-center p { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.ended-icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 28px;
    color: #fff;
    background: var(--wm-crimson);
}
.ended-icon svg { width: 42px; height: 42px; }
#multiplayer-ended-screen .btn-play { width: 100%; margin-top: 24px; }
/* Connection overlay: base in ../connection-overlay.css */
.connection-overlay {
    --rp-connection-z: 500;
    --rp-connection-gap: 14px;
    --rp-connection-color: var(--text-secondary);
    --rp-connection-bg: rgba(23, 23, 25, .94);
}

.wm-vote-option:focus-visible,
.multiplayer-icon-button:focus-visible,
.punishment-complete-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 299px) {
    .wm-vote-grid { grid-template-columns: 1fr; }
}
@media (max-height: 640px) {
    .wm-question-card { padding: 16px 16px 18px; }
    .wm-question-text { font-size: 22px; }
    .wm-vote-hint { margin: 10px 0 8px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 620px) {
    #multiplayer-game-screen.active {
        display: grid;
        grid-template-columns: minmax(240px, .9fr) minmax(300px, 1.1fr);
        grid-template-rows: auto auto auto 1fr;
        gap: 0 16px;
        max-width: 860px;
    }
    #multiplayer-game-screen .multiplayer-topbar { grid-column: 1 / -1; margin-bottom: 0; }
    #multiplayer-game-screen .multiplayer-topline { grid-column: 1; }
    #multiplayer-game-screen .wm-question-card { grid-column: 1; grid-row: 3 / 5; align-self: start; }
    #multiplayer-game-screen .wm-vote-hint { grid-column: 2; grid-row: 2; margin: 0 0 8px; }
    #multiplayer-game-screen .wm-vote-grid { grid-column: 2; grid-row: 3 / 5; align-content: start; overflow-y: auto; }
    #multiplayer-reveal-screen.active { max-width: 860px; }
}
@media (prefers-reduced-motion: reduce) {
    .wm-tally-row,
    .wm-heart.breaking { animation: none; }
    .wm-tally-bar,
    .wm-vote-option { transition: none; }
}

/* Like / dislike centred at the question card's bottom edge and «Сообщить об ошибке» in its
   bottom-right corner (the top-right holds the decorative «?»), shown once this phone voted
   (shared content-report.css; --rp-report-* tokens come from wm-theme.css). */
.wm-question-card:has(.wm-online-card-vote:not([hidden])) { padding-bottom: 56px; }
.wm-online-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.wm-online-card-vote[hidden],
.wm-online-report-flag[hidden] { display: none; }
.wm-online-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.wm-online-card-vote .rp-card-vote__btn,
.wm-online-report-flag { color: rgba(228, 227, 229, .6); }
.wm-online-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wm-crimson); }
/* Like / dislike / «Сообщить об ошибке» inside each punishment card: thumbs centred at the bottom,
   the flag in the bottom-right corner (game-feedback.ts addCardFeedback). */
.punishment-task-card { position: relative; padding-bottom: 56px; }
.punishment-card-vote { position: absolute; left: 50%; bottom: 4px; z-index: 2; margin: 0; transform: translateX(-50%); }
.punishment-report-flag { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.punishment-card-vote .rp-card-vote__btn,
.punishment-report-flag { color: rgba(228, 227, 229, .6); }
.punishment-card-vote .rp-card-vote__btn[aria-pressed="true"] { color: var(--wm-crimson); }

/* «Кто из нас» online: results after the last round (the ended screen under the shared game end). */
.wm-final-board { list-style: none; margin: 8px 0 20px; padding: 0; width: 100%; max-width: 360px; display: grid; gap: 8px; }
.wm-final-board[hidden] { display: none; }
.wm-final-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--wm-surface, rgba(255, 255, 255, 0.08)); text-align: left; }
.wm-final-row.leading { box-shadow: inset 0 0 0 2px var(--wm-rose-text, currentColor); }
.wm-final-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wm-final-row strong { font-size: 18px; }
#multiplayer-replay-button { margin-bottom: 12px; }