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

body {
    background: #000000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
}

.game-header {
    width: 70%;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.score-board {
    background: #000;
    color: #0ff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #ff69b4;
    text-shadow: 0 0 3px #0ff;
    box-shadow: 0 0 5px #ff69b4;
}

#scoreValue {
    color: #ff0;
    text-shadow: 0 0 3px #ff0;
}

.game-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
}

.pacman-container {
    position: relative;
    width: 600px;
    height: 405px;
    background: #000;
    border-radius: 10px;
    border: 3px solid #ff69b4;
    box-shadow: inset 0 0 20px #ff69b4;
    overflow: hidden;
}

.pacman {
    position: absolute;
    width: 10px;
    height: 10px;
    object-fit: cover;
    object-position: 0 0;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 3px #ff0);
}

[data-direction="0"] { transform: scaleX(1) rotate(0deg); }
[data-direction="1"] { transform: scaleX(-1) rotate(0deg); }
[data-direction="2"] { transform: rotate(-90deg); }
[data-direction="3"] { transform: rotate(90deg); }

body.paused .pacman {
    opacity: 0.7;
    filter: grayscale(50%) drop-shadow(0 0 3px #ff0);
}

.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.joystick {
    position: relative;
    width: 70px;
    height: 70px;
    background: #000;
    border-radius: 50%;
    border: 1px solid #ff69b4;
    box-shadow: 0 0 5px #ff69b4;
}

.joystick-knob {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transition: all 0.1s ease;
    box-shadow: 0 0 5px #fff;
}

.joystick-knob[data-direction="0"] { transform: translate(calc(-50% + 8px), -50%); }
.joystick-knob[data-direction="1"] { transform: translate(calc(-50% - 8px), -50%); }
.joystick-knob[data-direction="2"] { transform: translate(-50%, calc(-50% - 8px)); }
.joystick-knob[data-direction="3"] { transform: translate(-50%, calc(-50% + 8px)); }
.joystick-knob[data-direction="center"] { transform: translate(-50%, -50%); }

.joystick-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.joystick-arrow:hover {
    background: #ff69b4;
    transform: scale(1.1);
}

.joystick-arrow:active {
    transform: scale(0.9);
}

.up { top: 3px; left: 50%; transform: translateX(-50%); }
.down { bottom: 3px; left: 50%; transform: translateX(-50%); }
.left { left: 3px; top: 50%; transform: translateY(-50%); }
.right { right: 3px; top: 50%; transform: translateY(-50%); }

.up:hover { transform: translateX(-50%) scale(1.1); }
.down:hover { transform: translateX(-50%) scale(1.1); }
.left:hover { transform: translateY(-50%) scale(1.1); }
.right:hover { transform: translateY(-50%) scale(1.1); }

.wall {
    background: #2121ff;
    border: 0.5px solid #0000aa;
    box-shadow: inset 0 0 1px #fff;
}

.ghost {
    position: absolute;
    transition: transform 0.1s;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
}

.ghost.frightened {
    filter: brightness(1.2) hue-rotate(180deg);
    animation: frighten 0.3s alternate infinite;
}

.ghost.eyes {
    filter: brightness(0) invert(1);
}

@keyframes frighten {
    0% { filter: brightness(1.2) hue-rotate(180deg); }
    100% { filter: brightness(1.5) hue-rotate(200deg); }
}

.ghost-red, .ghost-pink, .ghost-cyan, .ghost-orange {
    background: transparent;
}