/* ─── App shell ──────────────────────────────────────────── */

#rm-versus-app {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             28px;
    padding:         48px 16px 64px;
    background:      #000;
    min-height:      100vh;
    box-sizing:      border-box;
    font-family:     system-ui, -apple-system, sans-serif;
}

/* ─── Prompt ─────────────────────────────────────────────── */

.rm-vs-prompt {
    color:           #555;
    font-size:       12px;
    letter-spacing:  0.12em;
    margin:          0;
}

/* ─── Stage ──────────────────────────────────────────────── */

.rm-vs-stage {
    display:         flex;
    align-items:     center;
    gap:             24px;
    width:           100%;
    max-width:       1040px;
}

.rm-vs-sep {
    color:           #333;
    font-size:       11px;
    letter-spacing:  0.1em;
    flex-shrink:     0;
    user-select:     none;
}

/* ─── Cards ──────────────────────────────────────────────── */

.rm-vs-card {
    flex:            1;
    padding:         0;
    border:          none;
    background:      #111;
    cursor:          pointer;
 
    overflow:        hidden;
    border-radius:   2px;
    transition:      transform 0.12s ease, opacity 0.2s ease;
    position:        relative;
}

.rm-vs-card:hover {
    transform: scale( 1.012 );
}

.rm-vs-card:focus-visible {
    outline:         2px solid #fff;
    outline-offset:  4px;
}

/* ─── Images ─────────────────────────────────────────────── */

.rm-vs-img {
    display:         block;
    width:           auto;
    height:          100%;
    object-fit:      contain;
    transition:      opacity 0.2s ease;
}

/* ─── Loading state ──────────────────────────────────────── */

.is-loading .rm-vs-card {
    opacity:         0.25;
    transform:       none;
    cursor:          default;
    pointer-events:  none;
}

/* ─── Vote counter ───────────────────────────────────────── */

.rm-vs-count {
    color:           #333;
    font-size:       11px;
    margin:          0;
    min-height:      1.2em;
    letter-spacing:  0.06em;
}

/* ─── Error ──────────────────────────────────────────────── */

.rm-vs-error {
    color:           #555;
    font-size:       14px;
    margin:          0;
}

/* ─── Mobile ─────────────────────────────────────────────── */

@media ( max-width: 640px ) {
    .rm-vs-stage {
        flex-direction: column;
        gap:            16px;
    }

    .rm-vs-sep {
        display: none;
    }

    .rm-vs-card {
        width:          100%;
        max-width:      480px;
    }
}

/* ─── Reduced motion ─────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
    .rm-vs-card,
    .rm-vs-img {
        transition: none;
    }
}