/* 舞台維持 16:9；只縮放可用範圍，避免改變地圖與小遊戲座標。 */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#game-wrapper {
    --available-width: calc(100vw - var(--safe-left) - var(--safe-right));
    --available-height: calc(100vh - var(--safe-top) - var(--safe-bottom));
    width: min(var(--available-width), calc(var(--available-height) * 16 / 9));
    height: min(var(--available-height), calc(var(--available-width) * 9 / 16));
    flex: none;
    margin: 0;
    container-type: size;
}

@supports (height: 100dvh) {
    #game-wrapper {
        --available-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
    }
}

/* 文字與間距跟隨實際舞台，超寬螢幕的黑邊不會把文字放大。 */
@supports (font-size: 1cqh) {
    .age-dialog-content {
        box-sizing: border-box;
        width: min(88%, 600px);
        max-height: 94%;
        overflow-y: auto;
        padding: clamp(12px, 4cqh, 32px);
        border-radius: clamp(12px, 3cqh, 24px);
    }
    .age-dialog h2 { font-size: clamp(20px, 5cqh, 36px); margin: 0 0 1cqh; }
    .age-subtitle { font-size: clamp(13px, 2.8cqh, 20px); margin: 1cqh 0 3cqh; }
    .age-buttons { flex-wrap: nowrap; gap: clamp(10px, 3cqw, 24px); }
    .age-btn {
        min-width: 0;
        margin: 0;
        padding: clamp(10px, 3cqh, 24px) 12px;
        gap: clamp(4px, 1.5cqh, 12px);
    }
    .age-icon { font-size: clamp(28px, 9cqh, 56px); }
    .age-text { font-size: clamp(16px, 4cqh, 28px); }
    .age-desc { font-size: clamp(11px, 2.5cqh, 16px); white-space: normal; }
    .menu-buttons { gap: clamp(8px, 3cqh, 20px); }
    #level-select h2 { font-size: clamp(18px, 4.5cqh, 30px); margin: 1cqh 0; }
    .level-buttons { gap: clamp(6px, 2cqh, 15px); margin: 2cqh auto; width: 70%; }
    .level-buttons button {
        font-size: clamp(14px, 3cqh, 20px);
        padding: clamp(6px, 1.5cqh, 10px) 12px;
        min-height: 34px;
    }
    .reset-progress-btn {
        font-size: clamp(12px, 2.6cqh, 16px);
        padding: 6px 14px;
        min-height: 32px;
        margin: 1cqh auto;
    }
    .back-btn, .skip-btn {
        font-size: clamp(12px, 2.8cqh, 18px);
        padding: 6px 12px;
        min-height: 32px;
        margin: 0;
    }
    .back-btn { top: 2%; left: 2%; }
    .skip-btn { bottom: 2%; right: 2%; }
    #dialog-box {
        bottom: 3%;
        min-height: 0;
        height: 28%;
        max-height: none;
        padding: clamp(18px, 4cqh, 30px) 3% 1.5cqh;
    }
    #npc-name {
        top: -1.8cqh;
        padding: 3px 14px;
        font-size: clamp(13px, 2.8cqh, 18px);
    }
    #dialogue-text {
        font-size: clamp(14px, 3cqh, 20px);
        line-height: 1.5;
        margin: 0;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #options-container {
        top: 30%;
        width: 78%;
        gap: clamp(6px, 1.5cqh, 12px);
        max-height: 34%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px;
        box-sizing: border-box;
        overscroll-behavior: contain;
    }
    #options-container button {
        flex: none;
        min-width: 0;
        min-height: 36px;
        box-sizing: border-box;
        font-size: clamp(14px, 3cqh, 18px);
        padding: 6px 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .confirm-dialog-content {
        box-sizing: border-box;
        max-height: 94%;
        overflow-y: auto;
        padding: clamp(12px, 3cqh, 30px);
    }
    .confirm-dialog-content p { font-size: clamp(16px, 3.5cqh, 24px); }
    .confirm-dialog-content .warning-text { font-size: clamp(13px, 2.8cqh, 18px); margin-bottom: 2cqh; }
    .confirm-dialog-buttons { gap: 10px; margin-top: 2cqh; }
    .confirm-btn { min-width: 0; min-height: 36px; padding: 6px 14px; font-size: clamp(14px, 3cqh, 18px); }
}

/* 四選一問答：兩欄兩列一次呈現，保留 Typewriter 的 display:flex。 */
#options-container.quiz-options {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    max-height: none;
    overflow: visible;
}

#options-container.quiz-options button {
    flex: 0 0 calc((100% - 8px) / 2);
    width: calc((100% - 8px) / 2);
    max-width: none;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    white-space: normal;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 圖片按鈕改用原生 button，維持原有圖片大小並提供鍵盤焦點。 */
#start-menu .menu-buttons .img-btn {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* 直向仍提示橫放，但提示本身不能超出螢幕。 */
@media (orientation: portrait) and (max-width: 1024px) {
    body::before {
        box-sizing: border-box;
        width: min(88vw, 440px);
        white-space: normal;
        line-height: 1.6;
        padding: 20px;
        pointer-events: none;
    }
}