/* Сетка тем */
.tema-selection-section {
    margin: 20px 0;
    text-align: center;
}

.tema-label {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #008f39;
}

.tema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    max-width: 800px;
    margin: 0 auto 25px;
}

.tema-card {
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tema-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.tema-card.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.tema-icon {
    font-size: 24px;
}

.tema-text {
    font-size: 14px;
    font-weight: 500;
}

/* Состояние кнопки старта */
.btn_start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Доска транскрипции */
#transcript-board {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}

#transcript-text {
    color: #eee;
    text-align: center;
    margin: 0;
    font-size: 0.95rem;
}

/* Новый стиль "космической" карточки */
/* 1. Основное тело карточки - ГАРАНТИЯ ТЕМНОГО ЦВЕТА */
#card.card-gemini-live {
    position: relative !important;
    overflow: hidden !important;
    background: #0f172a !important; /* Глубокий темный */
    background-image: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
    border: 2px solid rgba(42, 245, 152, 0.15) !important; /* Тонкая неоновая граница */
    border-radius: 28px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    color: #f8fafc !important;
    z-index: 1;
    transition: all 0.5s ease-in-out !important;
}

/* 2. Живое вращающееся пятно света внутри */
#card.card-gemini-live::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(42, 245, 152, 0.08) 0%, transparent 60%) !important;
    animation: move-light 10s infinite linear !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 3. Оверлей паузы - Матовое стекло */
#card.card-gemini-live #pause-overlay {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    border-radius: 28px !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none; /* Управляется через JS */
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-weight: bold;
    z-index: 10 !important;
    animation: fadeInScale 0.3s ease-out;
}

/* 4. Полоски звука (Waves) */
#card.card-gemini-live .wave {
    background: linear-gradient(to top, #2af598, #00ffcc) !important;
    box-shadow: 0 0 15px rgba(42, 245, 152, 0.5) !important;
    width: 10px !important;
    border-radius: 5px !important;
    margin: 0 5px !important;
    height: 20px;
}

/* 5. Анимации */
@keyframes move-light {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Сброс внутренних желтых фонов */
#card.card-gemini-live .card-inner, 
#card.card-gemini-live .card-front {
    background: transparent !important;
    border: none !important;
}