/* assets/css/carrera_penales.css - Estilos del Minijuego Penales de Oro (1v1) */

.penales-arena-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(10, 15, 30, 0.98));
    border: 1px solid var(--carrera-gold);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(241, 196, 15, 0.15);
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.penales-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #090d16;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 8px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* ============ PENALES DE ORO · STAGE ============ */
#stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 60px rgba(0, 0, 0, .3);
    container-type: inline-size;
    cursor: crosshair;
    font-family: "Chakra Petch", sans-serif;
    color: #fff;
    background: radial-gradient(1200px 700px at 50% -10%, #16294d 0%, #0a1224 55%, #05080f 100%);
    user-select: none;
    -webkit-user-select: none;
}
#stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* --- Scoreboard --- */
#stage #sb {
    position: absolute;
    top: 2.2cqw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2.4cqw;
    padding: 1cqw 2.4cqw;
    background: linear-gradient(180deg, rgba(12, 18, 34, .88), rgba(8, 12, 24, .82));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.4cqw;
    backdrop-filter: blur(6px);
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#stage #sb .tname { font-family: "Russo One"; font-size: 1.7cqw; letter-spacing: .12em; color: #cfd8ea; }
#stage #sb .team { display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
#stage #sb .score { font-family: "Russo One"; font-size: 3.4cqw; color: #ffd54a; display: flex; gap: 1cqw; align-items: center; text-shadow: 0 2px 12px rgba(255, 213, 74, .35); }
#stage #sb .dash { color: #5b6b8f; font-size: 2.6cqw; }
#stage .dots { display: flex; gap: .55cqw; }
#stage .dot { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
#stage .dot.goal { background: #39d353; border-color: #8dffb0; box-shadow: 0 0 8px rgba(57, 211, 83, .8); }
#stage .dot.fail { background: #ff4d5e; border-color: #ff9aa5; box-shadow: 0 0 8px rgba(255, 77, 94, .7); }

#stage #tag {
    position: absolute;
    top: 10.5cqw;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Russo One";
    font-size: 1.6cqw;
    letter-spacing: .28em;
    color: #9fb4dd;
    background: rgba(8, 12, 24, .55);
    padding: .5cqw 1.8cqw;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .1);
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
    white-space: nowrap;
}
#stage #tag.on { opacity: 1; }

/* --- Banner --- */
#stage #bwrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
#stage #banner {
    font-family: "Russo One";
    font-size: 9cqw;
    letter-spacing: .04em;
    opacity: 0;
    -webkit-text-stroke: 2px rgba(0, 0, 0, .35);
    white-space: nowrap;
}
#stage #bsub { font-size: 2.1cqw; letter-spacing: .2em; color: #e8eefc; opacity: 0; text-transform: uppercase; margin-top: .6cqw; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
#stage #bwrap.show #banner { animation: penales-bpop var(--bd, 2.2s) cubic-bezier(.2, 1.4, .3, 1) forwards; }
#stage #bwrap.show #bsub { animation: penales-bpop var(--bd, 2.2s) .08s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes penales-bpop {
    0% { opacity: 0; transform: scale(.2) rotate(-6deg); }
    14% { opacity: 1; transform: scale(1.14) rotate(2deg); }
    24% { transform: scale(1) rotate(0); }
    78% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(1.05) translateY(-3cqw); }
}
#stage .b-gold { color: #ffd54a; text-shadow: 0 0 30px rgba(255, 213, 74, .7), 0 6px 0 rgba(140, 90, 0, .45); }
#stage .b-green { color: #4dff88; text-shadow: 0 0 30px rgba(77, 255, 136, .6), 0 6px 0 rgba(0, 90, 40, .5); }
#stage .b-red { color: #ff5c6c; text-shadow: 0 0 30px rgba(255, 92, 108, .6), 0 6px 0 rgba(110, 0, 20, .5); }
#stage .b-gray { color: #dfe6f5; text-shadow: 0 0 24px rgba(200, 220, 255, .5), 0 6px 0 rgba(20, 30, 50, .6); }

/* --- Hint / Power --- */
#stage #hint {
    position: absolute;
    bottom: 2cqw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.7cqw;
    letter-spacing: .08em;
    color: #dfe8fb;
    z-index: 4;
    pointer-events: none;
    background: rgba(8, 12, 24, .6);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .7cqw 2cqw;
    border-radius: 99px;
    white-space: nowrap;
    transition: opacity .3s;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
#stage #hint.off { opacity: 0; }
#stage #powwrap {
    position: absolute;
    bottom: 6.5cqw;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .7cqw;
    z-index: 4;
    pointer-events: none;
}
#stage #powwrap.on { display: flex; }
#stage .plabel { font-family: "Russo One"; font-size: 1.5cqw; letter-spacing: .35em; color: #ffd54a; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
#stage #powbar {
    position: relative;
    width: 36cqw;
    height: 1.9cqw;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(8, 12, 24, .75);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
