:root {
    /* Tamaño y tiempo se mantienen específicos */
    --finger-size: 110px;
    --auto-select-delay: 2000ms;
    --winner-display-duration: 3000ms;
    --base-transition-speed: 0.3s;
    --disappear-transition-speed: 0.4s;

    /* Colores específicos para esta UI */
    --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: var(--red);
    --finger-color-2: var(--yellow);
    --finger-color-3: var(--blue);
    --finger-color-4: var(--green);
    --finger-color-5: var(--white);
    --finger-color-6: var(--light-blue);
    --finger-color-7: var(--violet);
    --finger-color-8: var(--orange);
    --finger-color-9: var(--pink);
    --finger-color-10: var(--maroon);
}

/* --- Área Táctil (ocupa toda la pantalla, detrás) --- */
#touch-area {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--bg-normal) 0%, var(--bg-color) 100%);
    cursor: crosshair;
    z-index: 0;
}

/* --- Overlay de Selección (Animación flash y encogimiento) --- */
#selection-overlay {
    position: fixed;
    inset: 0;
    z-index: 5; /* Por encima de todo durante la animación */
    pointer-events: none;
    opacity: 0;
    background-color: transparent;
    transition: opacity 0.2s ease-out, 
                clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    /* Inicialmente fuera de pantalla/gigante para cubrir todo */
    clip-path: circle(150% at 50% 50%);
    will-change: clip-path, opacity;
}

#selection-overlay.active {
    opacity: 1;
}

/* --- Contenedor Principal (Icono + Status) --- */
.button-container {
    max-width: 430px; /* Ancho máximo */
    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: 2.1em; /* Tamaño del emoji */
    line-height: 1;
    cursor: pointer;
}

/* --- Indicador de Estado --- */
#status {
    position: relative;
    z-index: 10; /* Encima de los dedos */
    background-color: var(--bg-normal);
    padding: 10px 20px;
    border-radius: var(--border-radius-lg); /* 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);
    will-change: background-color, transform; /* Optimización */
    flex-grow: 1; /* Ocupa espacio disponible */
}

/* 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);
}

/* --- 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;
}

/* Ajustes de color de emoji basados en data-color-index (para legibilidad) */
/* Índices corresponden a --finger-color-INDEX+1 */
.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);
}
.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);
}

/* 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 */
    }
}