/* ============================================================
   victory.css — Pantalla de victoria / resumen educativo
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
#victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: radial-gradient(ellipse at 50% 30%, #1a0f3a 0%, #06030f 70%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 32px 16px 48px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}
#victory-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ── Contenedor principal ────────────────────────────────── */
#victory-container {
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    transform: translateY(30px);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
#victory-overlay.visible #victory-container {
    transform: translateY(0);
}

/* ── Header ──────────────────────────────────────────────── */
#victory-header {
    text-align: center;
}
#victory-trophy {
    font-size: 64px;
    line-height: 1;
    animation: trophy-bounce 1s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: .3s;
}
@keyframes trophy-bounce {
    from { transform: scale(0) rotate(-15deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
#victory-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #FFD700;
    margin: 12px 0 6px;
    text-shadow: 0 0 30px rgba(255,215,0,.4);
    letter-spacing: -.5px;
}
#victory-subtitle {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    color: #9d8fd4;
    letter-spacing: .3px;
}

/* ── Estadísticas ────────────────────────────────────────── */
#victory-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}
.vstat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.vstat-icon  { font-size: 26px; margin-bottom: 6px; }
.vstat-value { font-size: 26px; font-weight: 700; color: #fff; }
.vstat-label { font-size: 15px; color: #8878b8; margin-top: 3px; letter-spacing: .5px; text-transform: uppercase; }

/* ── Rango / calificación ────────────────────────────────── */
#victory-rank {
    background: rgba(255,215,0,.07);
    border: 1px solid rgba(255,215,0,.25);
    border-radius: 14px;
    padding: 16px 28px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    width: 100%;
}
#victory-rank-emoji { font-size: 32px; }
#victory-rank-name  { font-size: 20px; font-weight: 700; color: #FFD700; margin: 4px 0 2px; }
#victory-rank-desc  { font-size: 15px; color: #b0a0d8; line-height: 1.5; }

/* ── Rueda Octalysis ─────────────────────────────────────── */
#victory-wheel-section {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 24px 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
}
#victory-wheel-title {
    font-size: 15px;
    font-weight: 600;
    color: #8878b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-align: center;
}
#victory-wheel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.vdrive {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: transform .2s, border-color .2s;
    animation: drive-in .4s ease both;
}
.vdrive:hover { transform: translateY(-3px); }
.vdrive-emoji { font-size: 17px; margin-bottom: 5px; }
.vdrive-name  { font-size: 15px; font-weight: 600; color: #d0c8f0; line-height: 1.3; }
.vdrive-id    { font-size: 15px; color: #6658a8; margin-top: 3px; }

@keyframes drive-in {
    from { opacity: 0; transform: scale(.8) translateY(10px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── Reflexión educativa ─────────────────────────────────── */
#victory-reflection {
    width: 100%;
    background: rgba(74,222,128,.05);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: 14px;
    padding: 20px 24px;
    font-family: 'Segoe UI', Arial, sans-serif;
}
#victory-reflection-title {
    font-size: 15px;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
#victory-reflection-text {
    font-size: 17px;
    color: #c0b8e8;
    line-height: 1.75;
}

/* ── Botones ─────────────────────────────────────────────── */
#victory-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.vbtn {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 13px 32px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: transform .15s, filter .15s;
}
.vbtn:hover  { filter: brightness(1.15); }
.vbtn:active { transform: scale(.96); }
.vbtn-primary   { background: linear-gradient(135deg, #4a3faa, #7b5fd4); color: #fff; }
.vbtn-secondary {
    background: transparent;
    color: #9d8fd4;
    border: 1px solid rgba(157,143,212,.35);
}

/* ── Confetti canvas ─────────────────────────────────────── */
#victory-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    #victory-title   { font-size: 24px; }
    #victory-stats   { grid-template-columns: 1fr 1fr; }
    #victory-wheel   { grid-template-columns: repeat(2, 1fr); }
    .vbtn            { padding: 12px 22px; font-size: 17px; }
}

/* ── Ajuste al design system ─────────────────────────────── */
#victory-container, #victory-title, .vstat, .vbtn { font-family: var(--font, 'Inter', sans-serif); }
#victory-title { letter-spacing: -.5px; }