/* ============================================================
   victory.css — Momento Final Cinematográfico
   Growth City Serious Game
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   OVERLAY PRINCIPAL
══════════════════════════════════════════════════════════ */
#victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #050812;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}
#victory-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   FASES — sistema de transición
══════════════════════════════════════════════════════════ */
.vphase {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.vphase.vph-active {
    opacity: 1;
    pointer-events: all;
}

/* Etiqueta de fase */
.vph-label {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 18px;
    text-align: center;
}

/* Botón skip / navegar */
.vcin-skip {
    position: absolute;
    bottom: 18px;
    right: 20px;
    background: none;
    border: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.2);
    cursor: pointer;
    transition: color .2s;
}
.vcin-skip:hover { color: rgba(255,255,255,.5); }

.vnav-next {
    position: fixed;
    bottom: 18px;
    right: 20px;
    z-index: 1010;
    background: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.35);
    padding: 5px 13px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.vnav-next:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* ══════════════════════════════════════════════════════════
   ACTO 1 — INTRO CINEMATOGRÁFICA
══════════════════════════════════════════════════════════ */
#vcin-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 380px;
}
.vcin-line {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .2px;
    color: transparent;
    text-align: center;
    transform: translateY(8px);
    transition: color .7s ease, transform .7s ease;
}
.vcin-line.vcin-show { color: rgba(255,255,255,.52); transform: translateY(0); }
.vcin-line.vcin-hero  { font-size: 21px; font-weight: 500; }
.vcin-line.vcin-hero.vcin-show  { color: #ffffff; }
.vcin-line.vcin-accent.vcin-show { color: #74c8ff; }

/* ══════════════════════════════════════════════════════════
   ACTO 2 — CADENA DE DECISIONES
══════════════════════════════════════════════════════════ */
#vchain-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 420px;
}
.vchain-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    opacity: 0;
    transform: translateX(-12px);
    transition:
        opacity   .32s ease,
        transform .32s ease,
        background .22s,
        border-color .22s;
}
.vchain-node.vchain-in  { opacity: 1; transform: translateX(0); }
.vchain-node.vchain-lit {
    background: rgba(255,255,255,.04);
    border-left-color: var(--nc);
}
.vcn-emoji    { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.vcn-decision {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,.38);
    flex: 1;
    transition: color .25s;
}
.vchain-node.vchain-lit .vcn-decision { color: rgba(255,255,255,.78); }
.vcn-check {
    font-size: 11px;
    color: var(--nc);
    opacity: 0;
    transition: opacity .25s .1s;
}
.vchain-node.vchain-lit .vcn-check { opacity: 1; }

.vchain-arrow {
    font-size: 10px;
    color: rgba(255,255,255,.12);
    padding-left: 26px;
    margin: -2px 0;
    opacity: 0;
    transition: opacity .25s;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.vchain-arrow.vchain-arrow-in { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   ACTO 3 — ANTES / DESPUÉS
══════════════════════════════════════════════════════════ */
#vba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin-top: 4px;
}
.vba-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.vba-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin-bottom: 5px;
}
.vba-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vba-before {
    font-size: 14px;
    color: rgba(248,113,113,.7);
    font-weight: 500;
    text-decoration: line-through;
}
.vba-arrow-icon { font-size: 11px; color: rgba(255,255,255,.18); }
.vba-after {
    font-size: 20px;
    font-weight: 600;
    color: #4ade80;
    transition: color .3s;
}
.vba-after.vba-counting { color: rgba(255,255,255,.25); }
.vba-desc {
    font-size: 10px;
    color: rgba(255,255,255,.25);
    margin-top: 4px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   ACTO 4 — CEREMONIA DEL RANGO
══════════════════════════════════════════════════════════ */
#vrank-badge {
    text-align: center;
    opacity: 0;
    transform: translateY(-32px) scale(.68);
    transition:
        opacity   .6s cubic-bezier(.34,1.56,.64,1),
        transform .6s cubic-bezier(.34,1.56,.64,1);
    font-family: 'Segoe UI', Arial, sans-serif;
}
#vrank-badge.vrank-drop {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#vrank-icon  { font-size: 58px; line-height: 1; margin-bottom: 8px; }
#vrank-name  { font-size: 28px; font-weight: 600; margin-bottom: 6px; }
#vrank-desc  {
    font-size: 13px;
    color: rgba(255,255,255,.4);
    max-width: 320px;
    margin: 0 auto 14px;
    line-height: 1.65;
}
#vrank-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
    color: rgba(255,255,255,.5);
}
#vrank-score strong { color: #ffd93d; font-weight: 600; }

/* Onda expansiva */
@keyframes vrank-ring-expand {
    0%   { opacity: .55; transform: translate(-50%,-50%) scale(.5); }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.2); }
}
.vrank-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 1px solid var(--rank-color, #ffd93d);
    pointer-events: none;
    animation: vrank-ring-expand .75s ease forwards;
}

