/**
 * Arcade lock-in: centered mobile column (max 600px) including header.
 * Opt in with html[data-arcade-lockin="1"].
 */

/* While lock-in is open, freeze the page under the overlay (no footer peek). */
html:has(#lockin-container.active),
html:has(#lockin-container.active) body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    padding-top: 0 !important;
}

html:has(#lockin-container.active) .modern-footer,
html:has(#lockin-container.active) footer.modern-footer,
html:has(#lockin-container.active) .tp-shell-nav,
html:has(#lockin-container.active) .tp-shell-header,
html:has(#lockin-container.active) #navbar,
html:has(#lockin-container.active) .persisted-navbar,
html:has(#lockin-container.active) .tpping-navbar {
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-arcade-lockin="1"] #lockin-container,
html[data-arcade-lockin="1"] #lockin-container.active {
    align-items: center !important;
    justify-content: flex-start !important;
    background: var(--bg) !important;
}

html[data-arcade-lockin="1"] #lockin-container .lockin-shell,
html[data-arcade-lockin="1"] #lockin-container.active .lockin-shell {
    width: 100% !important;
    max-width: 600px !important;
    height: 100% !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    background: var(--bg) !important;
    box-shadow: none !important;
}

html[data-arcade-lockin="1"] #lockin-container .lockin-header {
    width: 100% !important;
    max-width: 100% !important;
    background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
    border-bottom-color: var(--border, rgba(255, 255, 255, 0.08)) !important;
}

html[data-arcade-lockin="1"] #lockin-container .lockin-header h2,
html[data-arcade-lockin="1"] #lockin-container .lockin-title {
    color: var(--text) !important;
}

html[data-arcade-lockin="1"] #lockin-container .btn-exit {
    color: var(--text) !important;
    background: var(--s2) !important;
    border-color: var(--border) !important;
}

html[data-arcade-lockin="1"] #lockin-container .btn-exit:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.28) !important;
    color: #fff !important;
}

html[data-arcade-lockin="1"] #lockin-container .demo-banner {
    width: 100% !important;
}

html[data-arcade-lockin="1"] #lockin-container .lockin-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

html[data-arcade-lockin="1"] #lockin-container #game-canvas-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    background: var(--bg) !important;
}

html[data-arcade-lockin="1"] #lockin-container #game-canvas-wrapper #app {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: 100% !important;
}


/* Lobby cards must not inherit arcade hard bottom lips / thick borders */
html[data-game-page] .gm-wrap .card,
html[data-game-page] .cb-wrap .card,
html[data-game-page] .cc-wrap .card,
html[data-game-page] .pr-wrap .card,
html[data-game-page] .tm-wrap .card,
html[data-game-page] main .card {
    background: var(--s1) !important;
    border: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: none !important;
    animation: none !important;
    text-align: left !important;
    color: var(--text) !important;
}
html[data-game-page] .gm-wrap .card h1,
html[data-game-page] .cb-wrap .card h1,
html[data-game-page] .cc-wrap .card h1,
html[data-game-page] main .card h1 {
    font: inherit !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: normal !important;
    margin: 0 0 12px !important;
    color: var(--text) !important;
}