/*==========================================================
  CONTENEDOR GENERAL DEL JUEGO
==========================================================*/

.game-container{
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    width:1000px;
    height:720px;
    transform:translate(-50%,-50%);
    z-index:100;
}

.game-container.visible{
    display:flex;
    justify-content:center;
    align-items:center;
}

.game-window{
    position:relative;
    width:100%;
    height:100%;
    background-image:url("../images/tombola.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.game-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.game-container.fullscreen{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
}


/*==========================================================
  MODAL INICIAL Y CONTENEDOR DEL TABLERO
==========================================================*/

.game-start-modal{
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:35px;
    left:50%;
    top:57%;
    transform:translate(-50%,-50%);
    width:500px;
    height:358px;
    box-sizing:border-box;
    padding:35px;
    background:rgba(0,0,0,.82);
    border:2px solid #b68a3d;
    border-radius:16px;
    text-align:center;
    color:#f5e3b5;
    z-index:100;
    pointer-events:auto;
    overflow:hidden;
}

.game-start-modal.playing{
    background:transparent;
}


/*==========================================================
  TÍTULO
==========================================================*/

.game-title{
    margin:0;
    text-align:center;
    font-size:52px;
    line-height:.9;
    color:#f2d18c;
    text-shadow:
        0 0 10px #000,
        0 0 18px rgba(255,180,80,.35);
}


/*==========================================================
  REGLAS
==========================================================*/

.game-rules{
    display:flex;
    flex-direction:column;
    gap:18px;
    font-size:28px;
    text-align:center;
}

.rule{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
}

.good{
    color:#9ee36a;
}

.bad{
    color:#ff6b6b;
}


/*==========================================================
  BOTÓN START
==========================================================*/

#game-start-btn{
    width:260px;
    height:72px;
    border:none;
    border-radius:12px;
    font-size:28px;
    font-weight:bold;
    letter-spacing:2px;
    color:#2c1900;
    cursor:pointer;
    pointer-events:auto;
    background:
        linear-gradient(
            #f7d879,
            #d5a73b,
            #b88418
        );
    box-shadow:
        inset 0 0 12px rgba(255,190,70,.35),
        0 0 28px rgba(255,170,30,.25);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
    animation:pulseButton 2s ease-in-out infinite;
    touch-action:manipulation;
}

#game-start-btn:hover{
    transform:scale(1.05);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.4),
        0 0 30px rgba(255,210,100,.75);
}

#game-start-btn:disabled{
    cursor:default;
    opacity:.75;
}

@keyframes pulseButton{
    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }
}


/*==========================================================
  CUENTA ATRÁS
==========================================================*/

.game-countdown{
    position:absolute;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    font-size:180px;
    font-weight:bold;
    color:#f2d18c;
    text-shadow:
        0 0 20px #000,
        0 0 40px rgba(255,180,80,.8);
    pointer-events:none;
    z-index:300;
}

.game-countdown.visible{
    display:flex;
}


/*==========================================================
  TABLERO
==========================================================*/

.holes{
    display:none;
    position:absolute;
    inset:0;
    background-color:#000;
    background-image:url("../images/tablero.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    border-radius:inherit;
    overflow:hidden;
    z-index:1;
    touch-action:none;
}

.holes.visible{
    display:block;
}


/*==========================================================
  AGUJEROS
==========================================================*/

.hole{
    position:absolute;
    width:170px;
    height:170px;
    transform:translate(-50%,-50%);
    overflow:hidden;
    pointer-events:auto;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
    z-index:10;
}

.hole::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:112%;
    height:112%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:auto;
    z-index:5;
}


/*==========================================================
  POSICIÓN DE LOS NUEVE AGUJEROS
==========================================================*/

.h1{
    left:21%;
    top:27%;
}

.h2{
    left:50%;
    top:27%;
}

.h3{
    left:77%;
    top:27%;
}

.h4{
    left:21%;
    top:50%;
}

.h5{
    left:50%;
    top:50%;
}

.h6{
    left:77%;
    top:50%;
}

