.packman-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.packman-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.packman-title {
    font-weight: 700;
}

.packman-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.packman-score {
    font-weight: 600;
}

.packman-grid {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    aspect-ratio: var(--grid-cols) / var(--grid-rows);
    width: 100%; max-width: 700px; margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 32%),
        linear-gradient(180deg, #1b2735 0%, #13191f 100%);
}

.packman-cell {
    box-sizing: border-box;
    position: relative;
}

.packman-wall {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    background-image: url('./assets/ground-tile.png');
    background-size: 800% 800%;
    background-repeat: no-repeat;
  
}

.packman-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  filter: drop-shadow(0 3px 0px rgba(0,0,0,.3));
}

.packman-path {}

.packman-item {
    position: relative;
}

.packman-item::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.packman-item-coin::after {
    background: #ffd966;
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
}

.packman-item-bronze::after {
    background: radial-gradient(circle at 35% 35%, #e8974a, #a0522d);
    box-shadow: 0 0 5px rgba(160, 82, 45, 0.4);
}

.packman-item-silver::after {
    background: radial-gradient(circle at 35% 35%, #e8e8e8, #a0a0a0);
    box-shadow: 0 0 6px rgba(192, 192, 192, 0.5);
}

.packman-item-gold::after {
    background: radial-gradient(circle at 35% 35%, #ffe066, #ffa500);
    box-shadow: 0 0 8px rgba(255, 180, 0, 0.6);
}

.packman-item-heart::after {
    content: '♥';
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #ff4466;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70%;
    text-shadow: 0 0 5px rgba(255, 68, 102, 0.7);
}

/* ── Pac-Man ── */

.packman-player {
    overflow: visible;
}

.packman-chomp {
    animation: packman-chomp 0.28s ease-in-out infinite;
}

@keyframes packman-chomp {

    0%,
    100% {
        d: path('M50,50 L91,21 A50,50,0,1,0,91,79 Z');
    }

    50% {
        d: path('M50,50 L100,47 A50,50,0,1,0,100,53 Z');
    }
}

/* ── Ghosts ── */

.packman-enemy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packman-ghost-svg {
    overflow: visible;
}

.packman-ghost-body {
    animation: ghost-skirt 0.45s ease-in-out infinite;
}

@keyframes ghost-skirt {

    0%,
    100% {
        d: path('M0,28 Q5.3,36 10.7,28 Q16,36 21.3,28 Q26.7,36 32,28 L32,16 Q32,0 16,0 Q0,0 0,16 Z');
    }

    50% {
        d: path('M0,28 Q5.3,31 10.7,28 Q16,31 21.3,28 Q26.7,31 32,28 L32,16 Q32,0 16,0 Q0,0 0,16 Z');
    }
}

/* ── Lives ── */

.packman-lives {
    display: flex;
    gap: 3px;
    align-items: center;
}

.packman-heart {
    font-size: 1.15em;
    line-height: 1;
    transition: transform 0.15s ease;
}

.packman-heart-full {
    color: #ff4466;
    filter: drop-shadow(0 0 3px rgba(255, 68, 102, 0.55));
}

.packman-heart-empty {
    color: rgba(255, 255, 255, 0.2);
}

/* ── Hit flash ── */

.packman-player-hit {
    animation: packman-hit-flash 0.18s ease-in-out infinite;
}

@keyframes packman-hit-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.1; }
}

/* ── UI ── */

.packman-victory-score {
    font-size: 0.88em;
    font-weight: 400;
    margin-top: 6px;
    opacity: 0.8;
}

.packman-victory,
.packman-game-over {
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.packman-game-over {
    background: rgba(255, 70, 70, 0.14);
}

.packman-touch-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.packman-ctrl {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    touch-action: manipulation;
}

.packman-ctrl:active {
    background: rgba(255, 255, 255, 0.16);
}

.packman-loading,
.packman-error {
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-align: center;
}

@media (max-width: 640px) {
    .packman-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .packman-status {
        justify-content: space-between;
    }
}
 
 
 

[data-level="packman-medium"] .packman-wall {
    background-image: url('./assets/bg-medium.png');
}

[data-level="packman-hard"] .packman-wall {
    background-image: url('./assets/bg-hard.png');
}

[data-level="packman-level4"] .packman-wall {
    background-image: url('./assets/bg-level4.png');
}

[data-level="packman-level5"] .packman-wall {
    background-image: url('./assets/bg-level5.png'); 
}