/* Thirteenth Golden Man · portrait phone adaptation */

@media (max-width: 760px) {
    :root {
        --phone-gutter: 14px;
        --phone-touch: 48px;
    }

    html,
    body {
        min-width: 320px;
        min-height: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow: auto;
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
    }

    button,
    a,
    input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    input { font-size: 16px; }

    .game-container {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    .screen {
        min-height: 100dvh;
        height: auto;
        overflow-x: hidden;
    }

    .screen-background {
        inset: 0;
        bottom: auto;
        height: min(66dvh, 620px);
        background-position: 58% top;
        background-size: auto 100%;
        background-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(#000 0 74%, transparent 100%);
        mask-image: linear-gradient(#000 0 74%, transparent 100%);
    }

    .screen-background::before {
        background: linear-gradient(180deg, rgba(5, 9, 12, .26), rgba(5, 9, 12, .2) 36%, rgba(5, 9, 12, .9) 84%, var(--ink));
    }

    .screen-background::after {
        background: linear-gradient(90deg, rgba(4, 8, 11, .58), transparent 54%, rgba(4, 8, 11, .18));
    }

    .digital-grid {
        position: fixed;
        opacity: .11;
        background-size: 42px 42px;
        mask-image: linear-gradient(#000, transparent 78%);
    }

    .start-menu {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        overflow-y: auto;
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: calc(9px + env(safe-area-inset-top)) var(--phone-gutter) 9px;
        background: rgba(5, 10, 14, .95);
        backdrop-filter: none;
    }

    .brand-lockup { min-width: 0; gap: 9px; }
    .brand-emblem { width: 40px; height: 40px; flex: 0 0 auto; }
    .brand-lockup h1 { margin: 0; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
    .brand-lockup .eyebrow { display: block; overflow: hidden; font-size: .43rem; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }

    .forum-account-cluster { display: grid; grid-template-columns: auto auto; gap: 5px; }
    .forum-return {
        grid-row: 1 / 3;
        min-height: 40px;
        padding: 0 8px;
        font-size: .56rem;
        text-align: center;
    }
    .forum-account { display: grid; min-width: 72px; padding: 4px 7px; }
    .forum-account b { max-width: 78px; font-size: .58rem; }
    .forum-account small { max-width: 78px; font-size: .5rem; }
    #forumSyncStatus { grid-column: 2; max-width: 82px; font-size: .47rem; }

    .menu-hero {
        position: relative;
        z-index: 2;
        align-self: auto;
        max-width: none;
        min-height: min(54dvh, 500px);
        padding: clamp(205px, 35dvh, 330px) var(--phone-gutter) 18px;
    }

    .hero-index { margin-bottom: 10px; padding: 4px 7px; font-size: .53rem; }
    .hero-kicker { margin-bottom: 6px; font-size: .66rem; letter-spacing: .22em; }
    .menu-hero h2 { font-size: clamp(2.25rem, 11.8vw, 3.25rem); line-height: .98; text-shadow: 5px 5px 0 rgba(2, 6, 8, .5); }
    .hero-description { margin-top: 13px; padding-left: 11px; font-size: .72rem; line-height: 1.68; }
    .hero-meta { display: flex; gap: 13px; margin-top: 13px; font-size: .52rem; }
    .hero-meta b { display: block; margin: 0 0 2px; font-size: .9rem; }

    .menu-rail {
        position: relative;
        z-index: 3;
        width: auto;
        margin: 0 var(--phone-gutter);
        align-self: auto;
        justify-self: auto;
    }

    .rail-label { margin-bottom: 7px; font-size: .5rem; }
    .menu-command {
        grid-template-columns: 30px minmax(0, 1fr) 16px;
        min-height: 61px;
        margin-top: 6px;
        padding: 9px 12px;
    }
    .menu-command:hover:not(:disabled), .menu-command:focus-visible { transform: none; }
    .menu-command b { font-size: .83rem; }
    .menu-command small { margin-top: 3px; font-size: .48rem; }

    .system-footer {
        position: relative;
        margin-top: 12px;
        padding: 10px var(--phone-gutter);
        font-size: .42rem;
    }

    /* Sub-screens use a scene window followed by a readable mobile sheet. */
    .subscreen-header {
        position: sticky;
        top: 0;
        z-index: 30;
        min-height: 62px;
        padding: calc(8px + env(safe-area-inset-top)) var(--phone-gutter) 8px;
        background: rgba(5, 10, 14, .95);
    }
    .subscreen-header .eyebrow, .step-counter { display: none; }
    .subscreen-header h2 { margin: 0; font-size: .92rem; }
    .back-command { min-height: 44px; font-size: .58rem; }

    .creation-layout,
    .chapter-layout,
    .route-archive-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: calc(100dvh - 62px);
        padding: 0 var(--phone-gutter) calc(78px + env(safe-area-inset-bottom));
    }

    .candidate-stage {
        min-height: 43dvh;
        margin-inline: calc(-1 * var(--phone-gutter));
        border-right: 0;
        border-bottom: 1px solid rgba(82, 255, 184, .2);
    }
    .candidate-art { width: min(72%, 340px); height: 96%; }
    .candidate-target { width: min(76vw, 330px); }
    .registration-panel { width: 100%; max-height: none; margin: -18px auto 24px; padding: 22px 17px; }
    .registration-panel > label, .gender-fieldset legend { margin-top: 18px; }
    .gender-option, .confirm-command { min-height: var(--phone-touch); }

    .chapter-layout,
    .route-archive-layout { gap: 14px; padding-top: 16px; }
    .chapter-list, .route-archive-list { overflow: visible; }
    .chapter-act { margin-bottom: 24px; }
    .chapter-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 8px; }
    .chapter-nodes::before { display: none; }
    .chapter-node { min-height: 76px; }
    .node-number { width: 44px; height: 44px; }
    .node-title { white-space: normal; line-height: 1.35; }
    .chapter-inspector, .route-summary-panel, .route-history-panel { padding: 19px 16px; }
    .detail-number { margin-top: 14px; font-size: 4rem; }
    .detail-description { min-height: 0; }
    .route-record { grid-template-columns: 42px minmax(0, 1fr); }

    /* Story: art stays in a cinematic upper stage; dialogue becomes a bottom
       sheet with controls and choices inside thumb reach. */
    #dialogueContainer {
        position: fixed;
        min-height: 100dvh;
        overflow: hidden;
    }
    #dialogueBackground {
        inset: 0;
        bottom: auto;
        height: 68dvh;
        background-position: 58% top;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .scene-shade {
        background:
            linear-gradient(0deg, #04080b 0%, rgba(4, 8, 11, .92) 25%, rgba(4, 8, 11, .24) 58%, rgba(4, 8, 11, .22) 100%),
            linear-gradient(90deg, rgba(4, 8, 11, .2), transparent 70%);
    }
    .story-hud {
        min-height: 54px;
        padding: calc(7px + env(safe-area-inset-top)) var(--phone-gutter) 7px;
        background: rgba(4, 9, 12, .9);
    }
    .story-brand img { width: 32px; height: 32px; }
    .story-location { min-width: 0; max-width: 70%; font-size: .55rem; }
    .story-location span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .character-area {
        bottom: min(35dvh, 300px);
        width: 72vw;
        height: calc(65dvh - 54px);
    }
    .character-left { left: -20vw; }
    .character-right { right: -20vw; }
    .character-portrait { object-position: center bottom; }
    .character-sprite.speaking { transform: translateY(0) scale(1.03); }

    #dialogueBox {
        right: 0;
        bottom: 0;
        left: 0;
        min-height: min(36dvh, 310px);
        max-height: 46dvh;
        overflow-y: auto;
        padding: 25px var(--phone-gutter) calc(12px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left-width: 3px;
        background: rgba(5, 11, 15, .98);
        box-shadow: 0 -18px 46px rgba(0, 0, 0, .48);
        clip-path: none;
    }
    .dialogue-file { top: 8px; right: var(--phone-gutter); font-size: .43rem; }
    #speakerName { min-height: 20px; margin-bottom: 6px; font-size: .82rem; }
    #dialogueText { min-height: 64px; font-size: .86rem; line-height: 1.68; }
    .dialogue-controls { position: sticky; bottom: 0; display: grid; grid-template-columns: .72fr 1.28fr; gap: 7px; margin-top: 10px; }
    #nextButton, #autoPlayBtn { min-height: var(--phone-touch); padding: 0 9px; }
    #nextButton { min-width: 0; }

    #choicesContainer {
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 58dvh;
        overflow-y: auto;
        padding: 12px var(--phone-gutter) calc(14px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        background: rgba(5, 11, 15, .985);
        clip-path: none;
    }
    .choice-button { grid-template-columns: 36px 1fr; min-height: 54px; margin-top: 8px; padding: 9px 11px; }
    .choice-button:hover { transform: none; }
    .choice-text { font-size: .8rem; line-height: 1.5; }
    .choice-risk { font-size: .52rem; letter-spacing: .04em; }

    /* Battle keeps both combatants visible, then places the action console in
       normal flow so no controls are clipped below a portrait viewport. */
    .battle-screen { overflow-y: auto; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .battle-header { position: sticky; top: 0; z-index: 25; min-height: 56px; padding: calc(7px + env(safe-area-inset-top)) var(--phone-gutter) 7px; }
    .battle-header span { font-size: .45rem; }
    .battle-header b { font-size: .7rem; }
    .threat-chip { font-size: .52rem; }
    .battle-scene { position: relative; top: auto; bottom: auto; height: 48dvh; min-height: 360px; grid-template-columns: 1fr 30px 1fr; }
    .character-info { top: 9px; width: calc(100% - 10px); padding: 9px; }
    .player-info { left: 5px; }
    .enemy-info { right: 5px; }
    .name-plate { font-size: .6rem; }
    .sprite img { max-width: 126%; max-height: 75%; }
    .versus-mark span { width: 30px; height: 30px; font-size: .62rem; }
    .battle-console { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; height: auto; margin: 0 var(--phone-gutter) 12px; }
    .battle-log { height: 105px; }
    .action-panel { grid-template-columns: 1fr 1fr; min-height: 0; }
    .action-btn { min-height: 64px; padding: 10px 8px 10px 42px; }

    .settings-toggle {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 700;
        min-width: 88px;
        min-height: var(--phone-touch);
        background: rgba(5, 10, 12, .96);
    }
    body.story-choosing .settings-toggle {
        top: calc(112px + env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        bottom: auto;
    }
    .settings-panel {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 92dvh;
        padding: 20px var(--phone-gutter) calc(16px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        transform: none;
        clip-path: none;
    }
    .settings-close { min-width: 44px; min-height: 44px; }
    .settings-command { min-height: 58px; }
    .settings-hint { margin-bottom: 0; }

    .game-over-screen { width: calc(100% - 28px); max-height: 90dvh; overflow-y: auto; padding: 24px 18px; }
    .game-over-screen .confirm-command { min-height: var(--phone-touch); }
}

@media (max-width: 380px) {
    .brand-lockup .eyebrow, #forumSyncStatus { display: none; }
    .forum-account-cluster { grid-template-columns: auto auto; }
    .forum-return { grid-row: auto; }
    .menu-hero { padding-inline: 11px; }
    .menu-rail { margin-inline: 11px; }
    .hero-description { font-size: .69rem; }
    .choice-text { font-size: .76rem; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
    .start-menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); grid-template-rows: auto 1fr auto; }
    .topbar, .system-footer { grid-column: 1 / -1; }
    .menu-hero { min-height: 0; padding: 90px 18px 20px; }
    .menu-hero h2 { font-size: 2.4rem; }
    .menu-rail { align-self: center; margin: 12px 16px; }
    .menu-command { min-height: 50px; }
    #dialogueBackground { width: 56%; height: 100dvh; }
    .character-area { bottom: 0; width: 44vw; height: calc(100dvh - 52px); }
    #dialogueBox { left: 48%; min-height: 100dvh; max-height: 100dvh; padding-top: 64px; }
    #choicesContainer { left: 48%; max-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .screen-background,
    .character-sprite,
    .menu-command { transition: none !important; }
}