body {
    font-family: 'Pirata One', cursive, 'Trebuchet MS', sans-serif;
    background-color: #f5e9d3;
    /* parchment shade */
    color: #5b3a00;
    /* darker brown text */
    padding: 20px;
    text-shadow: 1px 1px 1px #c9b37c;
    margin: 0;

    /* ✅ Removed vertical centering to prevent scroll offset */
    /* height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
}

h1,
h2 {
    font-family: 'Pirata One', cursive;
    color: #5b3a00;
    text-shadow: 2px 2px 4px #c9b37c;
    margin-bottom: 15px;
    text-align: center;
}

.grid {
    display: grid;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    gap: 2px;
    margin-bottom: 20px;
}

.grid div {
    background-color: #8b4513;
    border: 2px solid #5a2d0c;
    box-shadow: inset 0 0 5px #deb887;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 30px;
    height: 30px;
}

.grid div.dug {
    background-color: #654321;
    cursor: default;
}

.grid div.treasure {
    background-color: #654321;
    /* Darker brown base */
    background-image: url('coin.png');
    /* treasure chest image */
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: default;
    box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.8);
    /* soft gold glow */
}

#leaderboard {
    background-color: #f0e4c2;
    /* lighter parchment */
    padding: 10px;
    border: 2px solid #5b3a00;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 0 0 10px #c9b37c;
    color: #5b3a00;
}

ol {
    padding-left: 20px;
    margin: 0;
}

ol li {
    margin-bottom: 6px;
    font-weight: bold;
    color: #5b3a00;
    text-shadow: 1px 1px 1px #c9b37c;
}

.grid div.cannonUsed {
    background-color: #222;
    background-image: url('ball.png');
    /* cannonball image */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: default;
    box-shadow: 0 0 6px 2px #555;
}

#cannon-message.fade-in {
    animation: popFade 0.6s ease;
}

@keyframes popFade {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#gold-explosion {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 999;
}

.gold-coin {
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/138/138292.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: coinBurst 1s ease-out forwards;
}

@keyframes coinBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(0.5);
    }
}

/* ✅ New: Cannon hit message style */
.message-cannon {
    color: red;
    font-weight: bold;
    animation: popFade 0.6s ease;
}

/* ✅ New: Victory message style */
.message-victory {
    color: #d4af37;
    /* classic rich gold */
    font-weight: bold;
    animation: popFade 1s ease-in-out;
    text-shadow: 1px 1px 4px rgba(80, 50, 0, 0.6);
    /* warm, soft shadow for depth */
}

#name-screen,
#game-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid {
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    gap: 2px;
    justify-content: center;
}

#leaderboard {
    margin: 0 auto;
}