/* ══════════════════════════════════════════════════════════
   ACTO 5 — TABLERO FINAL
   (reutiliza los estilos del victory.css original,
    con el contenedor como scrollable)
══════════════════════════════════════════════════════════ */
#vph-5 {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 48px;
}

#victory-container {
    max-width: 580px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease .1s, transform .5s cubic-bezier(.22,1,.36,1) .1s;
}
#victory-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header */
#victory-header { text-align: center; }
#victory-trophy {
    font-size: 58px;
    line-height: 1;
    animation: vtrophy .9s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes vtrophy {
    from { transform: scale(.3) rotate(-15deg); opacity: 0; }
    to   { transform: scale(1)  rotate(0deg);   opacity: 1; }
}
#victory-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffd93d;
    margin: 10px 0 5px;
    text-shadow: 0 0 24px rgba(255,217,61,.3);
}
#victory-subtitle {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.38);
    line-height: 1.5;
}

/* Stats */
#victory-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    width: 100%;
}
.vstat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.vstat-icon  { font-size: 18px; margin-bottom: 3px; }
.vstat-value { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
.vstat-label {
    font-size: 9px;
    color: rgba(255,255,255,.28);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-top: 2px;
}

/* Rango */
#victory-rank {
    background: rgba(255,215,0,.05);
    border: 1px solid rgba(255,215,0,.15);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    width: 100%;
}
#victory-rank-emoji { font-size: 30px; margin-bottom: 5px; }
#victory-rank-name  { font-size: 18px; font-weight: 700; margin: 3px 0; letter-spacing: -.2px; }
#victory-rank-desc  {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    line-height: 1.65;
    max-width: 440px;
    margin: 0 auto;
}

/* Cadena (tablero final — versión compacta) */
#victory-chain-section {
    width: 100%;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 14px 14px;
}
#victory-chain-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}
/* En el tablero final la cadena es horizontal resumida */
#victory-chain {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* reutiliza .vchain-node y .vchain-arrow definidos arriba */

/* Grid de artefactos */
#victory-artifacts-section { width: 100%; }
#victory-artifacts-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
}
#victory-artifacts-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px;
}
.vart-card {
    background: color-mix(in srgb, var(--ac) 6%, rgba(255,255,255,.03));
    border: 1px solid color-mix(in srgb, var(--ac) 18%, rgba(255,255,255,.06));
    border-radius: 9px;
    padding: 10px 6px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    animation: vart-in .4s ease both;
}
@keyframes vart-in {
    from { opacity: 0; transform: scale(.82) translateY(7px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.vart-emoji    { font-size: 20px; margin-bottom: 4px; }
.vart-name     {
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in srgb, var(--ac) 82%, #fff);
    line-height: 1.3;
    margin-bottom: 3px;
}
.vart-decision {
    font-size: 9px;
    color: rgba(255,255,255,.26);
    line-height: 1.35;
}

/* Reflexión */
#victory-reflection {
    width: 100%;
    background: rgba(74,222,128,.04);
    border: 1px solid rgba(74,222,128,.15);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: 'Segoe UI', Arial, sans-serif;
}
#victory-reflection-title {
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
#victory-reflection-text {
    font-size: 12px;
    color: rgba(255,255,255,.52);
    line-height: 1.78;
}

/* Acciones */
#victory-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.vbtn {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 9px;
    padding: 11px 22px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: transform .12s, filter .12s;
    min-height: 42px;
}
.vbtn:hover  { filter: brightness(1.14); }
.vbtn:active { transform: scale(.95); }
.vbtn-primary   { background: linear-gradient(135deg,#0e4a2a,#00cc66); color:#fff; }
.vbtn-secondary { background: rgba(255,255,255,.07); color:rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.13); }
.vbtn-ghost     { background: transparent; color:rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.08); }
.vbtn-ghost:hover { color:rgba(255,255,255,.55); filter:none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
    #victory-title           { font-size: 20px; }
    #victory-stats           { grid-template-columns: repeat(2,1fr); }
    #victory-artifacts-grid  { grid-template-columns: repeat(2,1fr); }
    .vstat-value             { font-size: 18px; }
    #vrank-icon              { font-size: 46px; }
    #vrank-name              { font-size: 22px; }
    .vcin-line               { font-size: 13px; }
    .vcin-line.vcin-hero     { font-size: 17px; }
    .vba-after               { font-size: 17px; }
    .vbtn                    { padding: 10px 16px; font-size: 12px; }
}
@media (max-width: 380px) {
    #victory-artifacts-grid  { grid-template-columns: repeat(2,1fr); }
    .vart-decision           { display: none; }
}