python-tdd/src/static_src/scss/_room.scss

$gate-node: 64px;
$gate-gap: 36px;
$gate-line: 2px;

.room-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.room-page .gear-btn,
#id_room_menu {
    z-index: 101;
}

.gate-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100;
}

.gate-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(var(--priUser), 1);

    .gate-header {
        text-align: center;
        h1 { margin: 0; }
        .gate-status-wrap {
            display: flex;
            justify-content: center;
            align-items: baseline;
            opacity: 0.5;
            font-size: 0.75em;
            text-transform: uppercase;
            letter-spacing: 0.15em;

            .status-dots {
                display: inline-flex;
                span {
                    display: inline-block;
                    width: 0.5em;
                    text-align: center;
                }
            }
        }
    }

    .gate-slots {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $gate-gap;

        .gate-slot {
            position: relative;
            width: $gate-node;
            height: $gate-node;
            border-radius: 50%;
            border: $gate-line solid rgba(var(--terUser), 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            &.filled {
                background: rgba(var(--terUser), 0.2);
            }

            .slot-number {
                font-size: 0.7em;
                opacity: 0.5;
            }

            .slot-gamer { display: none; }

            form {
                position: absolute;
                inset: 0;
            }

            .drop-token-btn {
                position: absolute;
                inset: 0;
                border-radius: 50%;
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                box-shadow:
                    0.05rem 0.05rem 0.5rem rgba(0, 0, 0, 1),
                ;
                font-size: 0;
                cursor: pointer;

                &:hover {
                    background: rgba(var(--quaUser), 0.15);
                    box-shadow:
                        -0.1rem -0.1rem 1rem rgba(var(--ninUser), 1),
                        -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 1),
                        0.05rem 0.05rem 0.5rem rgba(0, 0, 0, 1),
                    ;
                }
            }
        }
    }
}

// Mobile: 2×3 grid, both rows left-to-right
@media (max-width: 550px) {
    .gate-modal .gate-slots {
        display: grid;
        grid-template-columns: repeat(3, $gate-node);
        grid-template-rows: repeat(2, $gate-node);
        gap: $gate-gap;

        .gate-slot {
            &:nth-child(1) { grid-column: 1; grid-row: 1; }
            &:nth-child(2) { grid-column: 2; grid-row: 1; }
            &:nth-child(3) { grid-column: 3; grid-row: 1; }
            &:nth-child(4) { grid-column: 1; grid-row: 2; }
            &:nth-child(5) { grid-column: 2; grid-row: 2; }
            &:nth-child(6) { grid-column: 3; grid-row: 2; }
        }
    }
}