/**
 * Standalone browser fluid layout only.
 * Column stack: 768px–1100px (narrow desktop resize).
 * Wide side-by-side: min-width 1101px.
 * Mobile ≤767px and embed iframe are unchanged (original media-*.css + template embed styles).
 */

body[data-layout="standalone"] {
    --layout-gap: 4px;
    --layout-header: var(--headerHeightDynamic, 40px);
    --layout-history: var(--resultHistoryHeight, 32px);
    --layout-menu-width: clamp(300px, 23vw, 400px);
    --layout-bets-height: var(--betControlsHeightRow, 184px);
    --layout-left-menu-stack-height: clamp(240px, 34vh, 380px);
    --layout-field-min-height: clamp(200px, 36vh, 480px);
}

/* ── Column layout: standalone narrow desktop only ── */
@media (min-width: 768px) and (max-width: 1100px) {
    body[data-layout="standalone"] {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
        padding-top: 0 !important;
    }

    body[data-layout="standalone"] .top-game-widget,
    body[data-layout="standalone"] #lang-switcher {
        display: none !important;
    }

    body[data-layout="standalone"] #new-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--layout-header) !important;
        z-index: 1001 !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    body[data-layout="standalone"] #logo {
        flex-shrink: 0 !important;
        width: 72px !important;
        min-width: 56px !important;
    }

    body[data-layout="standalone"] #right-container {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-layout="standalone"] #game-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - var(--layout-header)) !important;
        margin-top: var(--layout-header) !important;
        padding: var(--layout-gap) !important;
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
    }

    body[data-layout="standalone"] #wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows:
            auto
            minmax(var(--layout-field-min-height), 1fr)
            auto
            auto !important;
        grid-template-areas:
            "history"
            "field"
            "bets"
            "menu" !important;
        gap: var(--layout-gap) !important;
        width: 100% !important;
        min-height: calc(100vh - var(--layout-header) - var(--layout-gap) * 2) !important;
    }

    body[data-layout="standalone"].embed-split-active #wrapper {
        grid-template-rows:
            auto
            minmax(var(--layout-field-min-height), 1fr)
            auto
            auto
            auto !important;
        grid-template-areas:
            "history"
            "field"
            "bets1"
            "bets2"
            "menu" !important;
    }

    body[data-layout="standalone"] #mid-wrapper {
        display: contents !important;
    }

    body[data-layout="standalone"] #last-counters-wrapper {
        grid-area: history !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--layout-history) !important;
        height: auto !important;
        z-index: 10 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body[data-layout="standalone"] #last-counters {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body[data-layout="standalone"] #last-counters .last-counters-row {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    body[data-layout="standalone"] #counterWrapper {
        grid-area: field !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: var(--layout-field-min-height) !important;
        max-height: none !important;
        --game-field-radius: 16px;
        z-index: 6 !important;
        box-sizing: border-box !important;
    }

    body[data-layout="standalone"] #canvas {
        width: 100% !important;
        top: var(--game-field-inner-top, 0px) !important;
        height: calc(100% - var(--game-field-inner-top, 0px)) !important;
        min-height: calc(var(--layout-field-min-height) - var(--game-field-inner-top, 0px)) !important;
    }

    body[data-layout="standalone"] #bottom-container {
        grid-area: bets !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: var(--layout-bets-height) !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
    }

    body[data-layout="standalone"] #bottom-container-left.active {
        grid-area: bets1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 144px !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
    }

    body[data-layout="standalone"] #bottom-container-right.active {
        grid-area: bets2 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 144px !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
    }

    body[data-layout="standalone"] #left-menu {
        grid-area: menu !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: var(--layout-left-menu-stack-height) !important;
        max-width: 100% !important;
        z-index: 5 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body[data-layout="standalone"] #left-menu .bets-block {
        position: absolute !important;
        inset: var(--paddingMedium) !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body[data-layout="standalone"] #left-menu .navigation-switcher {
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin: 0 0 var(--paddingSmall) 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        height: 36px !important;
    }

    body[data-layout="standalone"] #left-menu .top-tab-switcher {
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 0 var(--paddingSmall) 0 !important;
    }

    body[data-layout="standalone"] #left-menu .data-list,
    body[data-layout="standalone"] #left-menu .data-list-2,
    body[data-layout="standalone"] #left-menu .data-list-3 {
        grid-row: 3 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0 !important;
    }

    body[data-layout="standalone"] #left-menu .bets-list-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    body[data-layout="standalone"] {
        --layout-bets-height: var(--betControlsHeightColumn, 292px);
    }

    body[data-layout="standalone"] #bottom-container.auto-tab-active,
    body[data-layout="standalone"] #bottom-container-left.active.auto-tab-active,
    body[data-layout="standalone"] #bottom-container-right.active.auto-tab-active {
        height: 192px !important;
    }

    body[data-layout="standalone"] .bottom-navigation-container {
        margin-bottom: 8px !important;
    }
}

