/* Force Mobile Layout */
:root {
    --lobby__max-width: 450px !important;
}

html {
    background-color: #000 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
}

body {
    max-width: 450px !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    background-color: #1c1e23 !important; /* Dark theme background */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    height: 100% !important;
    overflow-y: auto !important;
}

#app {
    width: 100% !important;
    max-width: 450px !important;
}

/* Ensure fixed elements are also constrained */
.ui-tabbar, .lobby-header, .ui-navbar {
    max-width: 450px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}

/* Fix for background scaling */
html[data-ui-contain='1'] {
    font-size: calc(450px / 7.5) !important;
}

@media (max-width: 450px) {
    html[data-ui-contain='1'] {
        font-size: calc(100vw / 7.5) !important;
    }
}