/* ============================================
   CV Space Explorer — Touch Layout
   Everything here is scoped to html.touch-mode,
   which js/mobile.js only sets for coarse
   pointers. Desktop rendering is untouched.
   ============================================ */

html.touch-mode,
html.touch-mode body {
    /* The browser must never pan, zoom, or bounce the cockpit. */
    overscroll-behavior: none;
    touch-action: manipulation;
}

html.touch-mode body { cursor: default; }
html.touch-mode body > canvas { touch-action: none; }

/* Hover highlights latch on after a tap on touch screens. */
@media (hover: none) {
    html.touch-mode .hud-panel:hover { box-shadow: 0 0 22px var(--hud-glow), inset 0 1px 0 rgba(255,255,255,0.04); }
}

/* ============================================
   Control layer
   ============================================ */
#touch-controls {
    position: fixed;
    inset: 0;
    z-index: 110;
    pointer-events: none;
    /* Notches and home indicators on phones. */
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    font-family: var(--font-main);
    opacity: 1;
    transition: opacity 0.25s ease;
}

#touch-controls.hidden {
    opacity: 0;
    pointer-events: none !important;
    visibility: hidden;
}

#touch-controls > * { pointer-events: auto; }

/* --- Virtual sticks: move on the left, look on the right during EVA --- */
.tc-stick {
    position: absolute;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0,217,255,0.10), rgba(3,10,24,0.55) 70%);
    border: 1px solid rgba(0,217,255,0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tc-stick.active {
    border-color: rgba(0,217,255,0.6);
    background: radial-gradient(circle at 50% 50%, rgba(0,217,255,0.18), rgba(3,10,24,0.6) 70%);
}

.tc-stick-move { left: max(14px, env(safe-area-inset-left)); }
.tc-stick-look { right: max(14px, env(safe-area-inset-right)); }

.tc-stick[hidden] { display: none; }

/* On foot the right stick takes the corner, so the action buttons shift
   inboard and the secondary grid climbs above it. */
#touch-controls[data-state="eva"] .tc-primary {
    right: calc(max(14px, env(safe-area-inset-right)) + 138px);
}

#touch-controls[data-state="eva"] .tc-side {
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 136px);
}

.tc-stick-ring {
    position: absolute;
    inset: 16px;
    border: 1px dashed rgba(0,217,255,0.18);
    border-radius: 50%;
}

.tc-stick-knob {
    position: absolute;
    top: 50%; left: 50%;
    width: 52px; height: 52px;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0,217,255,0.22);
    border: 1px solid rgba(0,217,255,0.55);
    box-shadow: 0 0 18px rgba(0,217,255,0.28);
    pointer-events: none;
}

.tc-stick-label {
    position: absolute;
    bottom: -14px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    color: rgba(220,238,255,0.42);
    pointer-events: none;
}

/* --- Buttons --- */
.tc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0,217,255,0.3);
    background: rgba(8,14,28,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--hud-text);
    font-family: inherit;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.09s ease, background 0.15s ease, border-color 0.15s ease;
}

.tc-btn[hidden] { display: none; }

.tc-btn.tc-lg { width: 72px; height: 72px; }

.tc-btn .tc-icon { font-size: 1.05rem; line-height: 1; }
.tc-btn.tc-lg .tc-icon { font-size: 1.4rem; }

.tc-btn .tc-label {
    font-size: 0.44rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220,238,255,0.62);
}

.tc-btn.active,
.tc-btn.latched {
    transform: scale(0.94);
    background: rgba(0,217,255,0.22);
    border-color: rgba(0,217,255,0.75);
}

.tc-btn.tone-go { border-color: rgba(94,203,111,0.45); }
.tc-btn.tone-go.active { background: rgba(94,203,111,0.26); border-color: rgba(94,203,111,0.85); }
.tc-btn.tone-stop { border-color: rgba(255,154,53,0.45); }
.tc-btn.tone-stop.active { background: rgba(255,154,53,0.26); border-color: rgba(255,154,53,0.85); }
.tc-btn.tone-accent { border-color: rgba(0,217,255,0.55); }

