/*
 * Rupa Bet public/player mobile canvas
 *
 * Phones (480px and below) keep their existing page CSS untouched. Wider
 * screens render the same mobile layout inside a centered 480px canvas.
 */

/* Shared player primitives provide a safe fallback. The selected website
   theme is linked after this stylesheet and supplies its selected palette. */
:where(.player-page-header) {
    color: #ffffff;
    background-color: #003333;
}

:where(.player-primary-action) {
    color: #ffffff;
    background-color: #003333;
    border-color: #003333;
}

@media (min-width: 481px) {
    html {
        --mobile-canvas-width: 480px;
        --mobile-canvas-gutter: calc(50% - 240px);
        min-width: 100%;
        min-height: 100%;
        background: #021510;
        overflow-x: hidden;
    }

    /* The direct-child selector keeps centering ahead of Tailwind CDN's
       late body margin reset through normal cascade specificity. */
    html > body {
        width: 100%;
        max-width: var(--mobile-canvas-width);
        min-height: 100vh;
        box-sizing: border-box;
        margin: 0 auto;
        overflow-x: hidden;
        position: relative;
        box-shadow: none;
    }

    /* Viewport-fixed UI follows the centered mobile canvas. */
    html body .bottom-nav-fixed,
    html body .guest-nav,
    html body .fixed.left-0.w-full,
    html body .fixed.inset-0,
    html body #allProvModal,
    html body .filter-modal,
    html body #loader,
    html body #ddOverlay,
    html body #commonOverlay,
    html body #promoModal,
    html body #appDownloadModal {
        box-sizing: border-box;
        width: 100%;
        max-width: var(--mobile-canvas-width);
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
    }

    html body > .fixed.top-4.left-4.right-4 {
        box-sizing: border-box;
        width: calc(100% - 32px);
        max-width: 448px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
    }

    /* Fixed page controls align to the canvas edges. */
    html body .close-game {
        right: calc(var(--mobile-canvas-gutter) + 15px);
    }

    html body .mobile-canvas-fixed-back {
        left: calc(var(--mobile-canvas-gutter) + 15px);
    }
}