/* RoomPlay shared connection overlay («Переподключение…» / «Нет соединения») for online games.
   Markup: <div class="connection-overlay" id="connection-overlay"> 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;
}