/*General styles*/

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #111;
    overflow: hidden;
}

/* Screens */
.screen{
    position: fixed;
    inset: 0;
    display: none;
    background: #000;
}
.screen.is-active{ display: block; }

.screen-layer{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.screen-bg, .screen-fx{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.screen-fx{ pointer-events: none; }

.start-actions, .end-actions{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10vh;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.img-btn{
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform .12s ease;
}
.img-btn:hover{ transform: translateY(-2px) scale(1.01); }
.img-btn:active{ transform: translateY(0) scale(.99); }
.img-btn img{ width: min(320px, 70vw); height: auto; display: block; }

/* Game layout */
.screen-game{
    /* IMPORTANTE: relativo a bk/styles.css */
    background: url("imgw/JUEGO%20DE%20MEMORIA_FONDO_PANTALLA_JUEGO.png") center/cover no-repeat;
}

.game-wrap{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 360px;
}

.board-wrap{
    height: 100%;
    display: grid;
    place-items: center;
    padding: 20px;
}

.board{
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 2vw, 18px);
    transform: translateZ(0);
}



/* ===== FIX flip: fuerza backface (evita ver reverso espejado) ===== */

.card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;

    perspective: 1200px;
    -webkit-perspective: 1200px;
}

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: 18px;

    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;

    transition: transform .4s ease;
    will-change: transform;
    transform: rotateY(0deg);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

.card.is-flipped .card-inner { transform: rotateY(180deg); }
/* ==== FIX anti-bug: muestra cara correcta por opacity (no depende de backface) ==== */
.card-face{
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
}

/* Asegura stacking */
.card-back{ z-index: 1; opacity: 1; transition: opacity .12s linear; }
.card-front{ z-index: 2; opacity: 0; transition: opacity .12s linear; }

/* Cuando se voltea: oculto back, muestro front */
.card.is-flipped .card-back{ opacity: 0 !important; }
.card.is-flipped .card-front{ opacity: 1 !important; }

/* Mantén el giro bonito (opcional) */
.card-inner{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform .35s ease;
}
.card.is-flipped .card-inner{
    transform: rotateY(180deg);
}

/* Imágenes */
.card-face img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 10%;
}
.card-back img{
    object-fit: cover;
    padding: 0;
}




/* Sidebar */
.sidebar{
    height: 100%;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}

.brand-row{
    width: 100%;
    display: grid;
    place-items: center;
    padding-top: 6px;
}

.brand-logos{
    width: min(260px, 90%);
    height: auto;
    display: block;
}

.timer-box{
    width: 100%;
    display: grid;
    gap: 10px;
    place-items: center;
}

.timer-title{
    width: min(220px, 90%);
    height: auto;
}

.timer-visual{
    position: relative;
    width: min(220px, 90%);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.timer-clock{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.timer-text{
    position: absolute;
    bottom: 10%;
    width: 100%;
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 3px 0 rgba(0,0,0,.25);
}

#timeText{
    font-size: clamp(22px, 3vw, 44px);
    color: #5a2e1a;
}

.controls{
    width: 100%;
    display: grid;
    gap: 12px;
    place-items: center;
    margin-top: 8px;
}

.ghost-btn{
    border: 2px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.2);
    color: rgba(255,255,255,.9);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
    .game-wrap{ grid-template-columns: 1fr 300px; }
    .board{
        width: min(760px, 100%);
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px){
    body{ overflow: auto; }
    .game-wrap{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .sidebar{
        height: auto;
        padding-bottom: 24px;
    }
    .board-wrap{ padding: 14px; }
    .board{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px){
    .board{ grid-template-columns: repeat(2, 1fr); }
}

/* Laptops 1366x768 */
@media (max-width: 1400px) and (max-height: 820px){
    .game-wrap{ grid-template-columns: 1fr 300px; }
    .board-wrap{ padding: 14px; }
    .board{ width: min(760px, 100%); gap: 12px; }
    .sidebar{ padding: 14px 12px; gap: 12px; }
    .brand-logos{ width: 220px; }
    .timer-title{ width: 190px; }
    .timer-visual{ width: 190px; }
    .img-btn img{ width: min(260px, 70vw); }
}






/* ===== Winner overlays ===== */
.screen-win .screen-layer { position: relative; }

.win-overlays{
    position: absolute;
    inset: 0;
    z-index: 3; /* encima del bg y confetti */
    pointer-events: none;
}

/* “Bien hecho” arriba */
.win-bien-hecho{
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, 92vw);
    height: auto;
}

/* Banderín “Lo lograste” centrado debajo */
.win-banderin{
    position: absolute;
    top: 28vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, 94vw);
    height: auto;
}

/* Coronas decorativas (2) */
.win-corona{
    position: absolute;
    width: min(210px, 22vw);
    height: auto;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.25));
}

