/* RETOS DIARIOS - v4.0 (Full Styles Restored) */

:root {
    --r-dark: #2c3e50;
    --r-green: #2d5a27;
    --r-light-green: #e8f5e9;
    --r-red: #c0392b;
    --r-cream: #fffcf5;
    --shadow-card: 0 15px 35px rgba(0,0,0,0.15);
}

/* === CONTENEDOR PRINCIPAL === */
#daily-buttons-container {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === TARJETAS DE MODO DE JUEGO (BOTONES) === */
.daily-btn {
    background: #fff;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex !important; /* Forzar flex para alinear items */
    align-items: center;
    justify-content: flex-start;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 3px 5px rgba(0,0,0,0.03);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: left;
}

.daily-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(45, 90, 39, 0.1);
    border-color: rgba(45, 90, 39, 0.2);
}

.daily-btn:active { transform: scale(0.98); }

/* Estados */
.status-play { border-left: 5px solid var(--r-green); }
.status-play .d-left i { color: var(--r-green); background: var(--r-light-green); }

.status-locked { background: #f9f9f9; opacity: 0.8; cursor: not-allowed; border-left: 5px solid #ccc; }
.status-locked .d-left i { color: #999; background: #eee; }

.status-won { border-left: 5px solid var(--r-green); background: #f4fff8; }
.status-won .d-left i { color: white; background: var(--r-green); }

.status-lost { border-left: 5px solid var(--r-red); background: #fff5f5; }
.status-lost .d-left i { color: white; background: var(--r-red); }

/* Layout Interno */
.d-left { margin-right: 15px; }
.d-left i {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

.d-center { flex: 1; display: flex; flex-direction: column; }
.d-title { 
    font-family: 'Crimson Pro', serif;
    font-weight: 700; 
    font-size: 1.1rem; 
    color: var(--r-dark); 
    line-height: 1.2;
    margin-bottom: 2px;
    display: block;
}
.d-sub { 
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; 
    color: #888; 
    font-weight: 500;
    display: block;
}

.d-right { 
    padding: 5px; color: #ddd; font-size: 1.2rem;
    transition: color 0.2s;
}
.d-right:hover { color: var(--r-green); }


/* === MODAL GLOBAL === */
#daily-game-modal, #modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: none;
    align-items: center; 
    justify-content: center;
    animation: fadeInOverlay 0.3s ease;
}

#daily-game-content, .modal-card {
    background: #fff;
    width: 90%; 
    max-width: 380px;
    margin: auto;
    padding: 0; 
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: visible; /* IMPORTANTE: Visible para animaciones fuera de caja si las hubiera, pero cuidado con scroll */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 
    from { transform: scale(0.9); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

/* === INTERIOR DEL JUEGO === */

.daily-header-area {
    padding: 20px 25px 10px 25px;
    background: #fdfdfd;
}

.daily-mode-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: left;
}

.daily-timer-wrapper {
    display: flex; align-items: center; gap: 10px;
}
.timer-icon { 
    color: var(--r-green); 
    font-size: 1rem; 
    animation: softPulse 2s infinite; 
}
.daily-timer-track {
    flex: 1; height: 8px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}
#d-timer-fill {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #66bb6a, var(--r-green));
    border-radius: 10px;
}

/* Pregunta */
.daily-q {
    font-family: 'Crimson Pro', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--r-dark);
    margin: 15px 25px 25px 25px;
    line-height: 1.35;
    text-align: center;
}

/* Opciones */
.daily-opts-wrapper {
    padding: 0 25px 30px 25px;
    display: flex; flex-direction: column; gap: 10px;
}

.opt-btn {
    background: #fff;
    border: 1px solid #eee;
    padding: 15px 18px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #444;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 0 rgba(0,0,0,0.03);
    position: relative;
    text-align: center; /* En daily suelen ser cortas */
}

.opt-btn:hover {
    border-color: var(--r-green);
    color: var(--r-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(45, 90, 39, 0.1);
}
.opt-btn:active { transform: scale(0.97); background: #f4fff8; }

/* Botones V/F Grandes */
.vof-grid { display: flex; gap: 12px; }
.vof-btn {
    flex: 1; padding: 20px 10px;
    font-size: 1rem; letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 800;
    color: white !important;
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
.vof-btn.true { background: #27ae60; }
.vof-btn.false { background: #c0392b; }
.vof-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* === PANTALLAS DE RESULTADO === */
.result-content { padding: 30px 25px; text-align: center; }

.result-icon-big {
    font-size: 3.5rem; margin-bottom: 15px;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
}

.result-title {
    font-family: 'Crimson Pro', serif;
    font-size: 1.8rem;
    margin: 0 0 5px 0;
    font-weight: 800;
}

.result-points {
    display: inline-block;
    font-size: 1.6rem; font-weight: 900;
    margin: 15px 0 25px 0;
    padding: 8px 20px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.result-points.plus { color: var(--r-green); border-color: #c8e6c9; background: #f1f8e9; }
.result-points.minus { color: var(--r-red); border-color: #ef9a9a; background: #ffebee; }

/* === MODALES INFO Y HUIDA === */
.info-modal-wrapper { padding: 30px 25px; text-align: center; }

.info-box {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 1px dashed #ccc;
    margin: 20px 0;
    color: #555;
    line-height: 1.5;
    font-size: 0.95rem;
}

.btn-modal-full {
    width: 100%; padding: 15px;
    border-radius: 12px; border: none;
    font-weight: 800; font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer; transition: transform 0.1s;
    background: var(--r-dark); color: white;
}
.btn-modal-full:hover { transform: translateY(-2px); }
.btn-modal-full:active { transform: scale(0.97); }
.btn-green { background: var(--r-green); }
.btn-red { background: var(--r-red); }

@keyframes softPulse { 0% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.8; transform: scale(1); } }