/* ================================================= */
/* ==================== RESET ====================== */
/* ================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ================================================= */
/* ==================== BODY ======================= */
/* ================================================= */

body{
    background:black;
    font-family:'Press Start 2P', cursive;
    overflow:hidden;
    color:white;
    min-height:100vh;
    position:relative;
}

/* ================================================= */
/* ================= VARIABLES ===================== */
/* ================================================= */

:root{
    --pacman-rotate:0deg;
}

/* ================================================= */
/* ================= CRT EFFECT ==================== */
/* ================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    linear-gradient(
        rgba(255,255,255,0.03) 1px,
        transparent 1px
    );
    background-size:100% 3px;
    pointer-events:none;
    animation:scanlines 0.2s linear infinite;
    z-index:99999;
}

@keyframes scanlines{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(3px);
    }
}

/* ================================================= */
/* =============== PANTALLA INICIO ================= */
/* ================================================= */

#start-screen{
    position:absolute;
    inset:0;
    background:black;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.intro-container{
    text-align:center;
}

/* ================================================= */
/* ================= TITULO ======================== */
/* ================================================= */

.game-title{
    font-size:90px;
    color:#ffe600;
    margin-bottom:40px;
    text-shadow:
    0 0 10px #fff700,
    0 0 20px #ffd900,
    0 0 40px #ffae00,
    0 0 80px #ff8800;
    animation:pacGlow 1.5s infinite alternate;
}

@keyframes pacGlow{
    from{
        text-shadow:
        0 0 10px #fff700,
        0 0 20px #ffd900,
        0 0 40px #ffae00;
    }
    to{
        text-shadow:
        0 0 20px #fff89d,
        0 0 40px #ffd000,
        0 0 80px #ff8800;
    }
}

/* ================================================= */
/* ================= FANTASMAS ===================== */
/* ================================================= */

.characters-box{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-bottom:60px;
}

.ghost-line{
    font-size:18px;
    letter-spacing:2px;
}

.blinky{
    color:#ff2d2d;
    text-shadow:
    0 0 10px red,
    0 0 25px crimson,
    0 0 45px red;
}

.pinky{
    color:#ff7de8;
    text-shadow:
    0 0 10px hotpink,
    0 0 25px deeppink,
    0 0 45px hotpink;
}

.inky{
    color:#00ffff;
    text-shadow:
    0 0 10px cyan,
    0 0 25px #00c3ff,
    0 0 45px cyan;
}

.clyde{
    color:#ff9a2e;
    text-shadow:
    0 0 10px orange,
    0 0 25px darkorange,
    0 0 45px orange;
}

.pacman-line{
    color:#ffe600;
    text-shadow:
    0 0 10px yellow,
    0 0 25px gold,
    0 0 45px orange;
}

/* ================================================= */
/* ================= BOTON START =================== */
/* ================================================= */

#start-button{
    padding:25px 50px;
    border:none;
    border-radius:15px;
    background:#111;
    color:#00ffff;
    font-size:22px;
    cursor:pointer;
    transition:0.3s;
    border:3px solid cyan;
    box-shadow:
    0 0 15px cyan,
    inset 0 0 15px rgba(0,255,255,0.5);
}

#start-button:hover{
    transform:scale(1.08);
    background:cyan;
    color:black;
    box-shadow:
    0 0 30px cyan,
    0 0 60px blue;
}

/* ================================================= */
/* ================= GAME SCREEN =================== */
/* ================================================= */

#game-screen{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

/* ================================================= */
/* ===================== HUD ======================= */
/* ================================================= */

.top-hud{
    width:900px;
    max-width:95%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    color:#ffe600;
    font-size:16px;
    text-shadow:
    0 0 10px yellow,
    0 0 20px orange;
}

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

.board-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
}

#game-board{
    display:grid;
    grid-template-columns:repeat(28, 24px);
    grid-template-rows:repeat(17, 24px);
    width:672px;
    height:408px;
    background:black;
    border:4px solid #00d9ff;
    box-shadow:
    0 0 20px cyan,
    0 0 60px blue,
    inset 0 0 20px cyan;
    position:relative;
}

/* ================================================= */
/* =================== CELDAS ====================== */
/* ================================================= */

.cell{
    width:24px;
    height:24px;
    position:relative;
    transition: none;
}

/* ================================================= */
/* ==================== MUROS ====================== */
/* ================================================= */

.wall{
    background:#001eff;
    border:1px solid #00ffff;
    box-shadow:
    0 0 5px #00ffff,
    0 0 10px #00aaff,
    inset 0 0 10px #00ffff;
    animation:wallGlow 2s infinite alternate;
}

