*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-image: url(images/background.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding-top: 0px;
}

/* Scoreboard - responsivo */
.scoreboard {
    color: rgb(238, 12, 12);
    font-family: fantasy;
    font-size: clamp(16px, 3.5vw, 22px);
    border: 5px solid black;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    width: min(250px, 90vw);
    margin-top: 25px;
}

/* Grid (tabuleiro) - responsivo e sempre quadrado */
.grid {
    width: min(560px, 96vw, 96vh);
    aspect-ratio: 1 / 1;
    border: solid black 2px;
    display: grid;
    grid-template-columns: repeat(28, 1fr);
    grid-auto-rows: 1fr;
    background-color: black;
    overflow: hidden;
    max-width: 560px;
}

.grid div {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.pac-dot {
    background-image: url(images/pacdot.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.wall {
    background-color: rgb(17, 7, 105);
}

.power-pellet {
    background-image: url(images/cherry.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.blinky {
    background-image: url(images/blinky.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pinky {
    background-image: url(images/pinky.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.inky {
    background-image: url(images/inky.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.clyde {
    background-image: url(images/clyde.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pac-man {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pac-man.pac-right {
    background-image: url(images/pacmanright.gif);
}

.pac-man.pac-left {
    background-image: url(images/pacmanleft.gif);
}

.pac-man.pac-up {
    background-image: url(images/pacmanup.gif);
}

.pac-man.pac-down {
    background-image: url(images/pacmandown.gif);
}

.pac-man:not(.pac-right):not(.pac-left):not(.pac-up):not(.pac-down) {
    background-image: url(images/pacmanright.gif);
}

.scared-ghost {
    background-image: url(images/scaredghost.png);
    background-size: contain;
    background-position: center;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.scared-ghost::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(255, 255, 255, 0) 70%
    );
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
}

/* ===== D‑pad styles ===== */
#dpad {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 168px;
    height: 168px;
    z-index: 100;
    display: grid;
    grid-template-columns: 56px 56px 56px;
    grid-template-rows: 56px 56px 56px;
    gap: 8px;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#dpad .up {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
#dpad .left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
#dpad .right {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
#dpad .down {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.dpad-btn {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: transform 0.08s ease, background 0.08s ease;
    touch-action: manipulation;
}

.dpad-btn:active,
.dpad-btn.active {
    transform: translateY(2px) scale(0.985);
    background: rgba(255, 255, 255, 0.12);
}

.dpad-btn svg {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

/* esconder D‑pad no desktop */
@media (min-width: 900px) {
    #dpad {
        display: none;
    }
}