/**
 * Mobil play: oyun tam ekran (%90 tahta); kod soldan çekmece — masaüstü düzeni (palet | kod).
 */

@media screen and (min-width: 1025px) {
    .code-panel-drawer-toggle,
    .code-drawer-backdrop {
        display: none !important;
    }
}

body.play-mode-info .code-panel-drawer-toggle,
body.play-mode-info .code-drawer-backdrop,
body.play-mode-ai-training .code-panel-drawer-toggle,
body.play-mode-ai-training .code-drawer-backdrop {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    body.play-mobile-drawer {
        --mobile-palette-rail: 68px;
        --mobile-code-column: min(58vw, 300px);
        --code-drawer-inner: calc(var(--mobile-palette-rail) + var(--mobile-code-column));
        --code-drawer-width: min(92vw, calc(var(--code-drawer-inner) + 16px));
        --code-drawer-toggle-w: 42px;
        --mobile-chip-size: 52px;
        --mobile-control-size: 56px;
        --game-stage-fill: 0.9;
        --mobile-block-stack-pull: 2px;
        --mobile-block-stack-pull-nested: 1px;
    }

    body.play-mobile-drawer {
        padding: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.play-mobile-drawer.play-code-drawer-open {
        overflow: hidden !important;
    }

    body.play-mobile-drawer .main-container {
        display: block !important;
        position: relative !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: var(--p-topbar-h) 0 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* Kod paneli akışta yer kaplamasın */
    body.play-mobile-drawer .code-panel {
        position: fixed !important;
        top: var(--p-topbar-h) !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: var(--z-play-code-drawer, 50) !important;
        width: var(--code-drawer-width) !important;
        min-width: var(--code-drawer-width) !important;
        max-width: var(--code-drawer-width) !important;
        height: calc(100dvh - var(--p-topbar-h)) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 4px 5px 4px 3px !important;
        transform: translate3d(-100%, 0, 0) !important;
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.32s !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border-radius: 0 14px 14px 0 !important;
        border-right: 4px solid var(--game-frame-dark) !important;
        border-bottom: 0 !important;
        box-shadow: 12px 0 40px rgba(45, 26, 12, 0.35) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        --p-palette-rail: var(--mobile-palette-rail) !important;
        --p-code-column: var(--mobile-code-column) !important;
    }

    body.play-mobile-drawer .code-panel.is-open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.play-mobile-drawer .code-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--z-play-backdrop, 48);
        background: rgba(15, 23, 42, 0.22);
        backdrop-filter: blur(1px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    body.play-mobile-drawer .code-drawer-backdrop:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
    }

    /* Oyun — ekranın ~%90'ı */
    body.play-mobile-drawer .game-area {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: calc(100dvh - var(--p-topbar-h)) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    body.play-mobile-drawer .oyun-alani {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        container-type: size !important;
        container-name: game-stage !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.play-mobile-drawer .game-board {
        min-width: 0 !important;
        width: min(
            calc(var(--game-stage-fill) * 100cqw),
            calc(var(--game-stage-fill) * 100cqh * var(--aspect-ratio, 1))
        ) !important;
        max-width: calc(var(--game-stage-fill) * 100vw) !important;
        max-height: calc(var(--game-stage-fill) * (100dvh - var(--p-topbar-h))) !important;
        height: auto !important;
    }

    @supports not (width: 1cqw) {
        body.play-mobile-drawer .game-board {
            width: min(
                calc(var(--game-stage-fill) * 100vw),
                calc(var(--game-stage-fill) * (100dvh - var(--p-topbar-h)) * var(--aspect-ratio, 1))
            ) !important;
            max-width: calc(var(--game-stage-fill) * 100vw) !important;
            max-height: calc(var(--game-stage-fill) * (100dvh - var(--p-topbar-h))) !important;
        }
    }

    /* Masaüstü yatay düzen: sol palet, sağ kod */
    body.play-mobile-drawer .code-panel .panel-container {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background:
            radial-gradient(ellipse 90% 55% at 50% 0%, var(--p-palette-glow), transparent 70%) 0 0 / var(--p-palette-rail) 100% no-repeat,
            linear-gradient(175deg, var(--p-palette-bg0) 0%, var(--p-palette-bg1) 100%) 0 0 / var(--p-palette-rail) 100% no-repeat,
            linear-gradient(180deg, var(--game-code-paper) 0%, var(--game-code-paper-deep) 100%) var(--p-palette-rail) 0 0 / calc(100% - var(--p-palette-rail)) 100% no-repeat !important;
    }

    body.play-mobile-drawer .code-panel .commands-section {
        flex: 0 0 var(--p-palette-rail) !important;
        width: var(--p-palette-rail) !important;
        min-width: var(--p-palette-rail) !important;
        max-width: var(--p-palette-rail) !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 3px solid rgba(255, 213, 79, 0.45) !important;
        border-bottom: 0 !important;
        padding: 6px 2px 6px !important;
        box-shadow:
            inset -2px 0 12px rgba(0, 0, 0, 0.25),
            2px 0 0 rgba(255, 255, 255, 0.06) !important;
    }

    body.play-mobile-drawer .code-panel .vertical-separator {
        display: none !important;
    }

    body.play-mobile-drawer .code-panel #codeBlocks.code-blocks {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 6px !important;
        display: flex !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }

    body.play-mobile-drawer .code-panel #codeBlocks .palette-chip,
    body.play-mobile-drawer .code-panel #codeBlocks .code-block.palette-chip {
        width: var(--mobile-chip-size) !important;
        height: var(--mobile-chip-size) !important;
        max-width: var(--mobile-chip-size) !important;
        min-height: var(--mobile-chip-size) !important;
        margin: 0 auto !important;
    }

    body.play-mobile-drawer .code-panel #codeBlocks .palette-chip-icon i {
        font-size: 1.15rem !important;
    }

    body.play-mobile-drawer .code-panel .palette-view-controls .control-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    body.play-mobile-drawer .code-panel .palette-view-controls .control-button i {
        font-size: 1.1rem !important;
    }

    body.play-mobile-drawer .code-panel .code-section {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.play-mobile-drawer .code-panel .code-section__zoom-bar {
        flex-shrink: 0 !important;
        padding: 3px 4px !important;
    }

    body.play-mobile-drawer .code-panel .code-zoom-btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    body.play-mobile-drawer .code-panel .code-container-dis {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        padding: 6px !important;
    }

    body.play-mobile-drawer .code-panel .code-container-zoom-viewport {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Yakınlaştırma yalnızca #codeContainer --code-scale ile (çift zoom boşluk yapar) */

    body.play-mobile-drawer .code-panel .code-section > .floating-controls {
        gap: 10px !important;
        padding: 0 8px 10px !important;
    }

    body.play-mobile-drawer .code-panel .code-section > .floating-controls .control-button {
        width: var(--mobile-control-size) !important;
        height: var(--mobile-control-size) !important;
        min-width: var(--mobile-control-size) !important;
        min-height: var(--mobile-control-size) !important;
    }

    body.play-mobile-drawer .code-panel .code-section > .floating-controls .control-button i {
        font-size: 1.35rem !important;
    }

    body.play-mobile-drawer .code-panel .code-section > .floating-controls .code-trash-zone {
        width: calc(var(--mobile-control-size) * 2) !important;
        min-width: calc(var(--mobile-control-size) * 2) !important;
        height: var(--mobile-control-size) !important;
        min-height: var(--mobile-control-size) !important;
    }

    body.play-mobile-drawer .code-panel .code-section > .floating-controls .code-trash-zone i {
        font-size: 1.35rem !important;
    }

    /* Kod sekmesi — parşömen + ahşap çerçeve (zoom bar / kontrol butonları ile uyumlu) */
    body.play-mobile-drawer .code-panel-drawer-toggle {
        position: fixed;
        z-index: var(--z-play-code-toggle, 52);
        top: calc(var(--p-topbar-h) + 50%);
        left: 0;
        transform: translateY(-50%);
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: var(--code-drawer-toggle-w);
        padding: 10px 14px 10px 10px;
        border: 3px solid var(--game-frame-dark);
        border-left: 0;
        border-radius: 0 16px 16px 0;
        background: linear-gradient(165deg, #fffef9 0%, var(--game-code-paper) 45%, #e8d4b0 100%);
        color: var(--game-code-ink);
        font-family: 'Space Grotesk', 'Quicksand', sans-serif;
        cursor: pointer;
        box-shadow:
            0 3px 0 var(--game-frame-dark),
            6px 6px 22px rgba(45, 26, 12, 0.18);
        transition:
            left 0.32s cubic-bezier(0.32, 0.72, 0, 1),
            background 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.15s ease;
    }

    body.play-mobile-drawer .code-panel-drawer-toggle:hover {
        filter: brightness(1.03);
        transform: translateY(-50%) translateX(1px);
    }

    body.play-mobile-drawer .code-panel-drawer-toggle:active {
        transform: translateY(-50%) translateY(2px);
        box-shadow:
            0 1px 0 var(--game-frame-dark),
            4px 4px 14px rgba(45, 26, 12, 0.16);
    }

    body.play-mobile-drawer .code-panel-drawer-toggle:focus-visible {
        outline: 2px solid rgba(95, 165, 107, 0.75);
        outline-offset: 2px;
    }

    body.play-mobile-drawer .code-panel-drawer-toggle__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 11px;
        border: 2px solid var(--game-frame-dark);
        background: linear-gradient(145deg, #5fcf80 0%, #34b364 100%);
        color: #fff;
        box-shadow:
            0 2px 0 var(--game-frame-dark),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    body.play-mobile-drawer .code-panel-drawer-toggle__icon i {
        font-size: 0.8rem;
        line-height: 1;
        transition: transform 0.28s ease;
    }

    body.play-mobile-drawer .code-panel-drawer-toggle__label {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1.1;
        color: var(--game-code-ink);
        writing-mode: horizontal-tb;
        transform: none;
    }

    body.play-mobile-drawer.play-code-drawer-open .code-panel-drawer-toggle {
        left: var(--code-drawer-width);
        background: linear-gradient(165deg, #f8f0dc 0%, #e6d4b0 100%);
    }

    body.play-mobile-drawer.play-code-drawer-open .code-panel-drawer-toggle__icon {
        background: linear-gradient(145deg, #6eb6ff 0%, #3b82f6 100%);
    }

    body.play-mobile-drawer.play-code-drawer-open .code-panel-drawer-toggle__icon i {
        transform: rotate(180deg);
    }

    /* Kod yığını — mobilde orta boşluk (--mobile-block-stack-pull ile ayarlanır) */
    body.play-mobile-drawer #codeContainer.code-container {
        gap: 0 !important;
        row-gap: 0 !important;
    }

    body.play-mobile-drawer #codeContainer > .code-block:not(.palette-chip) {
        margin-bottom: 0 !important;
    }

    body.play-mobile-drawer #codeContainer > .code-block:not(.palette-chip):not(.start-block) {
        margin-top: calc(var(--mobile-block-stack-pull) * -1) !important;
    }

    body.play-mobile-drawer #codeContainer > .start-block {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }

    body.play-mobile-drawer #codeContainer > .if-block:not(.palette-chip),
    body.play-mobile-drawer #codeContainer > .loop-block:not(.palette-chip) {
        margin-top: calc(var(--mobile-block-stack-pull) * -1) !important;
        margin-bottom: 0 !important;
    }

    body.play-mobile-drawer #codeContainer .loop-content:not(.scratch-repeat__slot) > .code-block:not(:first-child),
    body.play-mobile-drawer #codeContainer .if-true-content:not(.scratch-if__slot) > .code-block:not(:first-child),
    body.play-mobile-drawer #codeContainer .if-false-content:not(.scratch-if__slot) > .code-block:not(:first-child),
    body.play-mobile-drawer #codeContainer .scratch-repeat__slot > .code-block:not(:first-child),
    body.play-mobile-drawer #codeContainer .scratch-if__slot > .code-block:not(:first-child) {
        margin-top: calc(var(--mobile-block-stack-pull-nested) * -1) !important;
        margin-bottom: 0 !important;
    }

    body.play-mobile-drawer .floating-score-shell {
        z-index: var(--z-play-floating-score, 54);
        top: max(8px, env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
    }

    body.play-mobile-drawer .level-indicator-container {
        z-index: var(--z-play-level-nav, 56);
    }
}

@media screen and (max-width: 480px) {
    body.play-mobile-drawer {
        --mobile-palette-rail: 64px;
        --mobile-code-column: min(62vw, 280px);
        --code-drawer-width: min(94vw, calc(var(--code-drawer-inner) + 16px));
        --mobile-chip-size: 50px;
        --mobile-control-size: 54px;
        --code-drawer-toggle-w: 44px;
    }

    body.play-mobile-drawer .code-panel-drawer-toggle {
        gap: 6px;
        padding: 9px 12px 9px 8px;
    }

    body.play-mobile-drawer .code-panel-drawer-toggle__icon {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 380px) {
    body.play-mobile-drawer {
        --mobile-code-column: min(64vw, 250px);
        --mobile-palette-rail: 60px;
        --mobile-chip-size: 48px;
        --mobile-control-size: 52px;
    }
}