:root {
    --bg: #020617;
    --panel: #1e293b;
    --green: #22c55e;
    --blue: #3b82f6;
    --gold: #fbbf24;
    --text: #f8fafc;
    --danger: #ef4444;
}

/* CURSOR FINO 2px */
* {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><line x1="12" y1="0" x2="12" y2="24" stroke="%23ffffff" stroke-width="2"/><line x1="0" y1="12" x2="24" y2="12" stroke="%23ffffff" stroke-width="2"/></svg>') 12 12, crosshair !important;
}

body {
    margin: 0; padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex; height: 100vh; overflow: hidden;
    box-sizing: border-box;
}

/* PARPADEO TIMER */
@keyframes blink-red {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}
.blink-active { animation: blink-red 0.5s infinite; }

/* ELIMINAR HOVERS SVG */
svg path, svg g, svg use, svg image { transition: none !important; pointer-events: auto; }
svg *:hover { fill-opacity: 1 !important; filter: none !important; }

/* UI PANEL DERECHO (ORIGINAL) */
.ui-panel-right {
    position: fixed; right: 60px; top: 10%; height: 80%; width: 240px;
    background: var(--panel); border-radius: 30px;
    display: flex; flex-direction: column; padding: 30px 20px; box-sizing: border-box; gap: 20px;
    text-align: center; box-shadow: -5px 10px 30px rgba(0,0,0,0.5); z-index: 100;
}

.value { font-size: 42px; font-weight: 900; color: var(--blue); display: block; margin-top: 5px; }

/* PANTALLA FINAL (ORIGINAL) */
.final-screen {
    background: #020617 !important;
    min-width: 450px; padding: 40px !important;
    border: 2px solid var(--blue) !important;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.results-secondary { display: flex; justify-content: center; gap: 40px; width: 100%; opacity: 0.8; }
.res-item { display: flex; flex-direction: column; align-items: center; }
.res-label { font-size: 11px; letter-spacing: 2px; color: #64748b; font-weight: bold; margin-bottom: 5px; }
.res-small-value { font-size: 22px; font-weight: 700; color: #cbd5e1; }

.bonus-section { text-align: center; padding: 15px; background: rgba(34, 197, 94, 0.05); border-radius: 20px; width: 100%; }
.bonus-amount { font-size: 38px; font-weight: 900; color: var(--green); }

.total-section { text-align: center; margin: 10px 0; }
.total-label { font-size: 13px; letter-spacing: 4px; color: var(--blue); font-weight: 900; }
.total-grand-value { font-size: 80px; font-weight: 950; color: var(--text); line-height: 1; margin-top: 5px; }

.btn-play-again {
    background: var(--danger);
    color: white; border: none; padding: 15px 40px;
    border-radius: 15px; font-size: 18px; font-weight: 900; cursor: pointer;
}

/* TIMER WRAPPER */
#timer-wrapper { position: fixed; left: 80px; top: 15%; height: 65%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#timer-text { font-size: 22px; font-weight: 900; color: white; }
.timer-container { width: 12px; height: 100%; background: #0f172a; border-radius: 10px; overflow: hidden; position: relative; }
#timer-bar { width: 100%; height: 100%; background: var(--green); position: absolute; bottom: 0; transition: height 0.3s ease; }

/* GENERALES */
.game-viewport { flex: 1; display: flex; justify-content: center; align-items: center; margin-left: 100px; margin-right: 320px; }
#svg-container svg { max-height: 94vh; width: auto; pointer-events: none; }
svg *[id] { pointer-events: auto; }
.modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.97); z-index: 3000; justify-content: center; align-items: center; }
.btn-reset { background: var(--danger); color: white; border: none; padding: 15px; border-radius: 12px; font-weight: bold; cursor: pointer; }
.progress-value { font-size: 24px; font-weight: 900; color: var(--green); }
.target-name-wrapper { min-height: 80px; display: flex; align-items: center; justify-content: center; }
.target-name { font-size: 22px; font-weight: 900; color: var(--gold); text-transform: uppercase; line-height: 1.2; text-align: center; }
#menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); z-index: 5000; display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* --- AÑADIDOS PARA SEO (NO ROMPEN EL JUEGO) --- */
body {
    overflow-y: auto; /* Cambiamos hidden por auto para permitir scroll hacia el texto informativo */
}

.seo-content-section {
    background-color: #0f172a;
    padding: 60px 20px;
    margin-top: 100vh; /* Empuja el texto debajo de la pantalla del juego */
    display: flex;
    justify-content: center;
}

.seo-container {
    max-width: 800px;
    line-height: 1.6;
    color: #cbd5e1;
}

.seo-container h2 { color: var(--blue); font-size: 32px; }
.seo-container h3 { color: var(--green); font-size: 24px; margin-top: 25px; }
.seo-container p { margin-bottom: 15px; font-size: 18px; }
.seo-container ul { margin-left: 20px; margin-bottom: 15px; }
.seo-container li { margin-bottom: 8px; color: var(--gold); }