/* Custom Dark Theme Variables */
:root {
    --dark-bg: #121212;
    --dark-card: #1e1e1e;
    --dark-card-header: #252525;
    --dark-border: #333;
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0; /* Color para Cruz */
    --text-light: #f8f9fa;
    --text-muted: #adb5bd;
}

/* Apply base styles */
body {
    background-color: var(--dark-bg) !important;
    color: var(--text-light) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Estilos específicos de Cara o Cruz --- */

#coinArea {
    perspective: 1000px; /* Necesario para la rotación 3D */
    min-height: 180px; /* Altura mínima para el área de la moneda y texto */
}

#coin {
    width: 160px; /* Tamaño del icono fa-10x */
    height: 160px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-out;
    cursor: pointer; /* Indicar que se puede clickear (aunque el botón es lo principal) */
    color: var(--text-muted); /* Color inicial */
}

#coin.flipping {
    transform: rotateY(1800deg); /* Múltiples giros */
}

#coin.heads i {
    color: var(--warning-color); /* Color Cara */
}

#coin.tails i {
     color: var(--info-color); /* Color Cruz */
}

#resultText {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stat-box {
    background-color: var(--dark-card);
}

.stat-box h5 {
    margin-bottom: 0.5rem;
}

/* Botón de sonido */
#soundToggleBtn i.fa-volume-mute {
    color: var(--danger-color);
}