@keyframes wallGlow{
    from{
        box-shadow:
        0 0 5px cyan,
        0 0 10px blue;
    }
    to{
        box-shadow:
        0 0 10px cyan,
        0 0 25px #00ffff,
        0 0 40px blue;
    }
}

/* ================================================= */
/* =================== PAC DOTS ==================== */
/* ================================================= */

.dot::after{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    box-shadow:
    0 0 8px white,
    0 0 15px white;
}

/* ================================================= */
/* ================= POWER PELLET ================== */
/* ================================================= */

.power-pellet::after{
    content:"";
    width:16px;
    height:16px;
    border-radius:50%;
    background:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    box-shadow:
    0 0 15px white,
    0 0 30px white;
    animation:pelletPulse 0.8s infinite alternate;
}

@keyframes pelletPulse{
    from{
        transform:translate(-50%, -50%) scale(1);
    }
    to{
        transform:translate(-50%, -50%) scale(1.3);
    }
}

/* ================================================= */
/* ==================== PACMAN ===================== */
/* ================================================= */

.pacman {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffe600;
    transform: rotate(var(--pacman-rotate));
    transition: transform 0.08s linear;
    box-shadow:
    0 0 10px yellow,
    0 0 25px gold,
    0 0 45px orange;
}

/* SE CORRIGIÓ EL ANCLAJE Y EL CLIP-PATH DE LA BOCA CORRUMPIDA */
.pacman::before {
    content: "";
    position: absolute;
    inset: -1px; /* Evita pequeños bordes amarillos residuales */
    background: black;
    border-radius: 50%;
    transform-origin: center;
    clip-path: polygon(100% 74%, 50% 50%, 100% 26%);
    animation: waka 0.2s infinite alternate ease-in-out;
}

@keyframes waka {
    0% {
        clip-path: polygon(100% 50%, 50% 50%, 100% 50%); /* Boca cerrada */
    }
    100% {
        clip-path: polygon(100% 80%, 50% 50%, 100% 20%); /* Boca abierta */
    }
}

/* ================================================= */
/* ================== FANTASMAS ==================== */
/* ================================================= */

.ghost{
    position:relative;
    width:100%;
    height:100%;
    border-radius:50% 50% 0 0;
    overflow:hidden;
    animation:
    ghostFloat 0.25s infinite alternate;
}

/* ===== BORDE INFERIOR ===== */

.ghost::before{
    content:"";
    position:absolute;
    width:100%;
    height:7px;
    bottom:-2px;
    left:0;
    background:inherit;
    clip-path:polygon(
        0% 100%,
        10% 0%,
        20% 100%,
        30% 0%,
        40% 100%,
        50% 0%,
        60% 100%,
        70% 0%,
        80% 100%,
        90% 0%,
        100% 100%
    );
}

/* ===== OJOS ===== */

.ghost::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#001aff;
    top:10px;
    left:6px;
    box-shadow:
    9px 0 #001aff;
}

@keyframes ghostFloat{
    from{
        transform:translateY(0px);
    }
    to{
        transform:translateY(-2px);
    }
}

/* ================================================= */
/* ================= COLORES GHOST ================= */
/* ================================================= */

.blinky-ghost{
    background:#ff0000;
    box-shadow:
    0 0 10px red,
    0 0 25px crimson,
    0 0 45px red;
}

.pinky-ghost{
    background:#ff7de8;
    box-shadow:
    0 0 10px hotpink,
    0 0 25px deeppink,
    0 0 45px hotpink;
}

.inky-ghost{
    background:#00ffff;
    box-shadow:
    0 0 10px cyan,
    0 0 25px #00bfff,
    0 0 45px cyan;
}

.clyde-ghost{
    background:#ff9900;
    box-shadow:
    0 0 10px orange,
    0 0 25px darkorange,
    0 0 45px orange;
}

/* ================================================= */
/* =============== FRIGHTENED MODE ================= */
/* ================================================= */

.scared-ghost{
    background:#003cff !important;
    box-shadow:
    0 0 10px #00aaff,
    0 0 25px #0088ff,
    0 0 45px cyan !important;
    animation:
    ghostFloat 0.25s infinite alternate,
    scaredFlash 0.35s infinite alternate;
}

@keyframes scaredFlash{
    from{
        filter:brightness(1);
    }
    to{
        filter:brightness(1.7);
    }
}

/* ================================================= */
/* =================== MENSAJES ==================== */
/* ================================================= */

.messages-container{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
}

#ready-message,
#game-over-message,
#victory-message{
    position:absolute;
    font-size:40px;
    display:none;
}

