/* Snake Escape responsive layout ---------------------------------------
 * Portrait and landscape rules are intentionally separated. Short portrait
 * phones never inherit the two-column landscape layout.
 */

/* Small and standard phones -------------------------------------------- */
@media (max-width: 599px) {
    :root { --hud-height: 76px; --controls-height: 80px; }

    .screen-menu {
        padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
    }
    .menu-layout {
        width: min(96vw, 660px);
        max-width: calc(100% - var(--safe-left) - var(--safe-right));
        max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
        gap: clamp(8px, 1.5vh, 14px);
        padding: clamp(12px, 4vw, 20px);
        overflow: hidden auto;
        overscroll-behavior: contain;
    }
    .menu-logo { max-height: min(31vh, 245px); }
    .menu-tagline { font-size: clamp(10px, 3vw, 14px); }
    .menu-actions { gap: 8px; }
    .game-button,
    .game-button-large { height: 60px; min-height: 60px; max-height: 60px; padding: 0 14px; font-size: clamp(16px, 4.5vw, 22px); }
    .menu-progress-card { padding: 8px 10px; }

    .screen-levels { grid-template-rows: auto auto minmax(0, 1fr); }
    .level-select-header { min-height: 70px; padding: calc(7px + var(--safe-top)) 8px 5px; }
    .screen-heading h1 { font-size: clamp(21px, 7vw, 30px); }
    .screen-heading p { display: none; }
    .level-select-header .icon-button { width: 44px; height: 44px; }
    .world-tabs {
        width: calc(100% - 12px);
        margin: 2px auto 0;
        padding: 5px 8px 10px;
    }
    .world-tab { min-width: 116px; padding: 8px 11px; }
    .level-scroller { position: relative; inset: auto; min-height: 0; padding: 10px 10px calc(22px + var(--safe-bottom)); }
    .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .level-card { border-radius: 17px; box-shadow: 0 5px 0 var(--ink), 0 9px 16px rgba(23,49,79,0.13); }

    .game-layout {
        width: min(100%, 720px);
        gap: 6px;
        padding:
            calc(6px + var(--safe-top))
            calc(8px + var(--safe-right))
            calc(6px + var(--safe-bottom))
            calc(8px + var(--safe-left));
    }
    .game-hud-top {
        width: 100%;
        gap: 5px;
        padding: 0;
    }
    .game-hud-top .icon-button { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink), 0 7px 12px rgba(23,49,79,0.12); }
    .level-chip { gap: 4px; padding: 6px 8px; box-shadow: 0 4px 0 var(--ink); }
    .difficulty-badge { display: none; }
    .game-hud-status {
        width: 100%;
        gap: 4px;
        justify-content: center;
    }
    .hearts-container { min-height: 36px; padding: 4px 6px; border-radius: 14px; }
    .heart-icon { width: clamp(19px, 6vw, 24px); height: clamp(19px, 6vw, 24px); }
    .score-pill { min-width: 72px; min-height: 36px; padding: 3px 6px; }
    .game-coins { min-height: 36px; padding-right: 8px; }
    .game-coins .coin-medallion { width: 26px; height: 26px; }

    .game-progress-panel {
        width: 100%;
        padding: 7px 9px;
        border-radius: 14px;
    }
    .game-controls {
        width: 100%;
        gap: 6px;
        justify-content: center;
        padding: 2px 0 6px;
    }
    .round-control {
        flex: 1 1 0;
        min-width: 0;
        max-width: 132px;
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        grid-template-rows: 26px auto;
        padding: 5px 3px;
        border-radius: 14px;
    }
    .round-control .icon-slot { width: 22px; height: 22px; }
    .round-control > span:last-child { font-size: 10px; }
    .tutorial-bubble {
        left: 50%;
        right: auto;
        bottom: calc(78px + var(--safe-bottom));
        grid-template-columns: 34px minmax(0, 1fr) 26px;
        width: calc(100% - 16px);
        max-height: min(120px, 22vh);
        padding: 8px;
        overflow: hidden auto;
        transform: translateX(-50%);
    }
    .tutorial-mascot { width: 34px; height: 34px; }
    .tutorial-bubble span { overflow-wrap: anywhere; }
    .combo-badge { top: 10%; right: 6px; min-width: 60px; padding: 6px; }
    .combo-badge strong { font-size: 21px; }

    .modal-overlay {
        align-items: center;
        padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
    }
    .modal-card {
        width: min(100%, 96vw);
        max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
        max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
        padding: 15px;
        border-radius: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: auto;
    }
    .settings-list { grid-template-columns: minmax(0, 1fr); }
    .setting-row { padding: 9px; }
    .setting-slider-row { grid-template-columns: minmax(78px, auto) minmax(70px, 1fr) 38px; padding: 9px; }
    .setting-icon { width: 34px; height: 34px; }
    .setting-copy { gap: 8px; }
    .setting-copy small { font-size: 9px; }
    .toggle-switch { width: 60px; height: 34px; }
    .toggle-switch span { width: 23px; height: 23px; }
    .toggle-switch[aria-checked="true"] span { left: 30px; }
    .settings-actions { grid-template-columns: 1fr; }
    .modal-sticky-header {
        top: -15px;
        margin: -15px -15px 12px;
        padding: 15px 15px 10px;
    }
    .modal-sticky-actions {
        bottom: -15px;
        margin: 12px -15px -15px;
        padding: 10px 15px 15px;
    }
    .result-modal { overflow: hidden auto; }
}

