/*==========================================================
  CARD 6 — RESPONSIVE
==========================================================*/


/*==========================================================
  TABLET / PANTALLA REDUCIDA
  ≤ 1100px
==========================================================*/

@media (max-width:1100px){

    .game-container{
        width:min(
            94vw,
            calc((100dvh - 50px) * 1.3889)
        );
    }

    .game-start-modal{
        width:50%;
        height:50%;
        padding:3.5%;
    }

    .game-title{
        font-size:clamp(
            30px,
            5vw,
            52px
        );
    }

    .game-rules{
        font-size:clamp(
            17px,
            2.6vw,
            28px
        );
    }

    #game-start-btn{
        width:300px;
        font-size:18px;
    }

}


/*==========================================================
  MÓVIL ≤ 768px
==========================================================*/

@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

/* ======================================================
    HOSTESS
  ====================================================== */

.hostess-float{
    position:relative !important;
    top:80px !important;
}

/* Humo acompaña a la demonia */

.smoke{
    top:calc(50% + 80px) !important;
}

.hostess-character{
    left:50% !important;
    /*top:72% !important;*/

    width:min(48vw,205px) !important;

    transform:
        translate(-50%,-50%)
        scale(.9) !important;
}


/* ======================================================
   BOCADILLO DINÁMICO
   ====================================================== */

.hostess-dialogue{
    position:absolute !important;

    /* ANULAMOS POSICIÓN DESKTOP */
    right:auto !important;
    margin-right:0 !important;

    /* CENTRADO HORIZONTAL */
    left:50% !important;
    transform:translateX(-50%) !important;

    /* ENCIMA DE LA DEMONIA */
    top:-260px !important;

    /* BOCADILLO DINÁMICO */
    width:min(82vw,350px) !important;
    height:auto !important;
    min-height:170px;
}


/* PNG DEL BOCADILLO */

.bocadillo{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:fill !important;

    z-index:1;
}


/* TEXTO */

#hostess-typewriter{
    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

    box-sizing:border-box !important;

    /* Área útil interior del pergamino */
    padding:48px 64px 54px 72px !important;

    margin:0 !important;

    font-size:12px !important;
    line-height:1.25 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;

    z-index:2;
}

    /* ======================================================
       GAME CONTAINER
       ====================================================== */

    .game-container{
        width:min(
            96vw,
            calc((100dvh - 24px) * 1.3889)
        );
    }


   /* ======================================================
   START MODAL / COUNTDOWN / TABLERO — MÓVIL
   ====================================================== */

/*
   ESTADO INICIAL

   Mientras todavía aparecen PLAY WITH ME,
   las reglas y BEGIN THE HUNT mantenemos
   el modal pequeño sobre la tómbola.
*/

.game-start-modal{
    width:62% !important;
    height:auto !important;
    min-height:0 !important;

    top:57% !important;

    padding:18px 12px !important;
    gap:16px !important;

    border-radius:10px !important;

    overflow:visible !important;
}


/* ======================================================
   CUENTA ATRÁS — MÓVIL
   ====================================================== */

/*
   El modal del juego se convierte temporalmente
   en la pantalla negra del countdown.
*/

.game-start-modal.countdown-mode{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:100% !important;
    height:100% !important;
    min-height:100% !important;

    padding:0 !important;
    margin:0 !important;
    gap:0 !important;

    transform:translate(-50%, -50%) !important;

    background:#000 !important;

    border:none !important;
    border-radius:0 !important;

    overflow:hidden !important;

    z-index:5000 !important;
}


/*
   El countdown ocupa exactamente el modal negro.
*/

.game-start-modal.countdown-mode .game-countdown{
    position:absolute !important;

    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:none !important;

    justify-content:center !important;
    align-items:center !important;

    box-sizing:border-box !important;

    background:#000 !important;

    border:none !important;
    border-radius:0 !important;

    font-size:clamp(
        72px,
        24vw,
        120px
    ) !important;

    line-height:1 !important;
    text-align:center !important;

    transform:none !important;

    z-index:6000 !important;
}


.game-start-modal.countdown-mode .game-countdown.visible{
    display:flex !important;
}

/* ======================================================
   PARTIDA

   Al terminar GO el mismo modal continúa
   siendo fullscreen, pero ahora aparece
   el reborde dorado.
   ====================================================== */

.game-start-modal.playing{
    position:fixed !important;

    left:50% !important;
    top:50% !important;

    transform:translate(-50%, -50%) !important;

    width:80vw !important;
    height:70dvh !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;
    gap:0 !important;

    background:#000 !important;

    border:3px solid #b68a3d !important;
    border-radius:0 !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    z-index:5000 !important;
}

.game-overlay:has(.game-start-modal.playing){
        background:#000 !important;
    }




/* ======================================================
   TABLERO MÓVIL — SUBIR CONJUNTO COMPLETO
   ====================================================== */

.game-start-modal.playing .holes{
    background-position:center 60% !important;
    border:none !important;
}

/* Subimos las tres filas exactamente la misma distancia */
.game-start-modal.playing .h1,
.game-start-modal.playing .h2,
.game-start-modal.playing .h3{
    top:31%;
    left:19% !important;
}

