.gtw-opening-artwork,
.gtw-opening-hud {
    display: none;
}

/*
 * Guess the Word: mobile landscape only.
 *
 * Keep every landscape-specific override in this file and scope it below
 * html.gtw-mobile-landscape. The JavaScript controller adds that class only
 * on a compact, touch-capable landscape viewport.
 */

@media screen and (orientation: landscape) and (max-width: 932px),
       screen and (orientation: landscape) and (max-height: 600px) {
    html.gtw-mobile-landscape {
        /*
         * Shared hooks for the outer menu page and the game iframe.
         * These variables intentionally do not change the current layout.
         */
        --gtw-landscape-viewport-width: 100vw;
        /*
         * JavaScript replaces this fallback with the visible viewport height
         * in pixels. This keeps the whole opening screen below large browser
         * address bars, including on browsers with unreliable vh units.
         */
        --gtw-landscape-viewport-height: 100vh;
        --gtw-landscape-safe-top: env(safe-area-inset-top, 0px);
        --gtw-landscape-safe-right: env(safe-area-inset-right, 0px);
        --gtw-landscape-safe-bottom: env(safe-area-inset-bottom, 0px);
        --gtw-landscape-safe-left: env(safe-area-inset-left, 0px);
        --gtw-opening-header-width: 93.5vw;
        /*
         * Fallback matching the game canvas top bar: 75px of a 550px stage.
         * JavaScript replaces this with an exact visible-viewport pixel value.
         */
        --gtw-landscape-opening-header-height:
            calc(100vh * 75 / 550);
        /*
         * NAVIGATION BUTTON CONTROLS
         * These values apply to both the opening and active game screens.
         */
        --gtw-nav-button-width: 40px;
        --gtw-nav-button-height: 40px;
        --gtw-nav-button-padding: 0px;
        --gtw-nav-button-top: calc(var(--gtw-landscape-safe-top) + 3px);
        --gtw-nav-button-left: calc(
            100vw -
            var(--gtw-landscape-safe-right) -
            var(--gtw-nav-button-width) -
            7px
        );

        /*
         * GAME SCREEN TOP BAR CONTROL
         * 1 keeps the original full width; lower values make the bar narrower.
         * The game canvas and play area always remain full width.
         */
        --gtw-game-header-scale-x: 0.935;
        --gtw-game-time-field-shift-x: -12;

        /*
         * OPENING SCREEN MENU CONTROLS
         * Change only these four values to move or resize the topic menu.
         */
        --gtw-opening-menu-top: calc(var(--gtw-landscape-opening-header-height) + -2px);
        --gtw-opening-menu-left: 2.3%;
        --gtw-opening-menu-width: 24%;
        --gtw-opening-menu-height: calc(
            var(--gtw-landscape-viewport-height) -
            var(--gtw-landscape-opening-header-height) -
            14px
        );
    }

    @supports (height: 100svh) {
        html.gtw-mobile-landscape {
            --gtw-landscape-viewport-height: 100svh;
        }
    }

    /* Collapse the decorative site header on the outer game page. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header {
        position: relative !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header .headerImage,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header .logo,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header #logo,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header #learning,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #header #note {
        display: none !important;
    }

    /* Use the full device width for the mobile-landscape experience. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body {
        width: 100%;
        max-width: none;
        height: var(--gtw-landscape-viewport-height);
        max-height: var(--gtw-landscape-viewport-height);
        overflow: hidden;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body {
        position: fixed;
        inset: 0;
        margin: 0;
    }

    /*
     * The game is a full-screen experience in landscape. Keeping the page
     * content below it out of the layout also prevents restored page scroll
     * positions from pushing the opening artwork behind the browser chrome.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #gameCursel,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu footer {
        display: none !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #game-main {
        width: var(--gtw-landscape-viewport-width) !important;
        max-width: none !important;
        height: auto !important;
        min-height: var(--gtw-landscape-viewport-height);
        margin: 0 !important;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-x: hidden;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .game-stage {
        flex: 0 0 auto;
        width: var(--gtw-landscape-viewport-width) !important;
        max-width: none !important;
        height: var(--gtw-landscape-viewport-height) !important;
        aspect-ratio: auto;
        margin: 0 !important;
        /*
         * Frame 33 of the atlas is the plain 770x550 wood background.
         * It may stretch because it contains no characters or lettering.
         */
        background-image:
            url("/guessTheWord/images/guessTheWord_atlas_1.png") !important;
        background-position: left top !important;
        background-repeat: no-repeat !important;
        background-size: 265.974026% 186.181818% !important;
        box-shadow:
            inset 4px 0 rgba(29, 20, 15, 0.72),
            inset -4px 0 rgba(29, 20, 15, 0.72);
        overflow: hidden;
    }

    /*
     * Restore the top strip at its original proportions. Only the area below
     * it is compressed to fit the short landscape viewport.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .game-stage::before {
        content: "";
        position: absolute;
        top: 0;
        right: auto;
        left: 0;
        z-index: 30;
        width: var(--gtw-opening-header-width);
        height: var(--gtw-landscape-opening-header-height);
        /*
         * The game screen's original header: atlas frame 35, 769x75.
         * The non-uniform scaling intentionally matches the full-width game
         * canvas, so both screens use the exact same bar graphic.
         */
        background-image:
            url("/guessTheWord/images/guessTheWord_atlas_1.png");
        background-position: 60.359656% 38.040043%;
        background-repeat: no-repeat;
        background-size: 266.319896% 1365.333333%;
        pointer-events: none;
    }

    /*
     * Opening HUD assembled from the same atlas parts and stage coordinates
     * as the active game HUD. The header's internal width is 719 of the
     * original 770 stage units after reserving the navigation column.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 31;
        display: block;
        width: var(--gtw-opening-header-width);
        height: var(--gtw-landscape-opening-header-height);
        overflow: hidden;
        pointer-events: none;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-sprite {
        position: absolute;
        display: block;
        background-image:
            url("/guessTheWord/images/guessTheWord_atlas_1.png");
        background-repeat: no-repeat;
    }

    /* Game logo: atlas frame 36, 166x53. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-logo {
        top: 10.666667%;
        left: 1.808%;
        width: 23.087%;
        height: 70.666667%;
        background-position: 89.001063% 27.806385%;
        background-size: 1233.73494% 1932.075472%;
    }

    /* Shared game input artwork: atlas frame 32, 100x28. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-answer,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-score-field,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-time-field {
        top: 18%;
        height: 38%;
        background-position: 93.069815% 18.172691%;
        background-size: 2048% 3657.142857%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-answer {
        left: 26.31%;
        width: 27.79%;
    }

    /* Original Score lettering: atlas frame 5, 192x62. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-score-label {
        top: 12%;
        left: 54.52%;
        width: 10.43%;
        height: 41%;
        background-position: 83.459052% 13.097713%;
        background-size: 1066.666667% 1651.612903%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-score-field {
        left: 65.5%;
        width: 13.77%;
    }

    /* Original Time lettering: atlas frame 25, 96x48. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-time-label {
        top: 15%;
        left: 79.69%;
        width: 5.84%;
        height: 32%;
        background-position: 94.928279% 34.221311%;
        background-size: 2133.333333% 2133.333333%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-hud-time-field {
        left: 86.37%;
        width: 12.24%;
    }

    /* Original atlas footer, stretched as a thin decorative bottom edge. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .game-stage::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 14;
        width: 100%;
        height: clamp(7px, 2.2vh, 13px);
        background-image:
            url("/guessTheWord/images/guessTheWord_atlas_1.png");
        background-position: 60.3125% 45.388601%;
        background-repeat: no-repeat;
        background-size: 266.666667% 1735.59322%;
        pointer-events: none;
    }

    /*
     * Opening artwork assembled from individual atlas sprites. Each element
     * keeps its original aspect ratio; only the wood and footer may stretch.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-artwork {
        position: absolute;
        top: var(--gtw-landscape-opening-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 12;
        display: block;
        overflow: hidden;
        pointer-events: none;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-sprite {
        position: absolute;
        display: block;
        background-image:
            url("/guessTheWord/images/guessTheWord_atlas_1.png");
        background-repeat: no-repeat;
    }

    /* Paper sign and pole: atlas frame 26, 196x359. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-sign {
        top: 12%;
        left: 43%;
        width: min(18vw, 46vh);
        height: auto;
        aspect-ratio: 196 / 359;
        transform: translateX(-50%);
        background-position: 65.604752% 0;
        background-size: 1044.897959% 285.236769%;
    }

    /* Green Start button: atlas frame 28, 168x61. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-start {
        top: 15%;
        left: 7%;
        width: 86%;
        height: auto;
        aspect-ratio: 168 / 61;
        background-position: 96.276596% 0;
        background-size: 1219.047619% 1678.688525%;
    }

    /* Original "Start" lettering: atlas frame 6, 137x78. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-start-copy {
        position: absolute;
        top: calc(50% - 4px);
        left: 50%;
        width: 58%;
        height: auto;
        aspect-ratio: 137 / 78;
        transform: translate(-50%, -50%);
        background-position: 87.44113% 0;
        background-size: 1494.890511% 1312.820513%;
    }

    /* Original "Select a topic." lettering: atlas frame 4, 260x107. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-topic-copy {
        position: absolute;
        top: 28%;
        left: 50%;
        width: 86%;
        height: auto;
        aspect-ratio: 260 / 107;
        transform: translateX(-50%);
        background-position: 79.026846% 25.518%;
        background-size: 787.692308% 957.009346%;
    }

    /* Dog: atlas frame 27, 134x232. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-dog {
        bottom: -10%;
        left: 52%;
        width: min(13.5vw, 35vh);
        height: auto;
        aspect-ratio: 134 / 232;
        background-position: 73.824451% 0;
        background-size: 1528.358209% 441.37931%;
    }

    /* Blank hanging note: atlas frame 29, 86x116. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note {
        width: min(8vw, 21vh);
        height: auto;
        aspect-ratio: 86 / 116;
        background-position: 92.252803% 6.938326%;
        background-size: 2381.395349% 882.758621%;
        transform-origin: 50% 12%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note-one {
        top: 6%;
        right: 10%;
        transform: rotate(-20deg);
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note-two {
        top: 52%;
        right: 1.5%;
        transform: rotate(0deg);
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note-label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) rotate(20deg);
        transform-origin: 50% 50%;
        width: 84%;
        color: #9b2e26;
        font-family:
            "Brush Script MT",
            "Segoe Script",
            "Apple Chancery",
            cursive;
        font-size: clamp(7px, 1.05vw, 15px);
        font-style: italic;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -0.02em;
        text-align: center;
        text-shadow: 0 0.4px rgba(87, 20, 15, 0.35);
        white-space: nowrap;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note-one-label {
        top: 49%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .gtw-opening-note-two-label {
        top: 55%;
        width: 72%;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .menu-panel {
        top: var(--gtw-opening-menu-top) !important;
        left: var(--gtw-opening-menu-left) !important;
        width: var(--gtw-opening-menu-width) !important;
        height: var(--gtw-opening-menu-height) !important;
        min-width: 0;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: none !important;
        z-index: 22;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .invisbleButton {
        top: calc(var(--gtw-landscape-opening-header-height) + 20%);
        left: 35%;
        z-index: 21;
        width: 16%;
        height: 11%;
        min-width: 0;
        min-height: 0;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list {
        width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0 4px 0 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-color: #66783d rgba(255, 255, 255, 0.32);
        scrollbar-width: thin;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list::-webkit-scrollbar {
        width: 6px;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.32);
        border-radius: 999px;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list::-webkit-scrollbar-thumb {
        min-height: 32px;
        background: #66783d;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-list li {
        margin: 4px 0;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu .subject-btn {
        min-height: 0;
        padding: 7px 9px;
        font-size: clamp(14px, 2.1vw, 18px);
        line-height: 1.1;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #game-frame {
        flex: 0 0 auto;
        width: var(--gtw-landscape-viewport-width) !important;
        max-width: none !important;
        height: calc(var(--gtw-landscape-viewport-width) * 550 / 770) !important;
        aspect-ratio: 770 / 550 !important;
        margin: 0 !important;
    }

    /*
     * Keep the existing loading artwork centered above the opening screen
     * while the selected topic's iframe is being prepared.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #standby-frame {
        position: fixed !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: max-content;
        height: max-content;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none;
        z-index: 2147483647;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #standby-frame #img1 {
        display: block;
        margin: 0;
    }

    /* The active game uses the short landscape viewport instead of 7:5. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body.gtw-game-active {
        position: fixed;
        inset: 0;
        width: var(--gtw-landscape-viewport-width);
        height: var(--gtw-landscape-viewport-height);
        margin: 0;
        overflow: hidden;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body.gtw-game-active #game-main {
        height: var(--gtw-landscape-viewport-height) !important;
        min-height: var(--gtw-landscape-viewport-height) !important;
        overflow: hidden;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body.gtw-game-active #game-frame {
        width: var(--gtw-landscape-viewport-width) !important;
        height: var(--gtw-landscape-viewport-height) !important;
        aspect-ratio: auto !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body.gtw-game-active #gameCursel,
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu body.gtw-game-active footer {
        display: none !important;
    }

    /*
     * Keep the existing portrait navigation control at the top-right.
     * The declarations mirror its current portrait styles because the original
     * rules are limited to max-width: 768px.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #mainNav {
        position: absolute !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        z-index: 99999;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #mainNav .site-menu {
        padding: 0 !important;
        background: transparent !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: var(--gtw-nav-button-top) !important;
        right: auto !important;
        left: var(--gtw-nav-button-left) !important;
        width: var(--gtw-nav-button-width) !important;
        min-width: var(--gtw-nav-button-width) !important;
        height: var(--gtw-nav-button-height) !important;
        min-height: var(--gtw-nav-button-height) !important;
        padding: var(--gtw-nav-button-padding) !important;
        box-sizing: border-box !important;
        color: #fff;
        background: #1e90ff;
        border: 2px solid #fff;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 1001;
    }

    /* Preserve the existing portrait navigation drawer behavior and look. */
    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #primary-menu {
        display: none !important;
        position: absolute !important;
        top: calc(
            var(--gtw-nav-button-top) +
            var(--gtw-nav-button-height) +
            6px
        ) !important;
        right: auto !important;
        left: calc(
            var(--gtw-nav-button-left) +
            var(--gtw-nav-button-width) -
            250px
        ) !important;
        width: 250px !important;
        margin: 0 !important;
        padding: 10px !important;
        flex-direction: column !important;
        background: #1e90ff !important;
        border: 2px solid #fff;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #primary-menu.menu-open {
        display: flex !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-menu #primary-menu .menu-item {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /*
     * Fill the iframe viewport. CreateJS keeps its 770x550 coordinate system;
     * the landscape controller rearranges the game objects inside that stage.
     */
    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe,
    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe body {
        width: var(--gtw-landscape-viewport-width) !important;
        height: var(--gtw-landscape-viewport-height) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe body {
        display: block;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #animation_container,
    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #canvas,
    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #dom_overlay_container {
        width: var(--gtw-landscape-viewport-width) !important;
        max-width: none !important;
        height: var(--gtw-landscape-viewport-height) !important;
        max-height: none !important;
        margin: 0 !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #animation_container {
        position: relative !important;
        overflow: hidden !important;
    }

    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #canvas,
    html.gtw-mobile-landscape.gtw-mobile-landscape-iframe #dom_overlay_container {
        position: absolute !important;
        inset: 0 !important;
    }
}