/* Primary cluster, bottom right */
.tc-primary {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Secondary cluster, right edge above the primary cluster */
.tc-side {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 92px);
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-items: end;
    gap: 8px;
}

.tc-side .tc-btn { width: 44px; height: 44px; }
.tc-side .tc-icon { font-size: 0.9rem; }
.tc-side .tc-label { font-size: 0.4rem; }

/* --- Close control injected into keyboard-only panels --- */
.tc-panel-close {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0,217,255,0.35);
    background: rgba(8,14,28,0.9);
    color: var(--hud-text);
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: auto;
}

#inventory-overlay .tc-panel-close { position: fixed; top: 8px; right: 10px; }

html.touch-mode .card-right-panel,
html.touch-mode .surface-map-panel { position: relative; }

html.touch-mode kbd.tc-kbd-duplicate { display: none !important; }

/* --- Touch legend inside the field guide --- */
.tc-guide-banner {
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(0,217,255,0.28);
    border-radius: 10px;
    background: rgba(0,217,255,0.06);
}

.tc-guide-banner b {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--hud-accent);
}

.tc-guide-banner p {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(220,238,255,0.7);
}

.tc-guide-banner ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 3px 14px;
    margin-top: 7px;
    padding: 0;
    list-style: none;
}

.tc-guide-banner li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.68rem;
    color: rgba(220,238,255,0.62);
}

.tc-guide-banner li span {
    min-width: 44px;
    color: var(--hud-accent);
}

/* --- Portrait nudge --- */
#tc-rotate-hint { display: none; }

@media (orientation: portrait) and (max-width: 820px) {
    html.touch-mode #tc-rotate-hint {
        position: fixed;
        inset: auto 0 auto 0;
        top: 42%;
        z-index: 950;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin: 0 auto;
        padding: 14px 22px;
        width: max-content;
        max-width: 80vw;
        border-radius: 14px;
        background: rgba(3,10,24,0.88);
        border: 1px solid rgba(0,217,255,0.3);
        text-align: center;
        pointer-events: none;
    }
    #tc-rotate-hint span { font-size: 1.6rem; color: var(--hud-accent); }
    #tc-rotate-hint b { font-size: 0.85rem; letter-spacing: 0.1em; }
    #tc-rotate-hint small { font-size: 0.65rem; color: rgba(220,238,255,0.55); }
}

/* ============================================
   HUD reflow — keep every panel clear of the
   stick, the button clusters, and thumbs.
   ============================================ */
/* Engine power and the key legend are replaced by dedicated buttons. */
html.touch-mode #speed-control,
html.touch-mode #controls-help { display: none !important; }

/* Time warp stays reachable — long transfers need it — but shrinks into the
   free strip at the top centre. */
html.touch-mode #timewarp-control {
    top: max(8px, env(safe-area-inset-top));
    padding: 4px 8px;
    gap: 6px;
}

html.touch-mode #hud.eva-mode #timewarp-control { display: none; }
html.touch-mode .tw-label { font-size: 0.45rem; }
html.touch-mode .tw-btn { min-width: 34px; min-height: 30px; padding: 4px 6px; font-size: 0.6rem; }

html.touch-mode #exploration-log {
    top: calc(max(8px, env(safe-area-inset-top)) + 238px);
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    width: min(210px, 46vw);
    padding: 8px 11px;
    font-size: 0.6rem;
}

html.touch-mode #hud.eva-mode #exploration-log { display: none; }

html.touch-mode #hud-top-left {
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    padding: 7px 11px;
    min-width: 0;
}

html.touch-mode .hud-value { font-size: 1rem; }
html.touch-mode .hud-coords { font-size: 0.5rem; }

/* Gauges move out of the stick's corner. */
html.touch-mode #fuel-gauge {
    top: calc(max(8px, env(safe-area-inset-top)) + 62px);
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    min-width: 132px;
    padding: 8px 11px;
}

html.touch-mode #nearest-body {
    top: max(8px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    min-width: 0;
    max-width: 42vw;
    padding: 8px 11px;
}