#stage #sweet { position: absolute; top: 0; left: 72%; width: 20%; height: 100%; background: rgba(255, 255, 255, .16); border-left: 2px solid rgba(255, 255, 255, .55); border-right: 2px solid rgba(255, 255, 255, .55); }
#stage #powfill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #39d353, #ffd54a 62%, #ff5c6c); box-shadow: 0 0 14px rgba(255, 213, 74, .6); }

/* --- Overlays (menú / fin de partido) --- */
#stage .overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2cqw;
    background: radial-gradient(90% 90% at 50% 40%, rgba(8, 14, 30, .82), rgba(3, 6, 14, .94));
    backdrop-filter: blur(5px);
    text-align: center;
    padding: 4cqw;
}
#stage .hidden { display: none !important; }
#stage .ov-title { font-family: "Russo One"; font-size: 7.2cqw; color: #ffd54a; letter-spacing: .03em; text-shadow: 0 0 40px rgba(255, 213, 74, .45), 0 6px 0 rgba(140, 90, 0, .4); }
#stage .ov-sub { font-size: 2cqw; color: #aebfdd; letter-spacing: .22em; text-transform: uppercase; }

/* --- Presentación cinematográfica (menú de inicio) --- */
#stage .overlay.cin {
    background: radial-gradient(90% 90% at 50% 35%, rgba(10, 16, 34, .78), rgba(2, 5, 12, .94));
    backdrop-filter: blur(2px);
    gap: 1.3cqw;
    padding: 3cqw;
}
#stage .cinline {
    font-family: "Russo One";
    font-size: 1.6cqw;
    letter-spacing: .5em;
    color: #ffd54a;
    opacity: .92;
    text-shadow: 0 0 20px rgba(255, 213, 74, .6);
    animation: cin-fade 1.2s ease-out both;
}
#stage .overlay.cin .ov-title {
    font-size: 5cqw;
    line-height: 1.14;
    animation: cin-title 1.1s ease-out both;
}
#stage .overlay.cin .ov-sub {
    font-size: 1.5cqw;
    letter-spacing: .2em;
}
#stage .overlay.cin .bestline {
    font-size: 1.6cqw;
}
#stage .overlay.cin #playbtn {
    font-size: 2.3cqw;
    padding: 1.3cqw 5cqw;
    margin-top: .6cqw;
}
#stage .overlay.cin .rules {
    gap: 2.4cqw;
    margin-top: .4cqw;
}
#stage .overlay.cin .rule {
    width: 22cqw;
    padding: 1cqw 1.4cqw;
    font-size: 1.3cqw;
    line-height: 1.45;
}
#stage .overlay.cin .rule b {
    font-size: 1.9cqw;
    margin-bottom: .3cqw;
}
#stage .overlay.cin .ov-sub,
#stage .overlay.cin .bestline,
#stage .overlay.cin .rules,
#stage .overlay.cin #playbtn {
    animation: cin-fade 1.2s ease-out both;
}
@keyframes cin-title {
    0% { opacity: 0; letter-spacing: .4em; transform: translateY(14px); }
    100% { opacity: 1; letter-spacing: .03em; transform: translateY(0); }
}
@keyframes cin-fade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Cuenta regresiva cinematográfica --- */
#stage .overlay.cd {
    background: radial-gradient(130% 130% at 50% 45%, rgba(4, 8, 18, .6), rgba(1, 3, 8, .84));
    backdrop-filter: none;
    gap: 1cqw;
}
#stage .overlay.cd::before,
#stage .overlay.cd::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 7cqw;
    background: rgba(0, 0, 0, .92);
    pointer-events: none;
}
#stage .overlay.cd::before { top: 0; }
#stage .overlay.cd::after { bottom: 0; }
#stage #cdnum {
    font-family: "Russo One";
    font-size: 26cqw;
    line-height: 1;
    color: #ffd54a;
    text-shadow: 0 0 60px rgba(255, 213, 74, .85), 0 10px 0 rgba(120, 80, 0, .5);
    transition: font-size .1s ease;
}
#stage #cdnum.cd-pop { animation: cd-pop .95s cubic-bezier(.2, 1.4, .3, 1) both; }
#stage #cdnum.cd-go {
    font-size: 14cqw;
    animation: cd-go 1.2s cubic-bezier(.2, 1.4, .3, 1) both;
}
#stage #cdsub {
    font-family: "Russo One";
    font-size: 2.4cqw;
    letter-spacing: .32em;
    color: #dfe8fb;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
