.room-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #111;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Background image that covers everything */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.7);
}

.game-board {
    position: absolute; /* Absolute centering on the wood */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 95vw;
    max-width: 500px;
    max-height: 500px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    place-items: center;
    z-index: 2;
}

.center-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    width: 250px;
    height: 250px;
}

.bottle-circle {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}






/* Grid-based positioning for 12 players */
.pos-1 { grid-area: 1 / 1; justify-self: center; align-self: flex-start; }
.pos-2 { grid-area: 1 / 2; grid-column: 2 / span 1; justify-self: center; align-self: flex-start; margin-top: -10px; }
.pos-3 { grid-area: 1 / 4; grid-column: 4 / span 1; justify-self: center; align-self: flex-start; margin-top: -10px; }
.pos-4 { grid-area: 1 / 5; justify-self: center; align-self: flex-start; }

.pos-5 { grid-area: 2 / 1; justify-self: flex-start; align-self: center; margin-left: -5px; }
.pos-6 { grid-area: 4 / 1; justify-self: flex-start; align-self: center; margin-left: -5px; }

.pos-7 { grid-area: 2 / 5; justify-self: flex-end; align-self: center; margin-right: -5px; }
.pos-8 { grid-area: 4 / 5; justify-self: flex-end; align-self: center; margin-right: -5px; }

.pos-9 { grid-area: 5 / 1; justify-self: center; align-self: flex-end; }
.pos-10 { grid-area: 5 / 2; grid-column: 2 / span 1; justify-self: center; align-self: flex-end; margin-bottom: -10px; }
.pos-11 { grid-area: 5 / 4; grid-column: 4 / span 1; justify-self: center; align-self: flex-end; margin-bottom: -10px; }
.pos-12 { grid-area: 5 / 5; justify-self: center; align-self: flex-end; }