.h7{
    left:21%;
    top:59%;
}

.h8{
    left:50%;
    top:59%;
}

.h9{
    left:77%;
    top:59%;
}


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

.character{
    position:absolute;
    left:50%;
    top:110%;
    width:100px;
    height:auto;
    max-height:155px;
    transform:
        translateX(-50%)
        translateY(0);
    opacity:1;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    will-change:
        top,
        transform,
        opacity;
    transition:
        top .22s ease-out,
        transform .18s ease,
        opacity .18s linear;
    z-index:4;
}

.hole.up .character{
    top:8px;
}

.character.hit{
    transform:
        translateX(-50%)
        scale(.82);
    opacity:0;
}

.character.enemy-hit{
    filter:
        brightness(1.25)
        drop-shadow(0 0 10px rgba(255,60,30,.9));
}

.character.ally-hit{
    filter:
        brightness(1.15)
        drop-shadow(0 0 10px rgba(100,210,255,.9));
}


/*==========================================================
  SCORE Y TIMER
==========================================================*/

.game-score,
.game-timer{
    display:none;
    position:absolute;
    top:115px;
    width:120px;
    height:82px;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background:rgba(0,0,0,.90);
    border:2px solid #b68a3d;
    border-radius:12px;
    z-index:500;
    pointer-events:none;
}

.game-score{
    left:165px;
}

.game-timer{
    right:165px;
}

.game-score.visible,
.game-timer.visible{
    display:flex;
}

.game-label{
    margin-top:10px;
    font-size:14px;
    font-weight:bold;
    letter-spacing:3px;
    color:#d6a13a;
    text-shadow:
        0 0 8px #000,
        0 0 15px rgba(255,180,80,.5);
}

#game-score-value,
#game-time-value{
    margin-top:8px;
    font-size:42px;
    font-weight:bold;
    color:#f5e3b5;
    text-shadow:
        0 0 12px #000,
        0 0 25px rgba(255,180,80,.6);
}


/*==========================================================
  INDICADOR FIJO DE COMBO
==========================================================*/

.game-combo{
    display:none;
    position:absolute;
    left:50%;
    top:118px;
    transform:translateX(-50%);
    width:105px;
    height:72px;
    box-sizing:border-box;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background:rgba(0,0,0,.90);
    border:2px solid #b68a3d;
    border-radius:12px;
    z-index:500;
    pointer-events:none;
    opacity:.55;
    transition:
        opacity .2s ease,
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.game-combo.visible{
    display:flex;
}

.game-combo.active{
    opacity:1;
    transform:
        translateX(-50%)
        scale(1.08);
    border-color:#f1c45f;
    box-shadow:
        0 0 18px rgba(255,190,70,.48),
        inset 0 0 12px rgba(255,190,70,.12);
}

.game-combo-label{
    font-size:11px;
    font-weight:bold;
    letter-spacing:2px;
    color:#d6a13a;
}

#game-combo-value{
    margin-top:5px;
    font-size:29px;
    line-height:1;
    font-weight:bold;
    color:#f5e3b5;
    text-shadow:
        0 0 10px #000,
        0 0 18px rgba(255,180,80,.65);
}

.game-combo.combo-x2 #game-combo-value{
    color:#ffe28a;
}

.game-combo.combo-x3 #game-combo-value{
    color:#ffb64d;
    text-shadow:
        0 0 10px #000,
        0 0 20px rgba(255,125,30,.9);
}


/*==========================================================
  FEEDBACK DEL GOLPE
==========================================================*/

.game-hit-feedback{
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100px;
    pointer-events:none;
    z-index:700;
    opacity:0;
}

.game-hit-feedback.visible{
    display:flex;
    animation:hitFeedbackRise .72s ease-out forwards;
}

.game-hit-points{
    font-size:48px;
    line-height:1;
    font-weight:900;
    color:#ffe19a;
    text-shadow:
        0 3px 2px #000,
        0 0 12px #000,
        0 0 24px rgba(255,180,50,.95);
}