/* Very short portrait phones (including 320x568) ---------------------- */
@media (orientation: portrait) and (max-height: 640px) {
    .menu-layout { gap: 6px; padding: 10px 12px; }
    .menu-topbar .icon-button { width: 40px; height: 40px; }
    .currency-pill { min-height: 36px; }
    .menu-logo { max-height: 22vh; }
    .menu-tagline { display: none; }
    .game-button,
    .game-button-large { height: 60px; min-height: 60px; max-height: 60px; padding: 0 12px; font-size: 16px; box-shadow: 0 5px 0 var(--ink), 0 8px 13px rgba(23,49,79,0.13); }
    .menu-progress-card { gap: 4px; padding: 6px 8px; }

    .game-layout { gap: 4px; }
    .game-hud-top .icon-button { width: 38px; height: 38px; }
    .game-hud-status { justify-content: center; }
    .hearts-container, .score-pill, .game-coins { min-height: 32px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
    .heart-icon { width: 18px; height: 18px; }
    .score-pill span { display: none; }
    .game-progress-panel { padding-block: 5px; }
    .game-progress-track { height: 9px; }
    .game-controls { justify-content: center; padding-bottom: 4px; }
    .round-control {
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        grid-template-rows: 24px auto;
        border-width: 2px;
        box-shadow: 0 4px 0 var(--ink);
    }
    .round-control .icon-slot { width: 20px; height: 20px; }
    .tutorial-bubble { bottom: calc(72px + var(--safe-bottom)); max-height: 94px; }

    .modal-overlay { align-items: start; }
    .modal-card { margin-block: auto; }
    .modal-header h2, .compact-modal h2 { font-size: clamp(24px, 8vw, 34px); }
    .settings-modal { max-height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom)); }
}