.game-start-modal.playing .h4,
.game-start-modal.playing .h5,
.game-start-modal.playing .h6{
    top:54%;
    left:51% !important;
}

.game-start-modal.playing .h7,
.game-start-modal.playing .h8,
.game-start-modal.playing .h9{
    top:58%;
    left: 81% !important;
}

/* ======================================================
   CONTENIDO DE LA PANTALLA INICIAL
   ====================================================== */

.game-title{
    margin:0 !important;

    font-size:24px !important;
    line-height:1 !important;
}

.game-rules{
    gap:10px !important;

    font-size:14px !important;
    line-height:1.15 !important;
}

.rule{
    gap:7px !important;
}

#game-start-btn{
    width:88% !important;

    min-height:42px !important;
    height:42px !important;

    padding:8px 12px !important;

    border-radius:8px !important;

    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:.8px !important;
}

    /* ======================================================
   HUD DEL JUEGO — MÓVIL
   ====================================================== */

    .game-score.visible,
    .game-timer.visible{
        display:flex !important;
        position:fixed !important;

        top:-35% !important;

        width:58px !important;
        height:40px !important;

        justify-content:center !important;
        align-items:center !important;
        flex-direction:column !important;

        border:1px solid #b68a3d !important;
        border-radius:6px !important;

        background:rgba(0,0,0,.90) !important;

        z-index:7000 !important;

        opacity:1 !important;
        visibility:visible !important;
    }


    /* SCORE */

    .game-score.visible{
        left:15% !important;
        right:auto !important;
    }


    /* TIME */

    .game-timer.visible{
        right:15% !important;
        left:auto !important;
    }


    /* ETIQUETAS SCORE / TIME */

    .game-score.visible .game-label,
    .game-timer.visible .game-label{
        margin-top:3px !important;

        font-size:7px !important;
        letter-spacing:1px !important;
    }


    /* NÚMEROS */

    .game-score.visible #game-score-value,
    .game-timer.visible #game-time-value{
        margin-top:2px !important;

        font-size:20px !important;
        line-height:1 !important;
    }



    /* ======================================================
       COMBO — MÓVIL
       ====================================================== */

    .game-combo{
        top:28% !important;

        width:52px !important;
        height:36px !important;

        border-width:1px !important;
        border-radius:6px !important;
    }

    .game-combo-label{
        font-size:6px !important;
        letter-spacing:1px !important;
    }

    #game-combo-value{
        margin-top:2px !important;

        font-size:16px !important;
    }


    /* ======================================================
       CUENTA ATRÁS — MÓVIL
       ====================================================== */

    .game-countdown{
        font-size:54px !important;

        
    }

    /* ======================================================
       PERSONAJES
       ====================================================== */

    /* Ajuste del tamaño de personajes en móvil */

    .character{
        width:100px !important;
    }


    /* ======================================================
       MODAL FINAL / RANKING
       ====================================================== */

    .game-end-modal{
        width:min(88vw,420px);
        max-height:88dvh;

        padding:14px;
    }

    .game-name-row{
        flex-direction:column;
        gap:8px;
    }

    #game-player-name{
        width:100%;
    }

    #game-save-score-btn{
        width:100%;
    }

    .game-ranking{
        padding:10px;
    }

    .game-ranking-list{
        max-height:130px;
    }

    #game-restart-btn,
    #game-exit-end-btn{
        width:72%;
        height:38px;

        font-size:12px;
    }


    /* ======================================================
       EXIT BUTTON
       ====================================================== */

    #game-exit-btn{
    top:10px !important;
    right:10px !important;

    width:26px !important;
    height:26px !important;

    padding:0 !important;

    border:1.5px solid #ff5a5a !important;
    border-radius:50% !important;

    background:rgba(20,0,0,.88) !important;

    color:#ff5a5a !important;

    font-size:14px !important;
    line-height:1 !important;

    box-shadow:
        0 0 7px rgba(255,50,50,.35) !important;

    display:flex !important;
 
    }

    /* Ocultarla desde que comienza el countdown */
    .game-window:has(.game-start-modal.countdown-mode) #game-exit-btn,
    .game-window:has(.game-start-modal.playing) #game-exit-btn,
    .game-window:has(.game-end-modal.visible) #game-exit-btn{
        display:none !important;
}

}/* fin media query*/


/*==========================================================
  MÓVIL PEQUEÑO
  ≤ 430px
==========================================================*/

@media (max-width:430px){

    /*.hostess-dialogue{
        width:min(62vw,235px) !important;
    }*/

    .hostess-character{
        width:min(46vw,185px) !important;
    }

    .game-end-modal{
        width:90vw;
    }

}


/*==========================================================
  MÓVIL HORIZONTAL
==========================================================*/

@media (max-height:520px) and (orientation:landscape){

    .game-container{
        width:min(
            94vw,
            calc((100dvh - 12px) * 1.3889)
        );
    }

    .game-start-modal{
        width:52%;
        height:60%;
    }

    .game-title{
        font-size:26px;
    }

    .game-rules{
        font-size:14px;
    }

    .game-end-modal{
        width:min(72vw,520px);
        max-height:92dvh;
    }

}