/* file: data/static/games/massive_snake/board.css */
.snake-board {
    border-collapse: collapse;
    margin-top: 1em;
    border: 6px solid #8b5a2b;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
    background: repeating-linear-gradient(
        45deg,
        #d2b48c,
        #d2b48c 10px,
        #deb887 10px,
        #deb887 20px
    );
}
.snake-board td { width: 26px; height: 26px; border: 1px solid #555; text-align: center; font-size: 0.78em; line-height: 1.1; }
.snake-board td.snake { background: #ffecec; position: relative; }
.snake-board td.ladder { background: #ecffec; position: relative; }
.snake-board td.snake .num { color: #900; }
.snake-board td.ladder .num { color: #060; }
.snake-board td.snake::before,
.snake-board td.ladder::before {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.8em;
    line-height: 1;
}
.snake-board td.snake::before { content: "🐍"; }
.snake-board td.ladder::before { content: "🪜"; }
.snake-board td .num { display:block; font-size:0.7em; color:#555; }

/* Larger controls */
.snake-button {
    font-size: 1.1em;
    padding: 0.4em 1.2em;
}

/* Distinct color for the Ascend button */
.ascend-button {
    background-color: #f08030;
    color: #fff;
}

/* Animated title when a player ascends */
.snake-title.ascended {
    display: inline-block;
    animation: snake-wave 1.5s ease-in-out 3;
    transform: scale(1.6);
    position: relative;
    z-index: 20;
}

.ascend-msg {
    margin-left: 0.5em;
    display: inline-block;
    position: relative;
    z-index: 20;
}

.roll-msg {
    margin-left: 0.5em;
    display: inline-block;
}

@keyframes snake-wave {
    0%, 100% { transform: scale(1.6) translateY(0); }
    25% { transform: scale(1.6) translateY(-6px) rotate(-5deg); }
    50% { transform: scale(1.6) translateY(6px) rotate(5deg); }
    75% { transform: scale(1.6) translateY(-6px) rotate(-5deg); }
}
