/* Yumaniwa responsive stability fixes / 2026-08-13
   Desktop/tablet keep the canonical 390:780 frame.
   Phones use a slightly wider 9:16 frame so the town does not feel excessively tall. */

#town-screen {
    width: min(
        100vw,
        calc(100dvh * var(--town-screen-ratio-w) / var(--town-screen-ratio-h)),
        var(--town-screen-max-w)
    );
    height: auto;
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: var(--town-screen-ratio-w) / var(--town-screen-ratio-h);
}

#town-screen #message-window {
    position: absolute !important;
    top: auto !important;
    left: var(--town-dialog-side) !important;
    right: var(--town-dialog-side) !important;
    bottom: var(--town-dialog-bottom) !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    max-height: min(var(--town-dialog-max-h), calc(100% - 48px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: none !important;
}

/* Tablet / desktop: keep the dialog comfortably inside the game frame. */
@media (min-width: 769px) {
    :root {
        --town-dialog-bottom: 24px;
        --town-dialog-side: 24px;
        --town-dialog-max-h: 30%;
    }
}

/*
   Phones: use 9:16 instead of 1:2.
   main.js reads this rendered ratio and adjusts only the canvas logical height,
   so sprites keep their original proportions.
*/
@media (max-width: 768px) and (pointer: coarse) {
    :root {
        --town-screen-ratio-w: 9;
        --town-screen-ratio-h: 16;
    }

    #game-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #town-screen {
        width: min(
            100vw,
            calc(100dvh * 9 / 16)
        ) !important;
        height: auto !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        aspect-ratio: 9 / 16 !important;
        box-shadow: none;
    }
}

@media (max-width: 390px), (max-height: 720px) {
    :root {
        --town-dialog-bottom: 120px;
        --town-dialog-side: 14px;
        --town-dialog-max-h: 32%;
    }
}