.win-corona--left{
    left: 6vw;
    top: 24vh;
    transform: rotate(-14deg);
}

.win-corona--right{
    right: 6vw;
    top: 18vh;
    transform: rotate(16deg);
}

/* Ajuste para laptop 1366x768 */
@media (max-width: 1400px) and (max-height: 820px){
    .win-bien-hecho{ top: 8vh; width: min(640px, 92vw); }
    .win-banderin{ top: 26vh; width: min(690px, 94vw); }
    .win-corona{ width: min(170px, 20vw); }
    .win-corona--left{ top: 22vh; }
    .win-corona--right{ top: 16vh; }
}

/* Ajuste móvil */
@media (max-width: 720px){
    .win-bien-hecho{ top: 7vh; width: min(520px, 92vw); }
    .win-banderin{ top: 22vh; width: min(560px, 94vw); }
    .win-corona--left{ left: 3vw; top: 18vh; }
    .win-corona--right{ right: 3vw; top: 14vh; }
}


/* ===== Animación zoom winner ===== */
@keyframes winZoomIn {
    0%   { opacity: 0; transform: translateX(-50%) scale(.85); filter: blur(2px); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.06); filter: blur(0); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes winPopIn {
    0%   { opacity: 0; transform: scale(.82) rotate(var(--rot, 0deg)); filter: blur(2px); }
    70%  { opacity: 1; transform: scale(1.08) rotate(var(--rot, 0deg)); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}

/* Dispara animación SOLO cuando la pantalla win está activa */
#screen-win.is-active .win-bien-hecho{
    animation: winZoomIn 520ms cubic-bezier(.2,.9,.2,1) 0ms both;
}

#screen-win.is-active .win-banderin{
    animation: winZoomIn 580ms cubic-bezier(.2,.9,.2,1) 120ms both;
}

/* Coronas con pop + su rotación */
#screen-win.is-active .win-corona--left{
    --rot: -14deg;
    animation: winPopIn 520ms cubic-bezier(.2,.9,.2,1) 180ms both;
}

#screen-win.is-active .win-corona--right{
    --rot: 16deg;
    animation: winPopIn 520ms cubic-bezier(.2,.9,.2,1) 220ms both;
}

/* Respeta usuarios con reduced motion */
@media (prefers-reduced-motion: reduce){
    #screen-win.is-active .win-bien-hecho,
    #screen-win.is-active .win-banderin,
    #screen-win.is-active .win-corona--left,
    #screen-win.is-active .win-corona--right{
        animation: none !important;
    }
}



/* Si ya existen estas animaciones por la pantalla win, puedes OMITIR este bloque */
@keyframes winZoomIn {
    0%   { opacity: 0; transform: translateX(-50%) scale(.85); filter: blur(2px); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.06); filter: blur(0); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ===== Lose overlays ===== */
.screen-lose .screen-layer { position: relative; }

.lose-overlays{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* “No te rindas” arriba */
.lose-no-te-rindas{
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, 92vw);
    height: auto;
}

/* Banderín “Inténtalo de nuevo” debajo */
.lose-banderin{
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(860px, 94vw);
    height: auto;
}

/* Animación cuando se activa la pantalla */
#screen-lose.is-active .lose-no-te-rindas{
    animation: winZoomIn 520ms cubic-bezier(.2,.9,.2,1) 0ms both;
}

#screen-lose.is-active .lose-banderin{
    animation: winZoomIn 580ms cubic-bezier(.2,.9,.2,1) 120ms both;
}