.game-hit-combo{
    min-height:22px;
    margin-top:5px;
    font-size:19px;
    line-height:1;
    font-weight:bold;
    letter-spacing:2px;
    color:#ffb64d;
    text-shadow:
        0 2px 2px #000,
        0 0 10px rgba(255,110,20,.95);
}

.game-hit-feedback.negative .game-hit-points{
    color:#ff6868;
    text-shadow:
        0 3px 2px #000,
        0 0 12px #000,
        0 0 22px rgba(255,40,40,.85);
}

.game-hit-feedback.negative .game-hit-combo{
    color:#ff8d8d;
}

@keyframes hitFeedbackRise{
    0%{
        opacity:0;
        transform:
            translate(-50%,-20%)
            scale(.72);
    }

    20%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.12);
    }

    65%{
        opacity:1;
        transform:
            translate(-50%,-85%)
            scale(1);
    }

    100%{
        opacity:0;
        transform:
            translate(-50%,-135%)
            scale(.9);
    }
}


/*==========================================================
  MODAL FINAL DEL JUEGO
==========================================================*/

.game-end-modal{
    display:none;
    position:absolute;
    left:50%;
    top:57%;
    transform:translate(-50%,-50%);
    width:560px;
    max-height:88%;
    box-sizing:border-box;
    padding:28px 34px 30px;
    overflow-y:auto;
    background:
        linear-gradient(
            180deg,
            rgba(18,12,5,.97),
            rgba(0,0,0,.97)
        );
    border:2px solid #b68a3d;
    border-radius:16px;
    color:#f5e3b5;
    text-align:center;
    z-index:1000;
    pointer-events:auto;
    box-shadow:
        0 0 28px rgba(0,0,0,.9),
        inset 0 0 24px rgba(214,161,58,.08);
}

.game-end-modal.visible{
    display:flex;
    flex-direction:column;
    align-items:center;
}


/*==========================================================
  TÍTULO GAME OVER
==========================================================*/

.game-end-title{
    margin:0 0 18px;
    font-size:52px;
    line-height:1;
    letter-spacing:3px;
    color:#f2d18c;
    text-shadow:
        0 0 12px #000,
        0 0 24px rgba(255,180,80,.45);
}


/*==========================================================
  PUNTUACIÓN FINAL
==========================================================*/

.game-final-score{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:220px;
    min-height:82px;
    margin-bottom:20px;
    padding:10px 18px;
    box-sizing:border-box;
    background:rgba(0,0,0,.72);
    border:1px solid rgba(214,161,58,.75);
    border-radius:10px;
}

.game-final-score span{
    font-size:13px;
    font-weight:bold;
    letter-spacing:3px;
    color:#d6a13a;
}

#game-final-score-value{
    margin-top:7px;
    font-size:40px;
    line-height:1;
    color:#fff1c6;
    text-shadow:
        0 0 10px #000,
        0 0 18px rgba(255,180,80,.4);
}


/*==========================================================
  GUARDAR NOMBRE Y PUNTUACIÓN
==========================================================*/

.game-ranking-save{
    width:100%;
    margin-bottom:17px;
}

.game-ranking-save label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:bold;
    letter-spacing:2px;
    color:#d6a13a;
}

.game-name-row{
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:10px;
    width:100%;
}

#game-player-name{
    flex:1;
    min-width:0;
    height:46px;
    box-sizing:border-box;
    padding:0 14px;
    border:1px solid #7f612b;
    border-radius:8px;
    outline:none;
    background:rgba(255,255,255,.08);
    color:#fff1c6;
    font-size:17px;
    text-align:left;
    pointer-events:auto;
}

#game-player-name::placeholder{
    color:rgba(245,227,181,.45);
}

#game-player-name:focus{
    border-color:#d6a13a;
    box-shadow:
        0 0 0 2px rgba(214,161,58,.16),
        0 0 14px rgba(214,161,58,.18);
}