/* ── Wide desktop (standalone) ── */
@media (min-width: 1101px) {
    body[data-layout="standalone"] {
        overflow: hidden;
    }

    body[data-layout="standalone"] #new-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
    }

    body[data-layout="standalone"] #game-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--layout-header)) !important;
        min-height: calc(100vh - var(--layout-header)) !important;
        margin-top: var(--layout-header) !important;
        padding: var(--layout-gap) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
    }

    body[data-layout="standalone"] #wrapper,
    body[data-layout="standalone"] #mid-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: inherit !important;
    }

    body[data-layout="standalone"] #left-menu {
        position: absolute !important;
        top: var(--layout-gap) !important;
        left: var(--layout-gap) !important;
        bottom: var(--layout-gap) !important;
        width: var(--layout-menu-width) !important;
        height: auto !important;
        max-width: calc(100% - var(--layout-gap) * 2) !important;
        z-index: 5 !important;
    }

    body[data-layout="standalone"] #left-menu .bets-block {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body[data-layout="standalone"] #left-menu .data-list,
    body[data-layout="standalone"] #left-menu .data-list-2,
    body[data-layout="standalone"] #left-menu .data-list-3 {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body[data-layout="standalone"] #left-menu .bets-list-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    body[data-layout="standalone"] #last-counters-wrapper {
        position: absolute !important;
        top: var(--layout-gap) !important;
        left: calc(var(--layout-menu-width) + var(--layout-gap) * 2) !important;
        right: var(--layout-gap) !important;
        width: auto !important;
        min-height: var(--layout-history) !important;
        z-index: 1000 !important;
    }

    body[data-layout="standalone"] #counterWrapper {
        position: absolute !important;
        top: calc(var(--layout-history) + var(--layout-gap) * 2) !important;
        left: calc(var(--layout-menu-width) + var(--layout-gap) * 2) !important;
        right: var(--layout-gap) !important;
        bottom: calc(var(--layout-bets-height) + var(--layout-gap) * 2) !important;
        width: auto !important;
        height: auto !important;
        min-height: var(--layout-field-min-height) !important;
        --game-field-radius: 16px;
        z-index: 6 !important;
    }

    body[data-layout="standalone"] #canvas {
        width: 100% !important;
        top: var(--game-field-inner-top, 0px) !important;
        height: calc(100% - var(--game-field-inner-top, 0px)) !important;
    }

    body[data-layout="standalone"] #bottom-container {
        position: absolute !important;
        left: calc(var(--layout-menu-width) + var(--layout-gap) * 2) !important;
        right: var(--layout-gap) !important;
        bottom: var(--layout-gap) !important;
        width: auto !important;
        height: var(--layout-bets-height) !important;
        z-index: 5 !important;
    }

    body[data-layout="standalone"] #bottom-container-left.active,
    body[data-layout="standalone"] #bottom-container-right.active {
        position: absolute !important;
        bottom: var(--layout-gap) !important;
        height: var(--layout-bets-height) !important;
        z-index: 5 !important;
    }

    body[data-layout="standalone"] #bottom-container-left.active {
        left: calc(var(--layout-menu-width) + var(--layout-gap) * 2) !important;
        width: calc((100% - var(--layout-menu-width) - var(--layout-gap) * 3) / 2 - 2px) !important;
        right: auto !important;
    }

    body[data-layout="standalone"] #bottom-container-right.active {
        right: var(--layout-gap) !important;
        left: auto !important;
        width: calc((100% - var(--layout-menu-width) - var(--layout-gap) * 3) / 2 - 2px) !important;
    }

    body[data-layout="standalone"] #bottom-container.auto-tab-active,
    body[data-layout="standalone"] #bottom-container-left.active.auto-tab-active,
    body[data-layout="standalone"] #bottom-container-right.active.auto-tab-active {
        height: 192px !important;
    }
}