/* --- Variables de Estilo Específicas para Jugador Inicial --- */
:root {
    /* Tamaño y tiempo se mantienen específicos */
    --finger-size: 95px;
    --auto-select-delay: 2000ms;
    --base-transition-speed: 0.3s;
    --disappear-transition-speed: 0.4s;

    /* Colores específicos para esta UI */
    --touch-area-bg-start: var(--secondary-bg); /* Reutiliza color secundario del fondo */
    --touch-area-bg-end: var(--bg-color);    /* Reutiliza color base del fondo */
    --selected-border-color: #ffeb3b;       /* Amarillo brillante distintivo para selección */
    --status-bg-default: rgba(var(--bg-color-rgb), 0.75); /* Usa variable RGB global */
    --status-bg-selecting: rgba(40, 116, 166, 0.85); /* Azul (específico) */
    --status-bg-selected: rgba(39, 174, 96, 0.9); /* Verde (específico) */
    --back-icon-hover-color: var(--text-muted-color); /* Reutiliza color global */
    --back-icon-active-scale: 0.9;

    /* Paleta de Colores para Dedos (Leída por JS) */
    --finger-color-1: #e74c3c; /* Rojo */
    --finger-color-2: #f1c40f; /* Amarillo */
    --finger-color-3: #3498db; /* Azul */
    --finger-color-4: #2ecc71; /* Verde */
    --finger-color-5: #ecf0f1; /* Blanco */
    --finger-color-6: #1abc9c; /* Turquesa */
    --finger-color-7: #e67e22; /* Naranja */
    --finger-color-8: #fd79a8; /* Rosa */
    --finger-color-9: #a1887f; /* Marrón */
    --finger-color-10: #9b59b6; /* Amatista */
}

/* --- Estilos Globales Específicos para esta pantalla --- */
/* La clase .inicial-body en HTML usa justify-content: flex-start de style.css */
body.inicial-body {
    min-height: 100vh;
    height: 100%; /* Ocupa toda la altura */
    padding: 0;
    overflow: hidden; /* Evita barras de scroll */
    touch-action: none; /* Deshabilita acciones táctiles por defecto */
    position: relative; /* Para posicionar elementos absolutos */
    /* background-color, color, font-family heredados de style.css */
    /* user-select, -webkit-tap-highlight-color heredados de style.css */
}

/* --- Área Táctil (ocupa toda la pantalla, detrás) --- */
#touch-area {
    position: absolute;
    inset: 0; /* Equivalente a top/left/bottom/right: 0 */
    /* Gradiente sutil usando variables */
    background-image: radial-gradient(circle, var(--touch-area-bg-start) 0%, var(--touch-area-bg-end) 100%);
    cursor: crosshair;
    z-index: 0;
}

/* --- Contenedor Principal (Icono + Status) --- */
.container {
    width: 100%;
    max-width: 450px; /* Ancho máximo */
    /* Ajusta padding para dar más espacio arriba */
    padding: 25px 20px 10px 20px;
    z-index: 1; /* Encima del touch-area */
    position: relative;
    display: flex;
    align-items: center; /* Alineación vertical */
    justify-content: center; /* Centrado horizontal (dentro del max-width) */
    gap: 15px; /* Espacio entre icono y status */
    margin: 0 auto; /* Centra horizontalmente en el body */
    opacity: 0; /* Para animación de entrada */
    animation: fadeInContainer 0.6s ease-out 0.1s forwards;
}

/* --- Icono de Volver --- */
.back-icon {
    font-size: 1.8em; /* Tamaño del emoji */
    line-height: 1;
    cursor: pointer;
    color: var(--text-color); /* Hereda color de texto global */
    transition: color var(--transition-speed) ease, transform var(--transition-speed) ease; /* Usa velocidad global */
    opacity: 0;
    animation: fadeInStatus 0.6s ease-out 0.2s forwards;
    flex-shrink: 0; /* Evita que se encoja */
    /* user-select: none; ya aplicado en body */
}

.back-icon:hover,
.back-icon:focus-visible { /* Estilo unificado para hover y focus */
    color: var(--back-icon-hover-color); /* Color definido en variables */
    transform: scale(1.1);
    outline: none; /* Quitar outline por defecto en focus */
}

.back-icon:active {
    transform: scale(var(--back-icon-active-scale));
}