/* Both bottom corners and the right edge belong to the controls, so the
   telemetry panels stack down the left side instead. */
html.touch-mode #solar-status {
    top: calc(max(8px, env(safe-area-inset-top)) + 154px);
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    bottom: auto;
    min-width: 0;
    width: min(210px, 46vw);
    padding: 7px 11px;
}

/* Cargo readout sits between the stick and the buttons. */
html.touch-mode #resources-bar {
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    width: auto;
    max-width: calc(100vw - 320px);
    padding: 6px 8px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

html.touch-mode #resources-bar::-webkit-scrollbar { display: none; }
html.touch-mode .resource-item { min-width: 34px; }
html.touch-mode .resource-name { display: none; }
html.touch-mode #inventory-mode-label { font-size: 0.42rem; }

html.touch-mode #surface-hud {
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: min(210px, 44vw);
    padding: 9px 11px;
    font-size: 0.62rem;
}

html.touch-mode #eva-compass {
    top: max(8px, env(safe-area-inset-top));
    min-width: 0;
    padding: 5px 12px 4px;
}

html.touch-mode #interaction-prompt {
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px);
    max-width: min(60vw, 340px);
    padding: 7px 14px;
    font-size: 0.62rem;
    text-align: center;
    white-space: normal;
}

html.touch-mode #crosshair { opacity: 0.75; }

/* Portrait has no room beside the controls, so the cargo strip and the
   context prompt stack above the stick and the action cluster. */
@media (orientation: portrait) {
    html.touch-mode #resources-bar {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px);
        max-width: calc(100vw - 20px);
    }
    html.touch-mode #interaction-prompt {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 214px);
        max-width: calc(100vw - 32px);
    }

    /* A phone in portrait is too narrow for a centred strip between the two
       top panels, so time warp tucks under the body readout on the right. */
    html.touch-mode #timewarp-control {
        top: calc(max(8px, env(safe-area-inset-top)) + 86px);
        left: auto;
        right: max(10px, env(safe-area-inset-right));
        transform: none;
    }

    /* Narrowing the gauge to clear the strip wraps it onto a third row, so the
       panels below it move down to match. */
    html.touch-mode #fuel-gauge { width: 140px; min-width: 0; }
    html.touch-mode #solar-status { top: calc(max(8px, env(safe-area-inset-top)) + 186px); }
    html.touch-mode #exploration-log { top: calc(max(8px, env(safe-area-inset-top)) + 270px); }

    /* The surface panel is tall enough to reach the centre line in portrait. */
    html.touch-mode #eva-compass {
        left: auto;
        right: max(10px, env(safe-area-inset-right));
        transform: none;
    }

    /* Portrait EVA runs two sticks across a 390px-wide screen, which leaves no
       room for a centred cargo strip — the surface panel already shows the
       backpack load, and the full inventory is one tap away. */
    html.touch-mode #hud.eva-mode #resources-bar { display: none; }

    /* Both bottom corners are sticks, so the button clusters stack upward:
       actions on the right, secondary controls above the left stick. */
    #touch-controls[data-state="eva"] .tc-primary {
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + 138px);
    }

    #touch-controls[data-state="eva"] .tc-side {
        right: auto;
        left: max(14px, env(safe-area-inset-left));
        justify-items: start;
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + 138px);
    }
}

/* ============================================
   Overlays — full-screen panels on small screens
   ============================================ */