@keyframes cd-pop {
    0% { opacity: 0; transform: scale(.15) rotate(-10deg); }
    45% { opacity: 1; transform: scale(1.4) rotate(2deg); }
    75% { transform: scale(.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cd-go {
    0% { opacity: 0; transform: scale(.4); filter: brightness(3); }
    35% { opacity: 1; transform: scale(1.18); filter: brightness(1.4); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

#stage .rules { display: flex; gap: 3cqw; margin-top: 1cqw; flex-wrap: wrap; justify-content: center; }
#stage .rule { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 1.4cqw; padding: 1.6cqw 2cqw; width: 24cqw; font-size: 1.55cqw; color: #dfe8fb; line-height: 1.5; }
#stage .rule b { color: #ffd54a; display: block; font-size: 2.4cqw; margin-bottom: .5cqw; font-family: "Russo One"; }
#stage .bestline { font-family: "Russo One"; font-size: 2cqw; color: #8dffb0; letter-spacing: .15em; text-shadow: 0 0 18px rgba(57, 211, 83, .5); }
#stage .btn {
    font-family: "Russo One";
    font-size: 2.6cqw;
    letter-spacing: .12em;
    color: #201500;
    cursor: pointer;
    touch-action: manipulation;
    background: linear-gradient(180deg, #ffe27a, #f5b518);
    border: none;
    border-radius: 99px;
    padding: 1.6cqw 6cqw;
    margin-top: 1.4cqw;
    box-shadow: 0 10px 30px rgba(245, 181, 24, .4), inset 0 2px 0 rgba(255, 255, 255, .7);
    transition: transform .15s, box-shadow .15s;
}
#stage .btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 40px rgba(245, 181, 24, .55), inset 0 2px 0 rgba(255, 255, 255, .7); }
#stage .btn:active { transform: scale(.97); }
#stage #finalscore { font-family: "Russo One"; font-size: 5cqw; color: #fff; }
#stage #finalstats { font-size: 1.8cqw; color: #aebfdd; letter-spacing: .1em; }

#stage #mute {
    position: absolute;
    top: 2.2cqw;
    right: 2.2cqw;
    z-index: 9;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(8, 12, 24, .7);
    font-size: 2cqw;
    cursor: pointer;
    color: #fff;
    transition: transform .15s;
    line-height: 1;
}
#stage #mute:hover { transform: scale(1.12); }

/* --- Frases del arquero (trash-talk) --- */
#stage #frase-box {
    position: absolute;
    bottom: 13.5cqw;
    left: 50%;
    transform: translateX(-50%) scale(.85);
    z-index: 6;
    pointer-events: none;
    font-family: "Russo One";
    font-size: 2.2cqw;
    letter-spacing: .05em;
    color: #ffd54a;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(255, 213, 74, .5);
    background: rgba(8, 12, 24, .78);
    border: 1px solid rgba(255, 213, 74, .35);
    border-radius: 1.6cqw;
    padding: 1.1cqw 2.4cqw;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    white-space: nowrap;
    max-width: 88cqw;
    overflow: hidden;
    text-overflow: ellipsis;
}
#stage #frase-box.on {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: pausa-frase 3s ease both;
}
@keyframes pausa-frase {
    0% { opacity: 0; transform: translateX(-50%) scale(.88); }
    10%, 88% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(.95); }
}

/* --- Arquero rival en pantalla de derrota --- */
#stage #over-gk-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6cqw;
    margin-bottom: .8cqw;
    opacity: 0;
    transform: translateY(20px) scale(.8);
    transition: opacity .4s ease, transform .4s ease;
}
#stage #over-gk-wrap.gk-laugh {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#stage #over-gk {
    width: 8cqw;
    height: 8cqw;
    border-radius: 50%;
    background: linear-gradient(135deg, #22b573, #1a8a5a);
    border: .4cqw solid rgba(255,255,255,.3);
    box-shadow: 0 0 30px rgba(34,181,115,.5);
    position: relative;
    animation: gk-bounce .6s ease-in-out infinite;
}
#stage #over-gk::before {
    content: '🧤';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4cqw;
}
#stage #over-bubble {
    background: rgba(8,12,24,.82);
    border: 1px solid rgba(255,213,74,.4);
    border-radius: 1.4cqw;
    padding: .8cqw 1.8cqw;
    max-width: 60cqw;
    position: relative;
}
#stage #over-bubble::after {
    content: '';
    position: absolute;
    top: -1cqw;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1cqw solid transparent;
    border-right: 1cqw solid transparent;
    border-bottom: 1cqw solid rgba(255,213,74,.4);
}
#stage #over-bubble-text {
    font-family: "Russo One";
    font-size: 1.6cqw;
    color: #ffd54a;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
@keyframes gk-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-.6cqw); }
}

/* --- Pantalla completa --- */
#stage #fsbtn {
    position: absolute;
    top: 2.2cqw;
    right: 8cqw;
    z-index: 9;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(8, 12, 24, .7);
    font-size: 2cqw;
    cursor: pointer;
    color: #fff;
    transition: transform .15s;
    line-height: 1;
}
#stage #fsbtn:hover { transform: scale(1.12); }

/* Fullscreen nativo: el stage cubre toda la pantalla */
#stage:fullscreen,
#stage:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    background: #05080f;
}

/* Fullscreen virtual (fallback para iOS Safari y navegadores sin soporte) */
#stage.fs-virtual {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    z-index: 99999;
    background: #05080f;
}