/* =========================================================
   響應式設計 (Responsive Styles for Mobile, Tablet & PC)
   無論是桌上型電腦寬螢幕或是長輩隨身智慧型手機皆完美適配
   ========================================================= */

/* 平板與中小螢幕 (寬度 <= 992px) */
@media (max-width: 992px) {
    .hero-banner-card {
        grid-template-columns: 1fr;
    }

    .banner-img-wrapper {
        min-height: 220px;
        max-height: 260px;
    }

    .crt-cabinet {
        padding: 14px;
        border-width: 6px;
    }
}

/* 手機直向與小螢幕 (寬度 <= 768px) */
@media (max-width: 768px) {
    :root {
        --font-base: 17px;
        --font-title: 22px;
        --font-h1: 26px;
        --font-hud: 19px;
    }

    body.font-large {
        --font-base: 18px;
        --font-title: 24px;
        --font-h1: 28px;
        --font-hud: 20px;
    }

    body.font-huge {
        --font-base: 20px;
        --font-title: 26px;
        --font-h1: 32px;
        --font-hud: 22px;
    }

    .retro-header {
        padding: 12px 14px;
    }

    .header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .site-brand {
        justify-content: center;
    }

    .brand-icon {
        width: 48px;
        height: 48px;
        font-size: 26px;
    }

    .senior-toolbar {
        justify-content: center;
        width: 100%;
    }

    .main-wrapper {
        margin: 12px auto;
        padding: 0 10px;
    }

    .banner-text-wrapper {
        padding: 18px;
    }

    .banner-title {
        font-size: 22px;
    }

    .section-plaque {
        padding: 10px 14px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .crt-cabinet {
        padding: 10px;
        border-width: 4px;
    }

    .cabinet-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: center;
    }

    .cabinet-header .cabinet-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .screen-housing {
        padding: 6px;
        border-width: 4px;
    }

    .screen-housing canvas {
        width: 100% !important;
        height: auto !important;
    }

    .cabinet-hud {
        padding: 8px;
        gap: 8px;
    }

    .virtual-controller-panel {
        flex-direction: column;
        padding: 12px;
        gap: 16px;
    }

    .virtual-actions {
        width: 100%;
        justify-content: space-around;
    }

    .action-btn {
        width: 80px;
        height: 80px;
        font-size: 20px;
    }

    .board-input-box {
        flex-direction: column;
    }

    .board-input-box .retro-btn {
        width: 100%;
    }
}

/* 超窄螢幕手機 (寬度 <= 420px) */
@media (max-width: 420px) {
    .virtual-dpad {
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(3, 48px);
    }

    .action-btn {
        width: 72px;
        height: 72px;
        font-size: 18px;
    }
}