@media (max-width: 900px) {
    html.touch-mode .welcome-window,
    html.touch-mode .star-map-container,
    html.touch-mode .surface-map-panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    html.touch-mode #welcome-modal,
    html.touch-mode #star-map,
    html.touch-mode #surface-map-overlay { padding: 0; }

    html.touch-mode .map-tabs { flex-wrap: wrap; }

    /* Landscape keeps the map beside its readout — stacking them on a ~390px
       tall phone squashes both. Portrait has no width for a second column. */
    html.touch-mode .star-map-info {
        min-width: 0;
        max-width: 42%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (orientation: portrait) {
        html.touch-mode .star-map-content { flex-direction: column; }
        html.touch-mode .map-panel.active { flex: 1 1 46vh; min-height: 46vh; }
        html.touch-mode .star-map-info {
            flex: 1 1 auto;
            width: 100%;
            max-width: none;
            border-left: none;
            border-top: 1px solid rgba(0,217,255,0.08);
        }
    }

    /* The guide scrolls on a phone, so Back / Next must not scroll away. */
    html.touch-mode .welcome-slide { min-height: 0; }
    html.touch-mode .slide-nav {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 8px;
        padding-bottom: 4px;
        background: linear-gradient(to top, var(--hud-bg) 72%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Touch targets: the platform minimum is ~44px. */
    html.touch-mode .slide-btn,
    html.touch-mode .map-tab,
    html.touch-mode .map-target-btn,
    html.touch-mode .settings-toggle-btn,
    html.touch-mode .settings-primary-btn,
    html.touch-mode .settings-secondary-btn,
    html.touch-mode .settings-danger-btn,
    html.touch-mode .tw-btn { min-height: 44px; }

    /* The info column scrolls on a short screen; keep its action reachable. */
    html.touch-mode .map-target-btn { position: sticky; bottom: 0; z-index: 2; }

    html.touch-mode .star-map-close-btn,
    html.touch-mode .welcome-dismiss,
    html.touch-mode #satellite-info-close,
    html.touch-mode #artifact-info-close {
        min-width: 44px;
        min-height: 44px;
    }

    html.touch-mode #surface-map-canvas {
        width: min(88vw, 62vh);
        height: min(88vw, 62vh);
    }

    /* The desktop layout parks the two panels at opposite screen edges. That
       still fits in landscape once the gap shrinks; portrait has to stack. */
    html.touch-mode #inventory-overlay { gap: clamp(24px, 8vw, 120px); padding: 40px 8px 12px; }
    html.touch-mode #inv-panel-backpack { width: min(320px, 42vw); max-height: 74vh; }

    html.touch-mode #inv-hint-bar {
        top: 6px;
        max-width: calc(100% - 16px);
        font-size: 0.55rem;
        text-align: center;
        white-space: normal;
    }

    @media (orientation: portrait) {
        html.touch-mode #inventory-overlay {
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            overflow-y: auto;
            pointer-events: auto;
        }

        html.touch-mode #inv-panel-backpack,
        html.touch-mode #inv-right-column {
            width: min(100%, 440px);
            max-width: 100%;
            max-height: none;
        }
    }

    html.touch-mode #planet-card { flex-direction: column; overflow-y: auto; padding: 14px; }
    html.touch-mode .card-left-panel,
    html.touch-mode .card-right-panel { width: min(100%, 460px); min-width: 0; max-height: 40vh; }

    html.touch-mode #artifact-info-card {
        inset: auto 2vw 2vh 2vw;
        width: 96vw;
        height: 82vh;
    }
}

/* Landscape phones are short: trim vertical chrome inside overlays. */
@media (orientation: landscape) and (max-height: 520px) {
    /* A landscape phone has no vertical room left under the gauges; the
       discovery summary is the one panel nothing depends on. */
    html.touch-mode #exploration-log { display: none !important; }
}

@media (orientation: landscape) and (max-height: 460px) {
    html.touch-mode .tutorial-visual { display: none; }
    html.touch-mode .welcome-slide h2 { font-size: 1.1rem; }
    html.touch-mode .welcome-window { padding: 10px 12px; overflow-y: auto; }
    html.touch-mode .star-map-viewport { min-height: 60vh; }
    html.touch-mode .tc-btn.tc-lg { width: 62px; height: 62px; }
    html.touch-mode .tc-side .tc-btn { width: 40px; height: 40px; }
    html.touch-mode .tc-stick { width: 108px; height: 108px; }
    html.touch-mode .tc-stick-knob { width: 46px; height: 46px; }
    html.touch-mode #resources-bar { max-width: calc(100vw - 300px); }
}