/* 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 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-finish-button:not([hidden])) { grid-template-columns: 1fr auto 1fr; }
.multiplayer-topbar:has(.nhie-finish-button:not([hidden])) .btn-back-multiplayer { justify-self: start; }
.nhie-finish-button {
    justify-self: end;
    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; }