#game-save-score-btn{
    width:145px;
    height:46px;
    border:none;
    border-radius:8px;
    color:#2c1900;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
    cursor:pointer;
    pointer-events:auto;
    background:
        linear-gradient(
            #f7d879,
            #d5a73b,
            #b88418
        );
    box-shadow:
        inset 0 0 9px rgba(255,255,255,.22),
        0 0 14px rgba(255,170,30,.18);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
    touch-action:manipulation;
}

#game-save-score-btn:hover{
    transform:scale(1.03);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,.3),
        0 0 20px rgba(255,190,70,.35);
}

#game-save-score-btn:disabled{
    cursor:default;
    opacity:.45;
    transform:none;
}

.game-save-message{
    min-height:18px;
    margin:7px 0 0;
    font-size:13px;
    color:#9ee36a;
}

.game-save-message.error{
    color:#ff6b6b;
}


/*==========================================================
  RANKING
==========================================================*/

.game-ranking{
    width:100%;
    margin-bottom:20px;
    padding:14px 18px;
    box-sizing:border-box;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(182,138,61,.5);
    border-radius:10px;
}

.game-ranking h3{
    margin:0 0 10px;
    font-size:18px;
    letter-spacing:2px;
    color:#f2d18c;
}

.game-ranking-list{
    width:100%;
    max-height:172px;
    margin:0;
    padding:0;
    overflow-y:auto;
    list-style:none;
    counter-reset:ranking-position;
    scrollbar-width:thin;
    scrollbar-color:#b68a3d rgba(255,255,255,.06);
}

.game-ranking-list::-webkit-scrollbar{
    width:7px;
}

.game-ranking-list::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);
    border-radius:10px;
}

.game-ranking-list::-webkit-scrollbar-thumb{
    background:#b68a3d;
    border-radius:10px;
}

.game-ranking-list li{
    counter-increment:ranking-position;
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:8px;
    min-height:28px;
    padding:3px 7px;
    box-sizing:border-box;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#f5e3b5;
    font-size:15px;
}

.game-ranking-list li:last-child{
    border-bottom:none;
}

.game-ranking-list li::before{
    content:counter(ranking-position) ".";
    color:#d6a13a;
    font-weight:bold;
    text-align:left;
}

.game-ranking-name{
    overflow:hidden;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.game-ranking-score{
    color:#fff1c6;
    font-weight:bold;
    text-align:right;
}

.game-ranking-empty{
    display:block !important;
    min-height:auto !important;
    padding:12px 5px !important;
    border-bottom:none !important;
    color:rgba(245,227,181,.55) !important;
    font-style:italic;
    text-align:center !important;
}

.game-ranking-empty::before{
    display:none;
}


/*==========================================================
  BOTONES RESTART Y EXIT
==========================================================*/

#game-restart-btn,
#game-exit-end-btn{
    width:230px;
    height:58px;
    border-radius:10px;
    font-size:20px;
    font-weight:bold;
    letter-spacing:2px;
    cursor:pointer;
    pointer-events:auto;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;
    touch-action:manipulation;
}

#game-restart-btn{
    border:none;
    color:#2c1900;
    background:
        linear-gradient(
            #f7d879,
            #d5a73b,
            #b88418
        );
    box-shadow:
        inset 0 0 10px rgba(255,255,255,.25),
        0 0 20px rgba(255,170,30,.24);
}

#game-restart-btn:hover{
    transform:scale(1.04);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,.35),
        0 0 26px rgba(255,190,70,.5);
}

#game-exit-end-btn{
    margin-top:15px;
    background:#111;
    border:2px solid #b68a3d;
    color:#f4d48a;
}

#game-exit-end-btn:hover{
    background:#b68a3d;
    color:#111;
    transform:translateY(-2px);
}


/*==========================================================
  BOTÓN X PARA SALIR DURANTE EL JUEGO
==========================================================*/

#game-exit-btn{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:#111;
    border:2px solid #b68a3d;
    border-radius:50%;
    color:#f4d48a;
    font-size:22px;
    line-height:1;
    font-weight:bold;
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
    z-index:2000;
}

#game-exit-btn:hover{
    background:#b68a3d;
    color:#111;
    transform:scale(1.08);
}