/* =============================================================================
   СТРАНИЦА СОБЫТИЙ (РОЗЫГРЫШЕЙ) + EVENT MODE НА PLAY PAGE
   =============================================================================
   Использует дизайн-токены из tokens.css
   ============================================================================= */

/* ── Events Page — Tabs + Empty States ─────────────────────────── */

/* 2-column tab slider override (profile-tabs defaults to 3 columns) */
.spa-events .profile-tabs:before {
    width: calc(50% - 4px);
}
.spa-events .profile-tabs.completed-selected:before {
    transform: translateX(calc(100% + 2px));
}

/* Empty state placeholder */
.events-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) var(--space-5);
    min-height: 300px;
}

.events-empty-icon {
    font-size: 56px;
    margin-bottom: var(--space-4);
    opacity: 0.9;
}

.events-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    max-width: 280px;
    line-height: 1.4;
}

.events-empty-hint {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: 260px;
    line-height: 1.5;
}

/* ── Event Mode — Play Page ────────────────────────────────────── */

/* Event bet button in slider */
.event-bet-option {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(135deg, #FF6B9D, #C084FC, #7C3AED) border-box !important;
    border: 1.5px solid transparent !important;
}

.event-bet-option.selected {
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(135deg, #FF6B9D, #C084FC, #7C3AED) border-box !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.3);
}

.event-bet-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* Event controls: timer + boost toggle */
.event-controls {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    align-items: stretch;
}

.event-timer,
.boost-mode {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-m);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(to bottom left, var(--border-gradient-start), var(--border-gradient-end)) border-box;
    box-shadow: var(--shadow-sm);
}

.event-timer-label {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--weight-medium);
}

.event-timer-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.boost-mode {
    cursor: pointer;
    transition: background-color var(--transition-fast);
    pointer-events: auto !important;
}

.boost-mode span {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.boost-mode.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* Spin row: positions spin button + flip container side by side */