/* Mobile-specific styles */

/* Mobile debug info - only shown when mobile-debug class is active */
body.mobile-debug #debug-info {
    display: block;
}

/* Responsive button text */
#play-button,
#enlightments-button,
#options-button {
    font-size: var(--welcome-play-font-size); /* Keep all home menu buttons synced */
}

/* Touch-friendly sizing */
@media (max-width: 768px) {
    .overlay button {
        padding: 20px 40px;
        font-size: 1.4em;
        min-height: 60px;
        min-width: 120px;
    }
    
    #mobile-pause-button {
        width: 60px;
        height: 60px;
    }

    #now-playing-banner {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        padding: 5px 9px;
        gap: 5px;
    }

    #now-playing-icon {
        font-size: 9px;
    }

    #now-playing-text {
        font-size: 7px;
        letter-spacing: 0.28px;
    }

    #level-progress {
        right: 10px;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        width: min(58vw, 260px);
    }

    #run-timer {
        left: 10px;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        min-width: 116px;
        padding: 5px 7px 6px;
    }

    #fps-monitor {
        left: 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
        min-width: 116px;
        padding: 5px 7px 6px;
    }
    
    #pause-icon {
        width: 24px;
        height: 24px;
    }
    
    #pause-icon::before, 
    #pause-icon::after {
        width: 5px;
        height: 20px;
    }
    
    /* Larger touch targets for controls */
    .value-input {
        min-height: 44px;
        font-size: 1.2em;
    }
    
    input[type="range"] {
        min-height: 44px;
    }
    
    input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }

    #welcome-locale-switcher {
        top: 2.2%;
        gap: 7px;
    }

    #audio-welcome-locale-switcher {
        top: calc(env(safe-area-inset-top, 0px) + 8px + 3%);
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        width: max-content;
        margin-inline: 0;
        gap: 6px;
    }

    #audio-welcome-locale-switcher .locale-flag {
        width: auto;
        min-width: 46px;
        height: 28px;
        line-height: 1;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-inline: 6px;
        margin-inline: 1px;
        font-size: 14.2px;
        letter-spacing: 0.52px;
    }

    #audio-welcome-mini-logo {
        top: calc(env(safe-area-inset-top, 0px) + 57px);
        width: min(80.6vw, 312px);
        max-width: 88.4%;
    }

    #audio-welcome-card {
        width: min(90vw, 450px);
        max-height: 78vh;
        margin-top: clamp(24px, 4vh, 40px);
    }

    #audio-welcome-content {
        inset: 9.4% 7.2% 8.8%;
    }

    .locale-flag {
        width: 31px;
        height: 20px;
        line-height: 1;
        font-size: 11.5px;
    }

    #welcome-locale-switcher .locale-flag {
        width: auto;
        min-width: 44px;
        height: 26px;
        line-height: 1;
        padding-inline: 5px;
        margin-inline: 1px;
        font-size: 11.6px;
        letter-spacing: 0.42px;
    }

    #pause-locale-switcher .locale-flag,
    #game-over-locale-switcher .locale-flag {
        width: auto;
        min-width: 44px;
        height: 27px;
        line-height: 1;
        padding-inline: 6px;
        margin-inline: 1px;
        font-size: 11.4px;
        letter-spacing: 0.42px;
    }

    #welcome-overlay {
        --welcome-slogan-font-size: clamp(1.22rem, 5vw, 1.66rem);
    }

    /* On tall mobile viewports, push the hero into the upper third and
       lift the menu so the two zones are visually balanced. Short phones
       fall through to the existing max-height: 680/780 rules in overlays.css. */
    @media (min-height: 700px) {
        #welcome-overlay {
            --welcome-menu-bottom: clamp(14%, 18vh, 22%);
            --welcome-menu-gap: clamp(10px, 1.8vh, 18px);
        }
    }

    /* Pull hero up only on tall mobile viewports — on short phones (SE,
       landscape, low-DPI Android) the existing max-height media queries
       handle layout and we don't want to fight them. */
    @media (min-height: 700px) {
        #welcome-hero {
            --welcome-hero-base-y: -18vh;
        }
    }

    #welcome-slogan {
        width: min(96vw, 640px);
        letter-spacing: 0.84px;
    }

    #play-button,
    #enlightments-button,
    #options-button {
        min-width: 300px;
        padding: 18px 24px;
        font-size: clamp(1.44rem, 5.2vw, 2rem);
    }

    #connect-account-button {
        min-width: 300px;
        justify-content: space-between;
        padding: 10px 14px;
        font-size: clamp(0.44rem, 1.9vw, 0.56rem);
    }

    #enlightments-panel {
        width: min(95vw, 620px);
        max-height: min(94vh, 760px);
        padding: 10px 9px 10px;
    }

    #enlightments-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .enlightments-aether-display {
        padding: 2px 6px;
        gap: 4px;
    }

    #enlightments-wallet-icon {
        width: 11px;
        height: 11px;
    }

    .enlightments-section {
        padding: 7px 8px;
        border-radius: 16px;
    }

    #enlightments-sigil-section .enlightments-carousel-viewport {
        min-height: 48px;
    }

    .enlightments-card-sigil {
        width: 40px;
        min-height: 44px;
    }

    .enlightments-card-sigil .enlightments-card-art {
        height: 36px;
    }

    .enlightments-attr-label-wrap {
        width: 86px;
    }

    .enlightments-attr-controls {
        margin-left: 88px;
    }

    .enlightments-step-button {
        min-width: 24px;
        padding: 4px 5px;
    }

    .enlightments-attr-bar {
        gap: 3px;
        min-height: 14px;
    }

    .enlightments-attr-row {
        min-height: 38px;
    }

    #enlightments-loadout-section .enlightments-carousel-viewport {
        min-height: 80px;
        max-width: 320px;
    }

    .enlightments-card-tip,
    .enlightments-card-trail {
        width: 56px;
        min-height: 66px;
    }

    .enlightments-card-tip .enlightments-card-art,
    .enlightments-card-trail .enlightments-card-art {
        height: 58px;
    }

    .enlightments-desc-rail {
        font-size: clamp(0.26rem, 1.5vw, 0.34rem);
        padding: 3px 6px;
    }

    #home-options-panel {
        width: min(94vw, 560px);
        padding: 14px 12px 12px;
    }

    .home-options-row {
        grid-template-columns: 82px 1fr 46px;
        gap: 6px;
        padding: 6px 7px;
    }

    html[lang="ja"] #welcome-overlay {
        --welcome-slogan-font-size: clamp(1.36rem, 5.4vw, 1.84rem);
    }

    html[lang="ja"] #welcome-slogan {
        font-weight: 700;
    }
}

