body {
    background: #d4c4a8;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    overflow: hidden;
    color: #3e2f26;
}


/* Definición de la clase específica */
.cutive-mono-regular {
    font-family: "Cutive Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

/* Aplicación general al juego para que se vea profesional */
body,
#text-stream,
.char {
    font-family: "Cutive Mono", monospace !important;
}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#ui {
    position: absolute;
    top: 20px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    z-index: 50;
}

#machine-view {
    position: relative;
    width: 100%;
    height: 180px;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    border-top: 4px solid #5a4637;
    border-bottom: 4px solid #5a4637;
    overflow: hidden;
}

#target-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 110px;
    border: 4px solid #a52a2a;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

#text-stream {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.char {
    min-width: 80px;
    font-size: 4.5rem;
    text-align: center;
    color: rgba(62, 47, 38, 0.1);
    text-transform: uppercase;
    opacity: 1;
}

.char.active {
    color: #000000;
    /* font-weight: bold; */
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-weight: 550;
}

.char.next {
    color: rgba(62, 47, 38, 0.6);
    /* Mucho más opaca que las lejanas (0.1) pero menos que la activa */
    font-weight: 500;
    opacity: 0.9;
}

.char.hit {
    color: #5a4637;
    opacity: 1;
}

/* Modales y Menús */
.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fdfaf3;
    padding: 30px;
    border: 3px solid #5a4637;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 200;
    width: 420px;
}

.hidden {
    display: none !important;
}

/* TABLERO DE SCORE CORREGIDO */
#scores-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    width: 100%;
}

#scores-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #999;
    padding: 12px 15px;
    /* Aumentamos el padding vertical y añadimos lateral */
    font-family: "Cutive Mono", monospace;
    font-size: 1.2rem;
    /* Un poco más grande para mejor lectura */
    width: 100%;
    box-sizing: border-box;
    /* Asegura que el padding no rompa el ancho */
}

.name-tag {
    text-align: left;
    font-weight: bold;
    flex-grow: 1;
    /* Permite que el nombre ocupe el espacio sobrante */
}

.score-tag {
    text-align: right;
    color: #34495e;
    margin-left: 20px;
    /* Garantiza un espacio mínimo entre nombre y puntos */
    min-width: 80px;
    /* Mantiene los números alineados a la derecha */
}

#player-name {
    width: 80%;
    padding: 10px;
    margin: 15px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    border: 2px solid #5a4637;
    text-align: center;
}

/* Animaciones */
.bonus-float {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    color: #d4af37;
    font-size: 2.5rem;
    font-weight: bold;
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
}

@keyframes floatUp {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -120px);
        opacity: 0;
    }
}

.score-gain {
    color: #000000 !important;
    animation: bounce 0.3s;
}

.score-loss {
    color: #e74c3c !important;
    animation: shakeAnim 0.3s;
}

.high-combo #combo {
    color: #e67e22;
    text-shadow: 0 0 10px #f39c12;
    animation: bounce 0.5s infinite alternate;
}

/* Cuando queda poco tiempo, brilla y se agranda */
.time-critical #timer {
    color: rgba(165, 42, 42, 0.8);
    /* Rojo intenso */
    animation: alertFlash 0.2s infinite alternate ease-in-out;
}

#timer {
    font-size: 6rem;
    color: rgba(62, 47, 38, 0.2);
    font-weight: 900;
    margin: 0;
}


@keyframes alertFlash {
    0% {
        transform: translateX(0%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translateX(0%) scale(1.05);
        opacity: 1;
        text-shadow: 0 0 20px rgba(165, 42, 42, 0.4);
    }
}

/* OPCIONAL: Parpadeo sutil del fondo para mayor tensión */
.time-critical body {
    animation: backgroundWarning 1.2s infinite alternate;
}

@keyframes backgroundWarning {
    from {
        background: #d4c4a8;
    }

    to {
        background: #d4b4a8;
    }

    /* Un tono ligeramente más rojizo */
}


@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes shakeAnim {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

.shake {
    animation: shakeAnim 0.2s;
}

button {
    background: #5a4637;
    color: white;
    border: none;
    padding: 12px 24px;
    font-family: 'Courier New';
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1rem;
}

button:hover {
    background: #3e2f26;
}


.hammer-hit {
    animation: hammerImpact 0.1s ease-out;
}

@keyframes hammerImpact {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}


#ui-container {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 60px;
    /* Espacio para que el cronómetro respire */
    z-index: 100;
    pointer-events: none;
    width: 90vw;
    justify-content: center;
    border-bottom: 2px solid rgba(62, 47, 38, 0.5);
    ;
}


#score,
#combo {
    font-size: 2rem;
    color: rgba(62, 47, 38, 0.5);
    min-width: 250px;
    text-transform: uppercase;
}