/* Ultra narrow / high browser zoom ------------------------------------- */
@media (max-width: 319px) {
    .menu-layout { width: calc(100% - 8px); padding: 8px; }
    .menu-topbar { gap: 4px; }
    .currency-pill { padding-right: 6px; font-size: 13px; }
    .level-select-header { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .level-select-header .currency-pill { display: none; }
    .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-hud-top { width: 100%; }
    .level-chip strong { font-size: 12px; }
    .game-coins { display: none; }
    .game-hud-status { justify-content: center; }
    .tutorial-mascot { display: none; }
    .tutorial-bubble { grid-template-columns: minmax(0, 1fr) 24px; }
    .setting-copy small { display: none; }
    .setting-icon { display: none; }
    .toggle-switch { width: 54px; }
    .toggle-switch[aria-checked="true"] span { left: 24px; }
}

/* Tablets --------------------------------------------------------------- */
@media (min-width: 600px) {
    .menu-layout { width: min(82vw, 680px); }
    .level-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
    .game-layout { width: min(100%, 760px); gap: 10px; }
    .game-hud-status { justify-content: center; }
    .game-controls { gap: 14px; justify-content: center; }
    .round-control { min-width: 0; max-width: 140px; height: 60px; min-height: 60px; max-height: 60px; }
    .tutorial-bubble { bottom: calc(88px + var(--safe-bottom)); }
}

@media (min-width: 768px) {
    :root { --screen-max-width: 1180px; }
    .level-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .modal-card { border-width: 5px; }
    .game-layout { width: min(100%, 820px); }
    .game-progress-panel,
    .game-controls { width: 100%; }
}

/* Short landscape phones only ------------------------------------------ */
@media (orientation: landscape) and (min-width: 560px) and (max-height: 590px) {
    .screen-menu { padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(10px + var(--safe-left)); }
    .menu-layout {
        grid-template-columns: minmax(190px, .9fr) minmax(250px, 1.1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 7px 16px;
        width: min(96vw, 980px);
        max-height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));
        padding: 10px 16px;
        overflow: hidden auto;
    }
    .menu-topbar { grid-column: 1 / -1; }
    .menu-brand { grid-column: 1; grid-row: 2 / 4; }
    .menu-logo { max-height: 48vh; }
    .menu-tagline { margin-top: -10px; font-size: 11px; }
    .menu-actions { grid-column: 2; grid-row: 2; align-self: center; gap: 6px; }
    .menu-progress-card { grid-column: 2; grid-row: 3; }
    .game-button,
    .game-button-large { height: 60px; min-height: 60px; max-height: 60px; padding: 0 14px; font-size: 16px; box-shadow: 0 4px 0 var(--ink), 0 7px 12px rgba(23,49,79,.13); }

    .screen-levels { grid-template-rows: auto auto minmax(0, 1fr); }
    .level-select-header { min-height: 54px; padding-block: calc(4px + var(--safe-top)) 2px; }
    .screen-heading h1 { font-size: 23px; }
    .screen-heading p { display: none; }
    .world-tabs { width: calc(100% - 150px); margin-top: -49px; margin-bottom: 4px; min-height: 50px; }
    .world-tab { min-width: 105px; padding: 6px 9px; }
    .level-scroller { min-height: 0; padding-top: 6px; }
    .level-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }

    .game-layout {
        width: min(100%, 980px);
        grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.7fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        gap: 8px 14px;
        padding:
            calc(6px + var(--safe-top))
            calc(10px + var(--safe-right))
            calc(6px + var(--safe-bottom))
            calc(10px + var(--safe-left));
    }
    .game-hud-top { grid-column: 1 / -1; width: 100%; padding: 0; }
    .game-hud-status { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .canvas-stage { grid-column: 1; grid-row: 3 / 5; }
    .game-progress-panel {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        width: 100%;
    }
    .game-controls {
        grid-column: 2;
        grid-row: 4;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .round-control {
        flex: 1 1 90px;
        min-width: 90px;
        max-width: 140px;
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        grid-template-rows: 26px auto;
    }
    .round-control .icon-slot { width: 21px; height: 21px; }
    .tutorial-bubble {
        left: 50%;
        right: auto;
        bottom: calc(16px + var(--safe-bottom));
        width: min(46vw, 360px);
        max-height: min(124px, 34vh);
        transform: translateX(-50%);
    }
    .tutorial-bubble.is-bouncing { animation: none; }

    .modal-overlay { align-items: center; }
    .modal-card { max-height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom)); }
    .settings-modal { width: min(92vw, 800px); }
    .settings-list { grid-template-columns: 1fr 1fr; }
    .setting-slider-row { grid-column: span 1; }
    .settings-actions { grid-template-columns: 1fr auto; align-items: center; }
    .result-modal { overflow: hidden auto; }
}