/* Ajuste para laptop 1366x768 */
@media (max-width: 1400px) and (max-height: 820px){
    .lose-no-te-rindas{ top: 8vh; width: min(680px, 92vw); }
    .lose-banderin{ top: 28vh; width: min(720px, 94vw); }
}

/* Ajuste móvil */
@media (max-width: 720px){
    .lose-no-te-rindas{ top: 7vh; width: min(560px, 92vw); }
    .lose-banderin{ top: 24vh; width: min(600px, 94vw); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    #screen-lose.is-active .lose-no-te-rindas,
    #screen-lose.is-active .lose-banderin{
        animation: none !important;
    }
}




/* ===== Start overlays ===== */
.screen-start .screen-layer { position: relative; }

.start-overlays{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Logos arriba */
.start-logos{
    position: absolute;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, 70vw);
    height: auto;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,.18));
}

/* Título en 3 capas (alineado centro) */
.start-title-1{
    position: absolute;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 88vw);
    height: auto;
}
.start-title-2{
    position: absolute;
    top: 24vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(820px, 92vw);
    height: auto;
}
.start-title-3{
    position: absolute;
    top: 44vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 92vw);
    height: auto;
}

/* Stickers decorativos */
.start-sticker{
    position: absolute;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 14px 16px rgba(0,0,0,.25));
    transform-origin: center;
}

/* Posiciones “orgánicas” (ajústalas si quieres) */
.start-burger{
    width: min(230px, 26vw);
    right: 6vw;
    top: 18vh;
    --rot: 10deg;
    --dur: 3.8s;
    --delay: .1s;
}
.start-drink{
    width: min(200px, 24vw);
    left: 7vw;
    top: 26vh;
    --rot: -8deg;
    --dur: 4.4s;
    --delay: .3s;
}
.start-ice{
    width: min(190px, 22vw);
    right: 10vw;
    top: 52vh;
    --rot: -6deg;
    --dur: 4.1s;
    --delay: .2s;
}
.start-crown{
    width: min(190px, 22vw);
    left: 10vw;
    top: 56vh;
    --rot: 12deg;
    --dur: 3.6s;
    --delay: .25s;
}

/* Botón flotante (también en movimiento constante) */
.img-btn--float{
    animation: floatZoom 3.2s ease-in-out 0s infinite;
    will-change: transform;
}

/* Animación “float + zoom in/out” constante */
@keyframes floatZoom{
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-10px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

/* Animación para stickers con rotación */
@keyframes floatZoomRot{
    0%   { transform: translateY(0) scale(1) rotate(var(--rot)); }
    50%  { transform: translateY(-12px) scale(1.05) rotate(var(--rot)); }
    100% { transform: translateY(0) scale(1) rotate(var(--rot)); }
}

/* Aplica animación a stickers */
.start-sticker{
    animation: floatZoomRot var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}

/* Responsive: laptop 1366x768 */
@media (max-width: 1400px) and (max-height: 820px){
    .start-logos{ width: min(174px, 70vw); top: 2.5vh; }
    .start-title-1{ top: 13vh; width: min(293px, 88vw); }
    .start-title-2{ top: 23vh; width: min(472px, 92vw); }
    .start-title-3{ top: 41vh; width: min(660px, 92vw); }

    .start-burger{ width: min(200px, 24vw); top: 18vh; }
    .start-drink{ width: min(170px, 22vw); top: 26vh; }
    .start-ice{ width: min(160px, 20vw); top: 52vh; }
    .start-crown{ width: min(160px, 20vw); top: 54vh; }
}

/* Móvil */
@media (max-width: 720px){
    .start-title-1{ top: 12vh; }
    .start-title-2{ top: 22vh; }
    .start-title-3{ top: 42vh; }

    /* que no tapen el botón */
    .start-burger{ right: 3vw; top: 16vh; }
    .start-drink{ left: 3vw; top: 24vh; }
    .start-ice{ right: 4vw; top: 58vh; }
    .start-crown{ left: 4vw; top: 60vh; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .start-sticker,
    .img-btn--float{
        animation: none !important;
    }
}