/* --- Indicador de Estado --- */
#status {
    position: relative;
    z-index: 10; /* Encima de los dedos */
    background-color: var(--status-bg-default);
    padding: 10px 20px;
    border-radius: var(--border-radius); /* Usa variable global */
    font-size: clamp(1.0rem, 3.5vw, 1.1rem); /* Tamaño fluido */
    font-weight: 500;
    text-align: center;
    min-width: 180px; /* Ancho mínimo flexible */
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    transition: background-color 0.4s ease, transform 0.2s ease-out;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    will-change: background-color, transform; /* Optimización */
    opacity: 0;
    animation: fadeInStatus 0.6s ease-out 0.3s forwards;
    flex-grow: 1; /* Ocupa espacio disponible */
    color: var(--text-color); /* Asegura texto claro */
}

/* Estados visuales del indicador */
#status.selecting {
    background-color: var(--status-bg-selecting);
    transform: scale(1.03);
}
#status.selected {
    background-color: var(--status-bg-selected);
    transform: scale(1.05);
}

/* Texto dentro del status (no necesita estilo extra ahora) */
/* .status-text { display: inline-block; } */ /* Eliminado, no esencial */

/* --- Puntos Táctiles (Dedos) --- */
.touch-point {
    position: absolute;
    width: var(--finger-size);
    height: var(--finger-size);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    /* Centrado eficiente */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    transition: transform var(--base-transition-speed) cubic-bezier(0.25, 0.1, 0.25, 1.0),
                border-color var(--base-transition-speed) ease,
                box-shadow var(--base-transition-speed) ease,
                opacity var(--disappear-transition-speed) ease-out,
                background-color var(--base-transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--finger-size) * 0.45); /* Emoji proporcional */
    color: rgba(0, 0, 0, 0.7); /* Color base emoji (ajustado por data-attribute) */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.35),
                inset 0px 1px 2px rgba(255, 255, 255, 0.15);
    opacity: 1;
    will-change: transform, opacity, border-color, box-shadow, left, top, background-color;
    /* background-color aplicado dinámicamente con JS */
}

/* Ajustes de color de emoji basados en data-color-index (para legibilidad) */
/* Índices corresponden a --finger-color-INDEX+1 */
/* Amarillo, Blanco, Naranja, Rosa */
.touch-point[data-color-index="1"],
.touch-point[data-color-index="4"],
.touch-point[data-color-index="6"],
.touch-point[data-color-index="7"] {
    color: rgba(0, 0, 0, 0.8);
}
/* Azul, Marrón, Amatista */
.touch-point[data-color-index="2"],
.touch-point[data-color-index="8"],
.touch-point[data-color-index="9"] {
     color: rgba(255, 255, 255, 0.85);
     text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
/* Resto (Rojo, Verde, Turquesa) usan el color base o uno similar */

/* Dedo seleccionado */
.touch-point.selected {
    border-color: var(--selected-border-color);
    border-width: 4px;
    transform: translate(-50%, -50%) scale(1.18); /* Más grande */
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.45),
                0 0 18px var(--selected-border-color), /* Resplandor */
                inset 0px 1px 2px rgba(255, 255, 255, 0.25);
    z-index: 3; /* Encima de otros dedos */
}

/* Dedos no seleccionados (perdedores) */
.touch-point.hidden-loser {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.4); /* Encoge y cae */
    pointer-events: none;
    z-index: 1;
}

/* --- Animaciones --- */
@keyframes fadeInContainer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInStatus { /* Usada por icono y status */
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsividad --- */
/* Teléfonos más pequeños */
@media (max-width: 400px) {
    .container {
         padding-top: 20px;
         gap: 10px;
    }
    .back-icon {
         font-size: 1.6em;
    }
    #status {
        /* font-size se ajusta con clamp */
        padding: 8px 15px;
        min-width: 160px; /* Reducido ligeramente */
    }
    :root {
        --finger-size: 80px; /* Dedos más pequeños */
    }
}

/* Teléfonos muy pequeños */
@media (max-width: 320px) {
    #status {
        /* font-size se ajusta con clamp */
        padding: 7px 12px;
        min-width: auto; /* Permitir que se ajuste al contenido */
        flex-grow: 0; /* Evitar que crezca demasiado */
        flex-shrink: 1; /* Permitir que encoja */
    }
    .container {
        gap: 8px;
    }
    .back-icon {
        font-size: 1.5em;
    }
     :root {
        --finger-size: 75px; /* Ajuste adicional */
    }
}