/* Desktop --------------------------------------------------------------- */
@media (min-width: 1024px) {
    .app-shell::after { content: ""; position: absolute; inset: 18px; z-index: -1; border: 2px solid rgba(255,255,255,.2); border-radius: 34px; pointer-events: none; }
    .screen-menu { padding: 26px; }
    .menu-layout { width: min(600px, 52vw); }
    .level-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .level-card { aspect-ratio: 1; }
    .game-layout { width: min(100%, 860px); }
    .game-hud-top,
    .game-hud-status,
    .game-progress-panel,
    .game-controls { width: 100%; }
    .round-control { height: 60px; min-height: 60px; max-height: 60px; }
    .tutorial-bubble { width: min(480px, 90%); }
}

@media (min-width: 1440px) {
    :root { --screen-max-width: 1280px; }
    .menu-layout { width: 640px; }
    .level-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .game-layout { width: min(100%, 920px); }
}

@media (min-width: 1920px) {
    :root { --screen-max-width: 1480px; }
    .menu-layout { width: 700px; }
    .level-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .game-layout { width: min(100%, 980px); }
}

@media (orientation: landscape) and (min-height: 600px) {
    .screen-menu .menu-layout { max-height: 92dvh; }
    .game-layout { width: min(100%, 980px); }
}

@media (hover: hover) and (pointer: fine) {
    .round-control:hover, .level-card:hover, .world-tab:hover, .game-button:hover, .icon-button:hover { filter: brightness(1.04) saturate(1.06); }
}

@media print {
    body::before { content: "Snake Escape is an interactive game. Open it in a browser to play."; display: block; padding: 2rem; font: 700 18px/1.4 sans-serif; }
    #app { display: none; }
}

/* QuickGameRoom branding responsiveness --------------------------------- */
@media (max-width: 599px) {
    .company-corner-brand {
        top: calc(5px + var(--safe-top));
        right: calc(5px + var(--safe-right));
        width: clamp(30px, 10vw, 42px);
        opacity: 0.34;
    }

    .company-watermark-primary {
        width: min(76vw, 350px);
        opacity: 0.03;
    }

    .company-watermark-secondary {
        width: min(48vw, 230px);
    }

    .loading-company-brand,
    .menu-company-brand,
    .settings-company-brand {
        gap: 6px;
    }

    .loading-company-brand span,
    .menu-company-brand span,
    .settings-company-brand span {
        font-size: 7px;
        letter-spacing: 0.09em;
    }

    .loading-company-brand strong,
    .menu-company-brand strong,
    .settings-company-brand strong,
    .result-company-brand strong {
        font-size: 10px;
    }

    .settings-company-brand {
        padding: 6px 10px;
    }
}

@media (orientation: portrait) and (max-height: 640px) {
    .loading-company-brand {
        margin-top: 8px;
        padding-top: 8px;
    }

    .loading-company-brand img,
    .menu-company-brand img,
    .settings-company-brand img,
    .result-company-brand img {
        width: 26px;
        height: 26px;
    }

    .menu-company-brand {
        margin-top: 4px;
        padding: 4px 8px;
    }

    .settings-company-brand {
        margin-bottom: 8px;
    }

    .result-company-brand {
        margin-bottom: 4px;
    }
}

@media (orientation: landscape) and (min-width: 560px) and (max-height: 590px) {
    .company-corner-brand {
        width: 34px;
        opacity: 0.36;
    }

    .menu-company-brand {
        margin-top: 3px;
        padding: 4px 8px;
    }

    .menu-company-brand img {
        width: 26px;
        height: 26px;
    }

    .loading-company-brand,
    .settings-company-brand,
    .result-company-brand {
        transform: scale(0.9);
        transform-origin: center;
    }
}

@media (min-width: 1024px) {
    .company-corner-brand {
        width: 48px;
        opacity: 0.72;
    }
}