#ready-message{
    color:yellow;
    text-shadow:
    0 0 15px yellow,
    0 0 40px orange;
}

#game-over-message{
    color:red;
    text-shadow:
    0 0 15px red,
    0 0 40px crimson;
}

#victory-message{
    color:white;
    text-shadow:
    0 0 20px white,
    0 0 60px white;
}

/* ================================================= */
/* ================= FLASH EFECT =================== */
/* ================================================= */

#flash-effect{
    position:fixed;
    inset:0;
    background:white;
    opacity:0;
    pointer-events:none;
}

.flash-active{
    animation:flashScreen 0.5s linear 4;
}

@keyframes flashScreen{
    0%{
        opacity:0;
    }
    50%{
        opacity:0.9;
    }
    100%{
        opacity:0;
    }
}

/* ================================================= */
/* ================= FLOAT MENU ==================== */
/* ================================================= */

.floating-menu{
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:9999;
}

.float-btn{
    text-decoration:none;
    background:#050b18;
    color:cyan;
    border:2px solid cyan;
    padding:12px 20px;
    border-radius:12px;
    font-size:12px;
    box-shadow:
    0 0 10px cyan,
    inset 0 0 10px rgba(0,255,255,0.4);
    transition:0.3s;
}

.float-btn:hover{
    background:cyan;
    color:black;
    transform:translateY(-3px);
    box-shadow:
    0 0 20px cyan,
    0 0 40px blue;
}

/* ================================================= */
/* ================= RESPONSIVE ==================== */
/* ================================================= */

@media(max-width:1000px){
    #game-board{
        transform:scale(0.75);
    }
    .game-title{
        font-size:55px;
    }
}

@media(max-width:700px){
    #game-board{
        transform:scale(0.55);
    }
    .top-hud{
        flex-direction:column;
        gap:15px;
    }
    .game-title{
        font-size:40px;
    }
    .ghost-line{
        font-size:12px;
    }
}

/*======================================================
=              CONTROLES TÁCTILES MOBILE              =
======================================================*/

#mobile-controls{

    position:fixed;

    bottom:20px;
    left:50%;

    transform:translateX(-50%);

    display:none;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:9999;

    user-select:none;

}

/*====================================*/

.touch-middle{

    display:flex;

    gap:80px;

}

/*====================================*/

.touch-btn{

    width:75px;
    height:75px;

    border-radius:50%;

    border:4px solid #00ffff;

    background:
    radial-gradient(circle,
    #ffe600 0%,
    #ffcc00 60%,
    #ff9900 100%);

    color:black;

    font-size:34px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:

    0 0 10px #ffff00,

    0 0 20px #00ffff,

    0 0 35px #0066ff;

    transition:.15s;

    -webkit-tap-highlight-color:transparent;

}

/*====================================*/

.touch-btn:hover{

    transform:scale(1.08);

}

/*====================================*/

.touch-btn:active{

    transform:scale(.90);

    box-shadow:

    0 0 5px white,

    0 0 25px yellow,

    0 0 50px orange;

}

/*====================================*/

.touch-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    animation:pulseButton 2s infinite;

}

/*====================================*/

@keyframes pulseButton{

0%{

box-shadow:

0 0 0px yellow;

}

50%{

box-shadow:

0 0 25px yellow;

}

100%{

box-shadow:

0 0 0px yellow;

}

}

/*======================================================
=                 TABLETS                             =
======================================================*/

@media(max-width:1024px){

#mobile-controls{

display:flex;

}

}

/*======================================================
=                 CELULARES                           =
======================================================*/

@media(max-width:768px){

#mobile-controls{

display:flex;

bottom:18px;

}

.touch-btn{

width:68px;
height:68px;

font-size:30px;

}

.touch-middle{

gap:70px;

}

}

/*======================================================
=              CELULARES PEQUEÑOS                     =
======================================================*/

@media(max-width:480px){

#mobile-controls{

bottom:10px;

}

.touch-btn{

width:60px;
height:60px;

font-size:26px;

}

.touch-middle{

gap:55px;

}

}

/*======================================================
=                PC                                   =
======================================================*/

@media(min-width:1025px){

#mobile-controls{

display:none !important;

}

}

/*=========================
MONITORES
=========================*/

@media(max-width:1400px){

}


/*=========================
LAPTOP
=========================*/

@media(max-width:1200px){

}


/*=========================
TABLET
=========================*/

@media(max-width:992px){

}


/*=========================
CELULAR GRANDE
=========================*/

@media(max-width:768px){

}


/*=========================
CELULAR PEQUEÑO
=========================*/

@media(max-width:480px){

}