#score {
    text-align: right;
}

#combo {
    text-align: left;
}

.combo-stage-1 {
    color: #8e44ad !important;
    transform: scale(1.1);
}

.combo-stage-2 {
    color: #2d2bc0 !important;
    transform: scale(1.3);
}

.combo-stage-3 {
    color: #000000 !important;
    transform: scale(1.5);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}


/* Tinta "Explosiva" Pesada */
/* --- EXPLOSIÓN DE TINTA CORREGIDA --- */
.ink-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2c3e50;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    /* Usamos las variables que envía el JS */
    animation: explodeAnim 0.8s ease-out forwards;
}

@keyframes explodeAnim {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--vx), var(--vy)) scale(0);
        opacity: 0;
    }
}

/* Bono de Frase Vistoso */
.bonus-phrase {
    position: absolute;
    color: #d4af37 !important;
    font-size: 4rem !important;
    text-shadow: 2px 2px 0px #000;
    z-index: 2000;
    animation: bonusImpact 1s ease-out forwards;
}

@keyframes bonusImpact {
    0% {
        transform: scale(0) translateY(0);
        opacity: 0;
    }

    20% {
        transform: scale(1.2) translateY(-20px);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(-100px);
        opacity: 0;
    }
}

/* Puntos normales (+1, +2...) */
.score-gain {
    position: absolute;
    color: #000000;
    /* Verde */
    font-weight: bold;
    font-size: 1.8rem;
    z-index: 2000;
    pointer-events: none;
    animation: floatUpAnim 0.8s ease-out forwards;
}

/* Pop-up de porcentaje */
.percent-popup {
    position: absolute;
    color: #2980b9;
    /* Azul */
    font-size: 3.5rem;
    font-weight: 900;
    z-index: 3000;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    animation: bonusImpact 1.2s ease-out forwards;
}

@keyframes floatUpAnim {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

@keyframes bonusImpact {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    20% {
        transform: scale(1.3);
        opacity: 1;
    }

    100% {
        transform: scale(1) translateY(-100px);
        opacity: 0;
    }
}

.score-loss {
    position: absolute;
    color: #e74c3c;
    /* Rojo */
    font-weight: bold;
    font-size: 2rem;
    z-index: 2000;
    animation: floatUpAnim 0.8s ease-out forwards;
}

/* Animación de Regreso del Carro (1 segundo) */
.carriage-return-anim {
    animation: carriageMove 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes carriageMove {
    0% {
        transform: translateX(var(--start-pos));
    }

    20% {
        transform: translateX(calc(var(--start-pos) - 30px));
    }

    /* Preparación/Tirón */
    85% {
        transform: translateX(var(--end-pos));
    }

    /* Llegada con fuerza */
    100% {
        transform: translateX(var(--end-pos));
    }

    /* Reposo final */
}



/* Indicador flotante de tiempo ganado */
.time-bonus-popup {
    position: absolute;
    color: #025406;
    /* Mismo verde que los puntos */
    font-size: 3rem;
    font-weight: 900;
    z-index: 3000;
    pointer-events: none;
    transform: translateX(-50%);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    animation: timeFloatUp 1s ease-out forwards;
}

@keyframes timeFloatUp {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -20px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -100px) scale(1);
        opacity: 0;
    }
}


#game-over-screen {
    /* ... tus otros estilos ... */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Esto lo mantiene centrado en pantalla */
    width: 500px;
    height: 0;
    /* Empieza en 0 para la animación */
    max-height: 80vh;
    /* Evita que la hoja se salga de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: hidden;
    /* Oculta el sobrante mientras se imprime */
    padding: 0 40px;
    background-color: #f0f0f0;
    z-index: 1000;
}



#start-menu #view-ranking-btn {
    display: block;
    margin: 20px auto;
    background: #5a4637;
    color: #d4c4a8;
    border: 2px solid #3e2f26;
    padding: 10px 20px;
    font-family: "Cutive Mono", monospace;
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 3px 3px 0px #3e2f26;
    transition: all 0.2s ease;
}

#start-menu #view-ranking-btn:hover {
    background: #3e2f26;
    transform: scale(1.05);
}