/* Raika external slot player.
   Loaded only by the lobby because these states belong to the iframe player,
   not to the global color theme. */

/* Inline external games: match the legacy lobby iframe flow. */
body.raika-slot-inline #slot-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.raika-slot-inline .raika-slot-toolbar {
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) minmax(0, auto) minmax(160px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid #26313d !important;
    border-radius: 14px !important;
    background: #111820 !important;
    box-shadow: none !important;
}

body.raika-slot-inline .raika-slot-toolbar .raika-play-back {
    justify-self: start !important;
}

body.raika-slot-inline .raika-slot-toolbar .raika-play-title {
    justify-self: center !important;
    min-width: 0 !important;
    text-align: center !important;
}

body.raika-slot-inline .raika-slot-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.raika-slot-inline .raika-slot-toolbar .raika-play-fullscreen {
    display: grid !important;
    justify-self: end !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    color: #d1dbe8 !important;
    background: #1b222a !important;
    border-color: #2f3c4b !important;
}

body.raika-slot-inline .raika-slot-toolbar .raika-play-fullscreen span {
    display: none !important;
}

body.raika-slot-inline .raika-slot-toolbar .raika-play-fullscreen svg {
    width: 20px !important;
    height: 20px !important;
}

body.raika-slot-inline .raika-slot-mode-control {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

body.raika-slot-inline .raika-slot-mode-control > label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
}

body.raika-slot-inline .raika-slot-mode-control .label-text {
    color: #a8b3c3 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body.raika-slot-inline .raika-slot-frame {
    width: 100% !important;
    height: calc(100dvh - 180px) !important;
    min-height: 520px !important;
    overflow: hidden !important;
    border: 1px solid rgba(87, 119, 169, 0.22) !important;
    border-radius: 16px !important;
    background: #000 !important;
}

body.raika-slot-inline .raika-slot-frame iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
}

body.raika-slot-inline #slot-container > .absolute {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 1023px) {
    body.raika-slot-inline .raika-slot-toolbar {
        border-radius: 0 !important;
    }
}

@media (max-width: 767px) {
    body.raika-slot-inline {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html body.raika-body.raika-slot-inline:not(.raika-slot-immersive) .raika-app-content {
        position: fixed !important;
        top: 64px !important;
        right: 0 !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        z-index: 60 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body.raika-slot-inline #slot-container {
        display: flex !important;
        height: 100% !important;
        gap: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body.raika-slot-inline .raika-slot-toolbar {
        grid-template-columns: 40px minmax(56px, 1fr) auto !important;
        flex: 0 0 58px !important;
        width: 100% !important;
        min-height: 58px !important;
        gap: 6px !important;
        padding: 7px 9px !important;
        border-width: 0 0 1px !important;
        border-color: #26394e !important;
        border-radius: 0 !important;
        background: #0d1c2d !important;
    }

    body.raika-slot-inline .raika-slot-toolbar .raika-play-back {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.raika-slot-inline .raika-slot-toolbar .raika-play-back span {
        display: none !important;
    }

    body.raika-slot-inline .raika-slot-toolbar .raika-play-title strong {
        display: block !important;
        max-width: 28vw !important;
        overflow: hidden !important;
        font-size: 13px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.raika-slot-inline .raika-slot-toolbar .raika-play-title span {
        display: block !important;
        max-width: 28vw !important;
        overflow: hidden !important;
        font-size: 9px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.raika-slot-inline .raika-slot-toolbar-actions {
        gap: 5px !important;
    }

    body.raika-slot-inline .raika-slot-toolbar .raika-play-fullscreen {
        display: none !important;
    }

    body.raika-slot-inline .raika-slot-mode-control > label {
        gap: 4px !important;
        min-height: 36px !important;
        padding: 0 !important;
    }

    body.raika-slot-inline .raika-slot-mode-control .label-text {
        font-size: 10px !important;
    }

    body.raika-slot-inline .raika-slot-mode-control .toggle {
        flex: 0 0 auto !important;
    }

    body.raika-slot-inline .raika-slot-frame {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
    }

    body.raika-slot-inline .raika-slot-frame iframe {
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
}

body.raika-slot-immersive {
    overflow: hidden !important;
}

body.raika-slot-immersive .raika-topbar,
body.raika-slot-immersive .raika-sidebar-wrap,
body.raika-slot-immersive .raika-mobile-bottom-nav,
body.raika-slot-immersive .raika-mobile-swipe-zone,
body.raika-slot-immersive #games-page-head,
body.raika-slot-immersive #search-results,
body.raika-slot-immersive .raika-home,
body.raika-slot-immersive .raika-footer {
    display: none !important;
}

body.raika-slot-immersive .drawer-content {
    grid-column: 1 / -1 !important;
}

body.raika-slot-immersive .raika-page,
body.raika-slot-immersive .raika-app-content {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.raika-slot-immersive #slot-container {
    display: flex !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
}

body.raika-slot-immersive .raika-slot-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
}

body.raika-slot-immersive .raika-slot-frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Slot iframe mode must hide all lobby controls, including late mobile overrides. */
body.raika-slot-immersive .raika-home,
body.raika-slot-immersive .raika-home.is-games-view,
body.raika-slot-immersive .raika-home > .raika-searchbar,
body.raika-slot-immersive .raika-home.is-games-view > .raika-searchbar,
body.raika-slot-immersive #home-sections,
body.raika-slot-immersive #games-page-head,
body.raika-slot-immersive #search-results,
body.raika-slot-immersive #providers-wrap,
body.raika-slot-immersive .raika-footer,
body.raika-slot-inline .raika-home,
body.raika-slot-inline .raika-home.is-games-view,
body.raika-slot-inline .raika-home > .raika-searchbar,
body.raika-slot-inline .raika-home.is-games-view > .raika-searchbar,
body.raika-slot-inline #home-sections,
body.raika-slot-inline #games-page-head,
body.raika-slot-inline #search-results,
body.raika-slot-inline #providers-wrap,
body.raika-slot-inline .raika-footer {
    display: none !important;
}

/* Keep the lobby out of the document while an inline provider game is open.
   This app-level state outranks the compact mobile lobby layout below. */
html body.raika-body #app.raika-slot-active > :not(#slot-container) {
    display: none !important;
}

html body.raika-body #app.raika-slot-active > #slot-container {
    display: flex !important;
}

body.raika-body #exit-btn {
    display: none !important;
}

body.raika-slot-fullscreen #exit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    left: calc(14px + env(safe-area-inset-left, 0px)) !important;
    z-index: 20050 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    gap: 10px !important;
    border: 1px solid rgba(116, 183, 255, 0.18) !important;
    border-radius: 15px !important;
    color: #f7fbff !important;
    background: rgba(13, 23, 38, 0.82) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

body.raika-slot-fullscreen > #slot-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
}

body.raika-slot-fullscreen > #slot-container .raika-slot-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
}

body.raika-slot-fullscreen > #slot-container .raika-slot-frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.raika-slot-fullscreen #exit-btn svg {
    width: 21px !important;
    height: 21px !important;
}

@media (max-width: 767px) {
    body.raika-slot-fullscreen #exit-btn {
        width: 46px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    body.raika-slot-fullscreen #exit-btn span {
        display: none !important;
    }
}