/* Mobile portrait distribution for audio welcome gate:
   Keep locale, logo, card and copyright in distinct vertical bands. */
@media (max-width: 768px) and (orientation: portrait) {
    #audio-welcome-overlay {
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-top: calc(env(safe-area-inset-top, 0px) + clamp(138px, 21vh, 190px));
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(38px, 6vh, 56px));
        gap: 0;
    }

    #audio-welcome-locale-switcher {
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        gap: 5px;
    }

    #audio-welcome-overlay.is-sequenced #audio-welcome-locale-switcher,
    #audio-welcome-overlay.is-sequenced #audio-welcome-locale-switcher.is-visible {
        transform: translate(-50%, 0);
    }

    #audio-welcome-locale-switcher .locale-flag {
        min-width: 42px;
        height: 26px;
        padding-inline: 5px;
        font-size: 11.8px;
        letter-spacing: 0.4px;
    }

    #audio-welcome-mini-logo {
        top: calc(env(safe-area-inset-top, 0px) + clamp(40px, 6.6vh, 62px));
        width: min(70vw, 304px);
        max-width: 80%;
        opacity: 0.88;
    }

    #audio-welcome-card {
        width: min(88vw, 420px);
        max-height: min(70vh, 620px);
        margin-top: 0;
    }

    #audio-welcome-content {
        inset: 9.8% 7.6% 8.6%;
    }

    #audio-welcome-title {
        font-size: clamp(0.94rem, 4.6vw, 1.2rem);
        margin-top: 4.2%;
        max-width: 30ch;
    }

    #audio-welcome-icon-wrap {
        width: min(49%, 170px);
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #audio-welcome-text {
        font-size: clamp(0.84rem, 2.4vw, 1.02rem);
        max-width: 31ch;
        margin-top: 0;
        margin-bottom: 4.4%;
    }

    #audio-welcome-copyright {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        font-size: clamp(0.42rem, 1.55vw, 0.5rem);
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    #play-button-container {
        bottom: 10%;
    }
    
    #welcome-logo {
        max-height: 60%;
    }
    
    #mobile-pause-button {
        bottom: 10px;
        left: 10px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #debug-info {
        font-size: 14px;
    }
    
    .value-input {
        font-size: 1.2em;
    }
}

/* Prevent text selection on mobile */
@media (pointer: coarse) {
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* But allow selection in input fields */
    input, textarea {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
}