:root {
    --bg: #04060f;
    --panel: rgba(10, 18, 38, 0.82);
    --panel-border: rgba(90, 150, 255, 0.25);
    --accent: #5cc6ff;
    --accent-2: #8affc1;
    --warn: #ffcc55;
    --danger: #ff5d5d;
    --text: #d8e6ff;
    --muted: #7f93b8;
    --credits: #ffd76a;
    /* Scrollbars — accent cyan thumb on panel-dark track (~9px hit target) */
    --scrollbar-size: 9px;
    --scrollbar-track: rgba(10, 18, 38, 0.55);
    --scrollbar-thumb: rgba(92, 198, 255, 0.42);
    --scrollbar-thumb-hover: rgba(92, 198, 255, 0.68);
    /* Default #hudTopBar footprint (Menus strip + button row) — #notices clears below this */
    --hud-topbar-inset-top: max(12px, env(safe-area-inset-top, 0px));
    --hud-topbar-header-h: 23px; /* .hud-float-header--compact */
    --hud-topbar-body-h: 40px;   /* 4px pad + 32px buttons + 4px pad */
    --hud-topbar-clearance: 8px;
    --hud-notices-top: calc(
        var(--hud-topbar-inset-top)
        + var(--hud-topbar-header-h)
        + var(--hud-topbar-body-h)
        + var(--hud-topbar-clearance)
    );
    /* Settings → Display → UI scale (HUD/menus). Playfield zoom is canvas-only. */
    --ui-scale: 1;
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Independent UI scale — never apply to #gameCanvas / #mapOverlay / #uiHud / #entry / #station.
   Entry + station stay at 1× so login / dock can fill the real viewport (zoom would leave
   empty bands above/below the panel and show HUD pills through the blur). */
#hud,
#hudTopBar,
#adminQuick,
#notices,
#prompt,
#guildChat,
#minimapShell,
#mapChrome,
#mapLegend,
#mapTooltip,
#touch,
#maintBanner,
#displayScaleBubble,
#pilotLook,
.overlay:not(#entry):not(#station),
.entry-modal-overlay {
    zoom: var(--ui-scale);
}

/* Themed scrollbars (station Bay/Market, Manual, News, Admin, Inventory, chat, map lists, entry) */
* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 6px;
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}
.hidden { display: none !important; }

canvas { display: block; touch-action: none; }
#gameCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(ellipse at center, #0a1430 0%, #04060f 70%); }
#uiHud { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10; }
/* Minimap shell — canvas + zoom buttons; float chrome wraps this on desktop */
#minimapShell.minimap-shell {
    position: fixed; right: 16px; bottom: 16px; z-index: 11;
    width: 200px; height: 200px;
}
#minimap {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 10px; border: 1px solid var(--panel-border);
    box-shadow: 0 0 18px rgba(0,0,0,0.6); background: rgba(4,8,20,0.7);
    display: block;
}
#mapOverlay { position: fixed; inset: 0; z-index: 30; display: none; background: rgba(2,5,14,0.92); cursor: crosshair; }
#mapTooltip { position: fixed; z-index: 42; pointer-events: none; max-width: 260px;
    padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(90,150,255,0.35);
    background: rgba(8, 14, 28, 0.94); box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    font-size: 12px; line-height: 1.35; color: var(--text); }
#mapTooltip .mt-name { font-weight: 650; color: #e8f0ff; margin-bottom: 2px; }
#mapTooltip .mt-meta { color: var(--muted); font-size: 11px; }
#mapTooltip .mt-row { margin-top: 2px; }
#mapTooltip .mt-rarity { text-transform: capitalize; }
/* Above #touch.map-open (34) so Close / search stay tappable on mobile. */
#mapChrome { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
#mapChrome > * { pointer-events: auto; }
#mapChromeActions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; }
#mapCycleBtn { padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(90,150,255,0.35); background: rgba(10, 18, 38, 0.92); color: #cfe0ff;
    cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
#mapCycleBtn:hover, #mapCycleBtn:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
#mapCloseBtn { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(90,150,255,0.45); background: rgba(10, 18, 38, 0.92); color: #e8f0ff;
    cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
#mapCloseBtn:hover, #mapCloseBtn:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
#mapCloseBtn:active { transform: scale(0.97); }
#mapSearch { position: relative; width: 100%; }
#mapSearchInput { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--panel-border);
    background: rgba(10, 18, 38, 0.92); color: var(--text); font-size: 14px; outline: none;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
#mapSearchInput:focus { border-color: var(--accent); }
#mapSearchInput::placeholder { color: var(--muted); }
#mapSearchResults { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto;
    background: rgba(10, 18, 38, 0.96); border: 1px solid var(--panel-border); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
#mapSearchResults .msr { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid rgba(90,150,255,0.12); font-size: 13px; }
#mapSearchResults .msr:last-child { border-bottom: none; }
#mapSearchResults .msr:hover, #mapSearchResults .msr.active { background: rgba(92,198,255,0.12); }
#mapSearchResults .msr .msr-title { color: #e8f0ff; font-weight: 600; }
#mapSearchResults .msr .msr-meta { color: var(--muted); font-size: 11px; }
#mapSearchResults .msr-actions { display: flex; gap: 6px; margin-top: 4px; }
#mapSearchResults .msr-actions button { pointer-events: auto; font-size: 11px; padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--panel-border); background: rgba(20,28,44,0.9); color: #cfe0ff; cursor: pointer; }
#mapSearchResults .msr-actions button:hover { border-color: var(--accent); color: #fff; }
#mapSearchResults .msr-actions button.primary { border-color: rgba(92,198,255,0.55); color: var(--accent); }
#mapChromeHint { font-size: 11px; color: rgba(159,180,216,0.75); letter-spacing: 0.02em;
    background: rgba(4,8,20,0.55); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
#mapLegendBtn { padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(90,150,255,0.35); background: rgba(10, 18, 38, 0.92); color: #cfe0ff;
    cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
#mapLegendBtn:hover, #mapLegendBtn:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
#mapLegendBtn[aria-expanded="true"] { border-color: rgba(92,198,255,0.55); color: var(--accent); }
#mapLegendBtn.hidden { display: none; }
/* Corner legend — pointer-events only on the panel so map clicks pass through elsewhere. */
#mapLegend { position: fixed; left: max(12px, env(safe-area-inset-left));
    bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px)); z-index: 41;
    width: min(240px, calc(100vw - 24px)); pointer-events: auto;
    background: rgba(8, 14, 28, 0.94); border: 1px solid rgba(90,150,255,0.35);
    border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    font-size: 12px; line-height: 1.35; color: var(--text); }
#mapLegend.hidden { display: none; }
#mapLegend.collapsed .map-legend-body { display: none; }
#mapLegend.collapsed .map-legend-chevron { transform: rotate(-90deg); }
.map-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 8px 11px; border: 0; border-radius: 10px 10px 0 0;
    background: transparent; color: #e8f0ff; font: inherit; font-weight: 650; cursor: pointer;
    letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.map-legend-head:hover, .map-legend-head:focus-visible { color: #fff; outline: none; }
.map-legend-title { color: var(--accent); }
.map-legend-chevron { color: var(--muted); font-size: 11px; transition: transform 0.15s ease; }
.map-legend-body { padding: 0 10px 10px; max-height: min(42vh, 320px); overflow-y: auto; }
.map-legend-row { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.map-legend-swatch { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 1px; border-radius: 3px;
    border: 1px solid rgba(200,220,255,0.25); box-sizing: border-box; }
.map-legend-swatch.border-only { background: transparent !important; }
.map-legend-swatch.dashed { border-style: dashed; border-width: 2px; }
.map-legend-label { flex: 1; color: #cfe0ff; font-size: 11.5px; }
.map-legend-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(90,150,255,0.15);
    color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.map-legend-admin { color: #9ef0ff; }
#miniCtrls {
    /* Pre-chrome / touch: horizontal − + above the map, left side. */
    position: absolute; left: 6px; right: auto; bottom: calc(100% + 6px); z-index: 1;
    display: flex; flex-direction: row; gap: 4px;
}
#miniCtrls button { width: 26px; height: 26px; border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1;
    background: rgba(20,28,44,0.85); color: #cfe0ff; border: 1px solid var(--panel-border); cursor: pointer; }
#miniCtrls button:hover { border-color: var(--accent); background: rgba(92,198,255,0.2); }
/* Desktop float: −/+ sit in the header actions (moved by HudLayout). */
body.hud-layout-on #minimapShell #miniCtrls {
    position: static;
    inset: auto;
    gap: 3px;
}
body.hud-layout-on #minimapShell #miniCtrls button {
    width: 24px; height: 22px; font-size: 12px; border-radius: 5px;
    background: rgba(92, 198, 255, 0.08); color: var(--accent);
    border: 1px solid rgba(92, 198, 255, 0.35);
}
body.hud-layout-on #minimapShell #miniCtrls button:hover {
    border-color: var(--accent); background: rgba(92, 198, 255, 0.2); color: #fff;
}

/* ---- Draggable / resizable HUD chrome (desktop; body.hud-layout-on) ---- */
body.hud-layout-on #hud {
    display: contents;
}
body.hud-layout-on .hud-float.hud-float-placed {
    position: fixed;
    margin: 0;
    max-width: none;
    box-sizing: border-box;
    /* #hud uses display:contents while floating — zoom must live on each panel. */
    zoom: var(--ui-scale);
}
body.hud-layout-on .hud-float.hud-float-placed.panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.hud-layout-on .hud-float.hud-float-placed.panel > .hud-float-body {
    padding: 12px 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
body.hud-layout-on .hud-float.hud-float-placed.panel.mini > .hud-float-body {
    padding: 9px 12px;
}
body.hud-layout-on #hudExtras.hud-float-placed {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}
body.hud-layout-on #hudExtras.hud-float-placed > .hud-float-header {
    border-radius: 10px 10px 0 0;
    background: rgba(10, 18, 38, 0.92);
    border: 1px solid var(--panel-border);
    border-bottom: none;
}
body.hud-layout-on #hudExtras.hud-float-placed > .hud-float-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: transparent;
}
body.hud-layout-on #statusStack.hud-float-placed {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    overflow: hidden;
}
body.hud-layout-on #statusStack.hud-float-placed > .hud-float-header {
    border-radius: 10px 10px 0 0;
    background: rgba(10, 18, 38, 0.92);
    border: 1px solid var(--panel-border);
    border-bottom: none;
}
body.hud-layout-on #statusStack.hud-float-placed > .hud-float-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
body.hud-layout-on #statusStack.hud-float-placed #statusPanel {
    border-radius: 0 0 10px 10px;
}
body.hud-layout-on #denPanel.hud-float-placed {
    width: auto;
    max-width: none;
}
body.hud-layout-on #denPanel.hud-float-placed > .hud-float-body {
    padding: 10px 12px;
}
body.hud-layout-on #denPanel.hud-float-placed .panel-title {
    display: none; /* float chrome already titles Dens */
}
body.hud-layout-on #minimapShell.hud-float-placed {
    display: flex;
    flex-direction: column;
    background: rgba(10, 18, 38, 0.92);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(0,0,0,0.6);
    overflow: visible;
}
body.hud-layout-on #minimapShell.hud-float-placed > .hud-float-header {
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid var(--panel-border);
    flex: 0 0 auto;
}
body.hud-layout-on #minimapShell.hud-float-placed > .hud-float-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
body.hud-layout-on #minimapShell.hud-float-placed #minimap {
    border-radius: 0 0 10px 10px;
    box-shadow: none;
}
body.hud-layout-on #minimapShell.hud-float-minimized {
    height: auto !important;
    width: auto !important;
    min-width: 120px;
}
body.hud-layout-on #minimapShell.hud-float-minimized > .hud-float-body {
    display: none;
}
body.hud-layout-on #guildChat.hud-float-placed {
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.hud-layout-on #guildChat.hud-float-placed.collapsed {
    height: auto !important;
}
body.hud-layout-on #guildChat.hud-float-placed .guild-chat-log {
    flex: 1 1 auto;
    max-height: none;
    min-height: 48px;
}
body.hud-layout-on #contractsHud .panel-title { display: none; }
body.hud-layout-on #goalStepChip.hud-float-placed {
    display: flex;
    flex-direction: column;
    transform: none;
    max-width: none;
    overflow: hidden;
}
body.hud-layout-on #goalStepChip.hud-float-placed > .hud-float-body {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
body.hud-layout-on #goalStepChip.hud-float-placed .goal-step-kicker { display: none; }
body.hud-layout-on #goalStepChip.hud-float-placed .goal-step-chip-body {
    align-content: center;
}
body.hud-layout-on #goalStepChip.hud-float-minimized {
    width: auto !important;
    min-width: 140px;
}

/* Upper-right menu pill: thin drag strip once HudLayout chrome is injected */
#hudTopBar:has(> .hud-float-header) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}
#hudTopBar > .hud-float-header--compact {
    padding: 2px 6px 2px 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(92, 198, 255, 0.22);
    background: rgba(8, 16, 36, 0.55);
    font-size: 9px;
    letter-spacing: 0.1em;
    min-height: 0;
}
#hudTopBar > .hud-float-header--compact .hud-float-btn {
    width: 20px;
    height: 18px;
    font-size: 11px;
    border-radius: 4px;
}
#hudTopBar > .hud-float-body {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 5px;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

/* Upper-right menu pill: placed float (position only; size from content) */
body.hud-layout-on #hudTopBar.hud-float-placed {
    display: inline-flex;
    width: auto;
    height: auto;
}

.hud-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    padding: 5px 8px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(8, 16, 36, 0.55);
    border-bottom: 1px solid rgba(92, 198, 255, 0.22);
}
.hud-float-header:active { cursor: grabbing; }
.hud-float-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-float-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hud-float-btn {
    width: 24px; height: 22px; padding: 0;
    border-radius: 5px; border: 1px solid rgba(92, 198, 255, 0.35);
    background: rgba(92, 198, 255, 0.08); color: var(--accent);
    font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
}
.hud-float-btn:hover {
    border-color: var(--accent); background: rgba(92, 198, 255, 0.2); color: #fff;
}
#guildChat .hud-float-btn {
    height: 28px; width: 28px; font-size: 13px;
}
.hud-float-resize {
    position: absolute;
    right: 0; bottom: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    z-index: 2;
    background:
        linear-gradient(135deg, transparent 55%, rgba(92, 198, 255, 0.55) 55%, rgba(92, 198, 255, 0.55) 70%, transparent 70%),
        linear-gradient(135deg, transparent 72%, rgba(92, 198, 255, 0.35) 72%, rgba(92, 198, 255, 0.35) 85%, transparent 85%);
    border-bottom-right-radius: 8px;
}
.hud-float-minimized > .hud-float-body { display: none !important; }
.hud-float-minimized > .hud-float-resize { display: none; }
.hud-float-minimized {
    height: auto !important;
}
.hud-float-focus {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(92, 198, 255, 0.35);
}
/* Touch: never show float chrome / grips (layout helper deactivates too). */
body.touch-active .hud-float-resize { display: none !important; }
body.touch-active .hud-float > .hud-float-header:not(header) { display: none !important; }
body.touch-active #guildChat .hud-float-reset { display: none !important; }
/* Minimap −/+ live in the float header on desktop; keep them tappable on touch when the header is hidden. */
body.touch-active #minimapShell.hud-float > .hud-float-header {
    display: contents !important;
}
body.touch-active #minimapShell .hud-float-title,
body.touch-active #minimapShell .hud-float-actions > .hud-float-btn {
    display: none !important;
}
body.touch-active #minimapShell #miniCtrls {
    position: absolute;
    left: 4px;
    right: auto;
    bottom: calc(100% + 4px);
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: 4px;
}
body.touch-active #minimapShell #miniCtrls button {
    width: 22px; height: 22px; font-size: 12px;
    background: rgba(20,28,44,0.85); color: #cfe0ff;
    border: 1px solid var(--panel-border);
}

/* ---- HUD ---- */
#hud { position: fixed; left: 14px; top: 14px; z-index: 12; display: flex; flex-direction: column; gap: 10px; max-width: none; width: max-content; }
.hud-top-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
.hud-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 280px; max-width: 300px; }
#hudExtras, #controls, #contractsHud, #goalStepChip { max-width: 300px; }
.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px 14px;
    backdrop-filter: blur(6px); box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-size: 13px; }
.panel.mini { font-size: 11.5px; color: var(--muted); padding: 9px 12px; }
.panel.mini b { color: var(--accent); }
.panel-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 6px; opacity: 0.9; }
.panel.bests .row span:last-child { color: #e8f0ff; font-weight: 600; }
.panel.bests.flash { animation: bestsFlash 0.85s ease; border-color: rgba(138, 255, 193, 0.65); }
@keyframes bestsFlash {
    0% { box-shadow: 0 0 0 rgba(138,255,193,0); }
    40% { box-shadow: 0 0 22px rgba(138,255,193,0.45); }
    100% { box-shadow: 0 0 0 rgba(138,255,193,0); }
}

.panel.goal .goal-name { color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.panel.goal .goal-detail { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.panel.goal.affordable { border-color: rgba(138, 255, 193, 0.45); }
.panel.goal.affordable .goal-name { color: var(--accent-2); }
.bar.goal-bar > span { width: 38px; }
.fill.goal { background: linear-gradient(90deg, #5cc6ff, #8affc1); }
.panel.goal.affordable .fill.goal { background: linear-gradient(90deg, #8affc1, #ffe08a); }

/* Phone: Bests + Next upgrade collapse into one toggle line (desktop always expanded). */
.hud-extras { display: flex; flex-direction: column; gap: 10px; }
.hud-extras-summary { display: none; cursor: pointer; user-select: none; -webkit-user-select: none;
    align-items: center; gap: 6px; margin: 0; }
.hud-extras-title { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); flex-shrink: 0; }
.hud-extras-peek { flex: 1; min-width: 0; font-size: 10px; color: #e8f0ff; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-extras-chevron { color: var(--muted); font-size: 10px; transition: transform 0.15s ease; flex-shrink: 0; }
.hud-extras-body { display: flex; flex-direction: column; gap: 10px; }

/* Station Records tab — status chips (same chip language as former dock strip) */
.records-status {
    display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 0 2px;
    font-size: 12px; color: var(--muted);
}
.records-status .chip { display: flex; flex-direction: column; gap: 2px; min-width: 88px;
    padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.22);
    border: 1px solid var(--panel-border); }
.records-status .chip b { color: #e8f0ff; font-size: 13px; }
.records-status .chip.goal b { color: var(--accent-2); }
.records-status .chip.ready b { color: var(--credits); }
.records-status .chip#dockUploadChip,
.records-status .chip#dockShipsChip,
.records-status .chip#dockFounderChip,
.records-status .chip#dockTerritoryChip { cursor: pointer; }
.records-status .chip.founder b { color: #9ef0ff; }
.records-section { margin-bottom: 14px; }
.records-section:last-child { margin-bottom: 0; }
.records-section .section-title { margin-bottom: 8px; }
.records-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }

/* Screen flash for windfalls / rare finds / records */
.fx-flash {
    /* Above station overlay so docked cash-outs aren't muted by backdrop-filter */
    position: fixed; inset: 0; z-index: 55; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,215,106,0.28) 0%, rgba(92,198,255,0.08) 45%, transparent 70%);
    animation: fxFlash 0.7s ease-out forwards;
}
.fx-flash.rare {
    background: radial-gradient(ellipse at center, rgba(192,139,255,0.32) 0%, rgba(255,186,77,0.12) 50%, transparent 72%);
}
.fx-flash.record {
    background: radial-gradient(ellipse at center, rgba(138,255,193,0.3) 0%, rgba(92,198,255,0.1) 50%, transparent 72%);
}
.fx-flash.windfall {
    background: radial-gradient(ellipse at center, rgba(255,215,106,0.4) 0%, rgba(255,120,60,0.12) 50%, transparent 72%);
}
@keyframes fxFlash {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}

.cashout-card {
    /* Above .overlay (50) so cash-out isn't blurred by station backdrop-filter */
    position: fixed; top: 14%; left: 50%; transform: translateX(-50%); z-index: 70;
    min-width: 280px; max-width: 90vw; text-align: center; pointer-events: none;
    background: rgba(12, 22, 40, 0.94); border: 1px solid rgba(255, 215, 106, 0.55);
    border-radius: 14px; padding: 16px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: slideIn 0.25s ease;
}
.cashout-card h2 { margin: 0 0 4px; color: var(--credits); font-size: 18px; letter-spacing: 0.04em; }
.cashout-card .amt { font-size: 28px; font-weight: 800; color: #fff; }
.cashout-card .sub { margin-top: 6px; font-size: 12px; color: var(--muted); }
.cashout-card.record { border-color: rgba(138, 255, 193, 0.7); }
.cashout-card.record h2 { color: var(--accent-2); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 3px 0; }
.row .label { color: var(--muted); }
.credits { color: var(--credits); font-weight: 700; }
.sector .danger { color: var(--danger); font-weight: 700; font-size: 11px; }
#hudSector { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-align: right; font-size: 12px; }
.scan-near {
    font-size: 10px; line-height: 1.35; color: var(--muted);
    margin: 0 0 2px; padding: 0;
    min-height: 1.35em; max-height: 1.35em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scan-near .sn-in { color: var(--accent-2); }
.scan-near .sn-out { color: rgba(159, 180, 216, 0.72); }
.scan-near .sn-reach { color: rgba(92, 198, 255, 0.85); }

/* Compact frontier / safe-core readout under Sector */
.frontier-readout {
    margin: 2px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(90, 150, 255, 0.12);
    font-size: 11px; line-height: 1.35; color: var(--muted);
}
.frontier-readout .fr-main {
    color: var(--text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frontier-readout .fr-sub {
    margin-top: 2px; font-size: 10.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frontier-readout .fr-sep { margin: 0 5px; color: rgba(127, 147, 184, 0.7); font-weight: 400; }
.frontier-readout .fr-status.safe { color: var(--accent-2); }
.frontier-readout .fr-status.settled { color: #e8c86a; }
.frontier-readout .fr-status.frontier { color: var(--warn); }
.frontier-readout .fr-status.expanse { color: var(--warn); }
.frontier-readout .fr-status.edge { color: #ff9a5c; }
.frontier-readout .fr-status.deep,
.frontier-readout .fr-status.void { color: var(--danger); }
.frontier-readout .fr-status.edgevoid { color: #ff4d6d; }
.frontier-readout .fr-claim {
    margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #ff8fb0;
    min-height: 1.35em; max-height: 1.35em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frontier-readout .fr-claim.is-empty { visibility: hidden; }
.frontier-readout .fr-claim.softened { color: #ff6688; }
.hud-weapon { font-weight: 700; letter-spacing: 0.02em; }
.hud-pvp-slot {
    min-height: 22px;
    margin-top: 4px;
}
.hud-pvp {
    display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; cursor: pointer; border-radius: 3px;
    color: #9aacbc; border: 1px solid rgba(140,160,180,0.35); background: rgba(30,40,55,0.55);
}
.hud-pvp.eligible { color: #ffc070; border-color: rgba(255,180,80,0.45); background: rgba(80,50,20,0.35); }
.hud-pvp.arena { color: #ff9a70; }
.hud-pvp.flagged { color: #ff6a8a; border-color: rgba(255,100,130,0.55); background: rgba(90,20,40,0.4); }
.guild-diplo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 13px; }
.guild-diplo-row .tag.ally { color: #6ec8ff; }
.guild-diplo-row .tag.war { color: #ff6a8a; }
.guild-diplo-row.war { border-left: 2px solid rgba(255,100,130,0.5); padding-left: 6px; }
.bar { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 11px; color: var(--muted); }
.bar > span:first-child { width: 38px; flex: 0 0 auto; }
.bar .bar-val {
    flex: 0 0 auto; min-width: 3.6em; text-align: right;
    font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 650;
    letter-spacing: 0.01em; color: #d5e2f5;
}
.track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; min-width: 0; }
.fill { height: 100%; width: 100%; transition: width 0.2s; }
.fill.hull { background: linear-gradient(90deg, #ff6a6a, #ffb15c); }
.fill.hull.critical { background: linear-gradient(90deg, #ff2244, #ff6622); animation: hullPulse 0.7s ease-in-out infinite alternate; }
.fill.fuel { background: linear-gradient(90deg, #5cc6ff, #8affc1); }
.fill.cargo { background: linear-gradient(90deg, #b48cff, #ff8cf0); }
@keyframes hullPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* Hazard warning strip (under status panel) */
.hazard-banner {
    background: rgba(80, 12, 18, 0.88); border: 1px solid rgba(255, 93, 93, 0.55);
    border-radius: 10px; padding: 10px 12px; box-shadow: 0 0 24px rgba(255, 40, 40, 0.25);
    animation: hazardPulse 1.1s ease-in-out infinite alternate;
}
.hazard-banner.critical {
    background: rgba(110, 8, 16, 0.94); border-color: #ff4466;
    animation: hazardPulse 0.45s ease-in-out infinite alternate;
}
.hazard-banner .hazard-title { font-weight: 800; font-size: 12px; color: #ffb0b0; letter-spacing: 0.04em; }
.hazard-banner .hazard-detail { margin-top: 4px; font-size: 11px; color: #ffd0d0; line-height: 1.35; }
@keyframes hazardPulse { from { box-shadow: 0 0 10px rgba(255,40,40,0.15); } to { box-shadow: 0 0 28px rgba(255,60,60,0.4); } }

/* Named den clear-progress — independent panel to the right of Status */
.den-panel {
    width: 200px;
    max-width: min(220px, 36vw);
    flex: 0 0 auto;
    padding: 10px 12px;
}
.den-panel.hidden { display: none; }
.den-panel .panel-title { color: #ff9a7a; }
.den-progress {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
}
.den-progress-row {
    padding: 5px 8px; border-radius: 6px;
    background: rgba(40, 8, 8, 0.55);
    border: 1px solid rgba(255, 90, 70, 0.35);
}
.den-progress-label {
    font-size: 11px; font-weight: 600; color: #ffc8b8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
.den-progress-bar {
    height: 5px; border-radius: 2px;
    background: rgba(255,255,255,0.1); overflow: hidden;
}
.den-progress-bar > div {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #ff6a4a, #ffb080);
    transition: width 0.2s ease-out;
}
.den-progress-row.cleared .den-progress-bar > div {
    background: linear-gradient(90deg, #8affc1, #ffe08a);
}

/* Full-screen death cause card — above .overlay (50) so Helios dock reopen doesn't bury it */
.death-card {
    position: fixed; top: 18%; left: 50%; transform: translateX(-50%); z-index: 70;
    width: min(420px, 90vw); background: rgba(40, 8, 12, 0.94); border: 1px solid rgba(255, 93, 93, 0.7);
    border-radius: 14px; padding: 20px 22px; text-align: center;
    box-shadow: 0 16px 50px rgba(0,0,0,0.55); pointer-events: none;
    animation: slideIn 0.3s ease;
}
.death-card h2 { margin: 0 0 8px; color: #ff8a8a; font-size: 22px; letter-spacing: 0.06em; }
.death-card .cause { color: #ffe0e0; font-size: 14px; margin-bottom: 12px; }
.death-card .losses { color: var(--muted); font-size: 12px; line-height: 1.5; }
.death-card .losses b { color: var(--warn); }

@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- notices / prompt ---- */
/* Upper-right toast stack — below default #hudTopBar pill (incl. Menus drag strip) */
#notices {
    position: fixed;
    top: var(--hud-notices-top);
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto;
    transform: none;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(380px, 42vw);
}
/* Fullscreen overlay open: keep stack in the safe corner, away from modal chrome */
#notices.overlay-safe {
    top: calc(var(--hud-notices-top) + 14px);
    right: max(12px, env(safe-area-inset-right, 0px));
    max-width: min(320px, 36vw);
}
.notice { background: rgba(10, 18, 38, 0.94); border: 1px solid var(--panel-border); border-left: 3px solid var(--accent);
    padding: 9px 16px; border-radius: 8px; font-size: 13px; animation: noticeIn 0.25s ease; max-width: 100%;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45); text-align: left; }
.notice.warn { border-left-color: var(--warn); }
.notice.danger { border-left-color: var(--danger); }
.notice.good { border-left-color: var(--accent-2); }
.notice.big { font-size: 15px; font-weight: 700; padding: 12px 18px; }
/* Sticky / ack-required: stays until × dismiss; clickable despite #notices pointer-events:none */
.notice.sticky {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    padding-right: 10px;
}
.notice.sticky .notice-body { flex: 1; min-width: 0; }
.notice.sticky .notice-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text);
    opacity: 0.55;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    margin: -2px 0 0;
}
.notice.sticky .notice-dismiss:hover,
.notice.sticky .notice-dismiss:focus-visible {
    opacity: 1;
    color: #fff;
}
@keyframes noticeIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
#prompt { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 13;
    background: var(--panel); border: 1px solid var(--panel-border); padding: 10px 18px; border-radius: 24px; font-size: 14px; }
#prompt b { color: var(--accent); }

/* ---- overlays ---- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
    background: rgba(2,5,14,0.78); backdrop-filter: blur(4px); }

/* Dock uses real viewport sizing (no ui-scale zoom) so height %/vh is honest. */
#station.overlay {
    zoom: 1;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: max(4px, env(safe-area-inset-top, 0px)) 10px max(4px, env(safe-area-inset-bottom, 0px));
}

/* ---- entry ---- */
/* Scroll inside #entry (html/body stay overflow:hidden for the game canvas).
   Tall phones + soft keyboard must still reach Feedback / forms.
   Soft nebula plate under the panel — brand atmosphere without competing with EDGEVOID. */
#entry {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding: 24px;
    padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    min-height: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    background-color: #05070f;
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(40, 90, 160, 0.34), transparent 55%),
        radial-gradient(ellipse 55% 38% at 12% 70%, rgba(30, 80, 140, 0.16), transparent 55%),
        radial-gradient(ellipse 60% 40% at 88% 88%, rgba(20, 70, 120, 0.22), transparent 50%),
        linear-gradient(180deg, rgba(5, 7, 15, 0.5) 0%, rgba(5, 7, 15, 0.78) 55%, rgba(5, 7, 15, 0.94) 100%),
        url('../assets/space-backdrop-v2.png'),
        url('../assets/space-backdrop.png');
    background-size: cover, cover, cover, cover, cover, cover;
    background-position: center, center, center, center, center, center;
    background-repeat: no-repeat;
    animation: entryNebulaDrift 56s ease-in-out infinite alternate;
}
@keyframes entryNebulaDrift {
    from { background-position: 46% 44%, 18% 68%, 86% 86%, center, 48% 50%, center; }
    to { background-position: 54% 52%, 10% 72%, 90% 90%, center, 52% 48%, center; }
}
@supports (align-items: safe center) {
    #entry {
        align-items: safe center;
        justify-content: safe center;
    }
}
.entry-window {
    width: min(440px, 92vw);
    background: var(--panel);
    border: 1px solid rgba(92, 198, 255, 0.22);
    border-radius: 16px;
    padding: 28px 24px 22px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 0 1px rgba(92, 198, 255, 0.1),
        0 0 48px rgba(40, 110, 190, 0.18),
        inset 0 1px 0 rgba(160, 220, 255, 0.08);
    text-align: center;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
}
/* Thin sci-fi frame ticks — corner marks, not a card stack */
.entry-window::before,
.entry-window::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 1;
    border-color: rgba(92, 198, 255, 0.55);
    border-style: solid;
}
.entry-window::before {
    top: 10px;
    left: 10px;
    border-width: 2px 0 0 2px;
}
.entry-window::after {
    bottom: 10px;
    right: 10px;
    top: auto;
    border-width: 0 2px 2px 0;
}
#entry.entry-connecting .entry-window {
    border-color: rgba(92, 198, 255, 0.38);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        0 0 0 1px rgba(92, 198, 255, 0.2),
        0 0 64px rgba(70, 150, 230, 0.28),
        inset 0 1px 0 rgba(160, 220, 255, 0.12);
    animation: entryWindowLinkPulse 2.2s ease-in-out infinite;
}
@keyframes entryWindowLinkPulse {
    0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(92, 198, 255, 0.18), 0 0 52px rgba(60, 130, 210, 0.22), inset 0 1px 0 rgba(160, 220, 255, 0.1); }
    50% { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(92, 198, 255, 0.32), 0 0 72px rgba(90, 180, 255, 0.36), inset 0 1px 0 rgba(180, 230, 255, 0.16); }
}
#entry.entry-ready .entry-window {
    animation: entryWindowSettle 0.85s ease-out;
}
@keyframes entryWindowSettle {
    from { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(92, 198, 255, 0.28), 0 0 70px rgba(92, 198, 255, 0.32), inset 0 1px 0 rgba(180, 230, 255, 0.14); }
    to { box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(92, 198, 255, 0.1), 0 0 48px rgba(40, 110, 190, 0.18), inset 0 1px 0 rgba(160, 220, 255, 0.08); }
}
.entry-hero {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
}
.entry-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 220px;
    height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(70, 160, 255, 0.22), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.entry-brand {
    margin: 0;
    font-size: 40px;
    letter-spacing: 6px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 28px rgba(92, 198, 255, 0.28);
    position: relative;
    z-index: 1;
}
.entry-brand span {
    color: var(--accent);
    text-shadow: 0 0 18px rgba(92, 198, 255, 0.5);
    animation: entryBrandPulse 3.6s ease-in-out infinite;
}
#entry.entry-connecting .entry-brand span {
    animation: entryBrandPulse 1.8s ease-in-out infinite;
}
@keyframes entryBrandPulse {
    0%, 100% { text-shadow: 0 0 14px rgba(92, 198, 255, 0.4); filter: brightness(1); }
    50% { text-shadow: 0 0 30px rgba(92, 198, 255, 0.85); filter: brightness(1.14); }
}
.entry-columns { display: flex; flex-direction: column; gap: 18px; }
.entry-auth { text-align: center; }
.entry-aside { text-align: left; }
.entry-window h1 { margin: 0; font-size: 40px; letter-spacing: 6px; font-weight: 800; color: #fff; }
.entry-window h1 span { color: var(--accent); }
.tagline { color: var(--muted); margin: 8px auto 12px; font-size: 13px; line-height: 1.4; max-width: 42ch; position: relative; z-index: 1; }
#entry.entry-connecting button.primary.big:disabled,
#entry.entry-connecting #loginBtn:disabled,
#entry.entry-connecting #registerBtn:disabled,
#entry.entry-connecting #resumeBtn:disabled,
#entry.entry-link-failed button.primary.big:disabled,
#entry.entry-link-failed #loginBtn:disabled,
#entry.entry-link-failed #registerBtn:disabled,
#entry.entry-link-failed #resumeBtn:disabled {
    opacity: 0.78;
    cursor: wait;
    filter: saturate(0.75);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
}
#entry.entry-connecting button.primary.big:disabled {
    animation: entryCtaWait 1.6s ease-in-out infinite;
}
@keyframes entryCtaWait {
    0%, 100% { box-shadow: 0 0 0 0 rgba(92, 198, 255, 0); filter: saturate(0.75) brightness(1); }
    50% { box-shadow: 0 0 22px 0 rgba(92, 198, 255, 0.42); filter: saturate(0.9) brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    #entry,
    #entry.entry-connecting .entry-window,
    #entry.entry-ready .entry-window,
    .entry-brand span,
    #entry.entry-connecting .entry-brand span,
    #entry.entry-connecting button.primary.big:disabled {
        animation: none !important;
    }
}
.entry-body { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; text-align: left; font-size: 12px; color: var(--muted); }
.field em { color: var(--accent); font-style: normal; }
.pilot-name-row { display: flex; gap: 8px; align-items: stretch; }
.pilot-name-row input { flex: 1; min-width: 0; }
.pilot-name-row button { flex: 0 0 auto; white-space: nowrap; padding: 0 12px; font-size: 12px; }
input { background: rgba(255,255,255,0.06); border: 1px solid var(--panel-border); color: var(--text);
    padding: 11px 13px; border-radius: 8px; font-size: 14px; outline: none; }
input:focus { border-color: var(--accent); }
button { cursor: pointer; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.06); color: var(--text);
    padding: 10px 16px; border-radius: 8px; font-size: 14px; transition: all 0.15s; }
button:hover { border-color: var(--accent); background: rgba(92,198,255,0.14); }
button.primary { background: linear-gradient(90deg, #2b7fff, #5cc6ff); border: none; color: #021022; font-weight: 700; }
button.primary:hover { filter: brightness(1.1); }
button.big { padding: 14px; font-size: 16px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--panel-border); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-grid input { grid-column: 1 / 3; }
.auth-email-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--muted, #9fb4d8); line-height: 1.35; text-align: center; }
.auth-field-hint { margin: 0; font-size: 11px; color: var(--muted, #9fb4d8); line-height: 1.35; font-weight: 400; }
.auth-more-toggle {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: inherit;
    color: var(--accent, #5cc6ff);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    vertical-align: baseline;
}
.auth-more-toggle:hover { color: #9adfff; }
.auth-more-panel {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.22);
    background: rgba(6, 12, 28, 0.55);
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted, #9fb4d8);
    text-align: left;
    font-weight: 400;
}
.auth-more-panel.hidden,
.auth-more-panel[hidden] { display: none !important; }
.forgot-link { display: block; margin: 4px 0 0; text-align: center; width: 100%; }
.forgot-panel { margin-top: 10px; padding: 12px; border-radius: 8px; background: rgba(8,14,28,0.65);
    border: 1px solid rgba(120,160,220,0.2); }
.forgot-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted, #9fb4d8); line-height: 1.4; }
.forgot-panel input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.forgot-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.forgot-panel .good { color: #8affc1; margin-top: 8px; font-size: 12.5px; }
.returning { margin-top: 4px; margin-bottom: 10px; text-align: center; }
.returning-hint { margin: 6px 0 0; }
#guestHint { margin: 6px 0 10px; }
.entry-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 8, 18, 0.72);
    backdrop-filter: blur(3px);
}
.entry-modal {
    width: min(420px, 100%);
    padding: 18px 18px 14px;
    border-radius: 12px;
    border: 1px solid rgba(120, 160, 220, 0.35);
    background: linear-gradient(165deg, rgba(14, 22, 42, 0.98), rgba(6, 10, 22, 0.98));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    text-align: left;
    color: var(--text, #e8f0ff);
}
.entry-modal h3 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #fff;
}
.entry-modal-body { font-size: 13px; line-height: 1.45; color: var(--muted, #9fb4d8); }
.entry-modal-body p { margin: 0 0 8px; }
.entry-modal-body ul { margin: 0 0 8px; padding-left: 1.2em; }
.entry-modal-body li { margin-bottom: 4px; }
.entry-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}
.entry-modal-actions-wrap {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.settings-logout-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.settings-logout-guest-actions .settings-btn { margin: 0; }
.settings-session-section {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(120, 160, 220, 0.18);
    margin-bottom: 16px;
}
.entry-modal-actions button.settings-btn-danger {
    border: 1px solid rgba(220, 100, 90, 0.55);
    color: #ffc8b8;
    background: rgba(80, 24, 20, 0.55);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
}
.entry-modal-actions button.settings-btn-danger:hover {
    border-color: #ff8866;
    color: #ffe0d4;
}
.entry-modal-actions button { font-size: 13px; padding: 8px 14px; }
.entry-modal-field {
    display: block;
    margin-top: 10px;
}
.entry-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.4);
    background: rgba(4, 10, 22, 0.85);
    color: var(--text, #e8f0ff);
    font-size: 14px;
    outline: none;
}
.entry-modal-input:focus {
    border-color: var(--accent, #5cc6ff);
    box-shadow: 0 0 0 2px rgba(92, 198, 255, 0.2);
}
.entry-modal-input::placeholder { color: rgba(160, 180, 210, 0.45); }
.error { background: rgba(255,93,93,0.12); border: 1px solid var(--danger); color: #ffb3b3; padding: 9px 12px;
    border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.entry-activity { margin: 0 auto; padding: 8px 12px; border-radius: 10px;
    background: rgba(92,198,255,0.08); border: 1px solid rgba(92,198,255,0.22);
    color: var(--muted); font-size: 12px; line-height: 1.4; display: flex; flex-wrap: wrap;
    gap: 6px 10px; justify-content: center; align-items: center; max-width: 100%;
    /* Same footprint before/after /api/status so flex-centered #entry does not jump. */
    min-height: calc(1.4em + 16px); box-sizing: border-box; }
.entry-activity b { color: #fff; font-weight: 700; }
.entry-activity .sep { color: rgba(255,255,255,0.25); }
.entry-news { margin: 0; padding: 0; text-align: left; }
.entry-news-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 8px; font-weight: 700; }
.entry-news ul { margin: 0 0 10px; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.45;
    /* Reserve ~4 preview bullets so news.json fill does not recenter the login window. */
    min-height: calc(4 * (1.45em + 6px)); }
.entry-news li { margin: 3px 0; }
.entry-news li.muted { list-style: none; margin-left: -18px; }
.entry-feedback { display: block; margin-top: 14px; font-size: 13px; }
.entry-manual { display: block; margin-top: 10px; font-size: 13px; }
.entry-manual { display: block; margin-top: 10px; font-size: 13px; }
.entry-motto { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.entry-browser-tip {
    margin: 8px 0 0;
    color: rgba(127, 147, 184, 0.72);
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.entry-browser-tip b { color: rgba(159, 180, 216, 0.9); font-weight: 600; }
button.linkish { background: transparent; border: none; color: var(--accent); padding: 0; font-size: 12.5px;
    text-decoration: underline; text-underline-offset: 3px; }
button.linkish:hover { background: transparent; border: none; color: #fff; filter: none; }

/* Desktop: hero centered on top; auth left · version/notes right — prefer one 1080p viewport */
@media (min-width: 900px) {
    #entry {
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: max(16px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
    }
    #entry .entry-window {
        width: min(920px, 94vw);
        max-width: 920px;
        padding: 26px 32px 24px;
    }
    #entry .entry-hero {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(90, 150, 255, 0.16);
    }
    #entry .entry-window h1,
    #entry .entry-brand {
        font-size: clamp(48px, 5.5vw, 56px);
        letter-spacing: 8px;
        line-height: 1.02;
    }
    #entry .tagline {
        margin: 10px auto 12px;
        font-size: 14px;
        max-width: none;
        white-space: nowrap;
    }
    #entry .entry-activity {
        margin: 0 auto;
        padding: 7px 12px;
        font-size: 11.5px;
        width: fit-content;
        max-width: min(520px, 100%);
    }
    #entry .entry-columns {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        gap: 8px 36px;
        align-items: start;
        text-align: left;
    }
    #entry .entry-auth {
        text-align: center;
        padding-right: 8px;
    }
    #entry .entry-body { gap: 10px; }
    #entry .entry-aside {
        text-align: left;
        padding: 4px 0 0 28px;
        border-left: 1px solid rgba(90, 150, 255, 0.18);
        min-height: 100%;
    }
    #entry .entry-news-title {
        font-size: 12px;
        letter-spacing: 0.1em;
        margin-bottom: 10px;
    }
    #entry .entry-news ul {
        font-size: 12.5px;
        line-height: 1.45;
        margin-bottom: 12px;
        /* No max-height/overflow clip — JS caps items + word-boundary ellipsis.
           Prior calc(8 * 1.45em + 24px) + overflow:hidden mid-line-clipped the last bullet. */
        max-height: none;
        overflow: visible;
    }
    #entry .entry-feedback {
        margin-top: 16px;
        font-size: 13px;
    }
    #entry .entry-manual {
        margin-top: 12px;
        font-size: 13px;
    }
    #entry .entry-motto {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(90, 150, 255, 0.12);
    }
}

/* ---- news overlay ---- */
#news { z-index: 60; }
.news-window { width: min(720px, 94vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.news-window header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid var(--panel-border); }
.news-window h2 { margin: 0; font-size: 20px; color: #fff; letter-spacing: 1px; }

/* ---- wipe notice (post-dev-wipe loyalty) ---- */
#wipeNotice { z-index: 70; }
.wipe-notice-window { width: min(460px, 92vw); background: var(--panel); border: 1px solid rgba(255, 210, 90, 0.35);
    border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.65); overflow: hidden;
    background-image: linear-gradient(160deg, rgba(48, 36, 12, 0.55), transparent 55%); }
.wipe-notice-window header { padding: 18px 20px 8px; }
.wipe-notice-window h2 { margin: 0; font-size: 20px; color: #ffe9a8; letter-spacing: 0.04em; }
.wipe-notice-body { padding: 4px 20px 8px; line-height: 1.55; font-size: 14px; }
.wipe-notice-copy { margin: 0 0 12px; color: var(--text, #d8e2f0); }
.wipe-notice-seal { margin: 0 0 10px; font-size: 15px; color: #ffd25a; font-weight: 600; }
.wipe-notice-seal.earned { color: #ffe9a8; }
.wipe-notice-hint { margin: 0; font-size: 12px; }
.wipe-notice-window footer { padding: 12px 20px 18px; display: flex; justify-content: flex-end; }
.news-activity { padding: 12px 20px; border-bottom: 1px solid var(--panel-border); color: var(--muted);
    font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
    background: rgba(92,198,255,0.06); }
.news-activity b { color: #fff; }
.news-activity .sep { color: rgba(255,255,255,0.25); }
.news-body { flex: 1; overflow-y: auto; padding: 18px 22px 24px; line-height: 1.55; font-size: 14px; }
.news-body .empty { color: var(--muted); }
.news-section { margin-bottom: 22px; }
.news-section h3 { margin: 0 0 12px; color: var(--accent); font-size: 16px; letter-spacing: 0.04em; }
.news-release {
    margin: 0 0 22px;
    padding: 16px 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(122, 255, 208, 0.28);
    background:
        linear-gradient(145deg, rgba(20, 48, 56, 0.92), rgba(10, 18, 32, 0.88)),
        radial-gradient(ellipse at 12% 0%, rgba(122, 255, 208, 0.14), transparent 55%);
}
.news-release-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.news-release-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.news-release-headline {
    margin: 0 0 8px;
    font-size: 15px;
    color: #d7e6ff;
    font-weight: 600;
}
.news-release-summary {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}
.news-phase { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); }
.news-phase-label { font-weight: 700; color: #fff; margin-bottom: 4px; }
.news-phase-blurb { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.news-phase ul, .news-log ul { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.news-phase li, .news-log li { margin: 3px 0; }
.news-log { margin-bottom: 14px; }
.news-log-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin-bottom: 6px; }
.news-date { font-size: 12px; color: var(--accent-2); font-weight: 600; }
.news-log-title { color: #fff; font-weight: 700; }
.news-foot { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.news-foot .linkish { margin-left: 8px; font-size: 12px; }

/* ---- feedback form ---- */
.feedback-window { width: min(440px, 92vw); background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.feedback-window header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.feedback-window h2 { margin: 0; font-size: 18px; color: #fff; }
.feedback-blurb { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.feedback-window .field { margin-bottom: 10px; }
.feedback-window select, .feedback-window textarea, .feedback-window input[type="text"] {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px;
    background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 8px; }
.feedback-window textarea { resize: vertical; min-height: 100px; }
.feedback-actions { display: flex; gap: 10px; margin-top: 12px; }
.feedback-status { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px;
    background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border); }
.feedback-status.good { color: #9dffb0; border-color: rgba(80,200,120,0.4); }
.feedback-status.danger { color: #ffb3b3; border-color: var(--danger); }
.feedback-window .field.locked input { opacity: 0.85; }

/* ---- station ---- */
/* Locked height so Market ↔ Records (etc.) don't resize the chrome; tabs scroll inside. */
.station-window {
    width: min(1200px, 96vw);
    height: min(85vh, 100dvh - 16px);
    max-height: min(85vh, 100dvh - 16px);
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.station-window header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;
    border-bottom: 1px solid var(--panel-border); flex-shrink: 0; gap: 12px; }
.station-window h2 { margin: 0; font-size: 20px; color: #fff; }
.station-title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.station-blurb { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); max-width: 48ch; }
.station-meters {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}
.station-credits {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    flex-shrink: 0; padding: 0 4px; min-width: 5.5rem;
}
.station-credits .label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.station-credits b {
    color: var(--credits); font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.station-hold b { color: var(--accent, #5cc6ff); }
.station-hold.is-tight b { color: var(--warn, #ffb347); }
.station-hold.is-full b { color: var(--danger, #ff6a7a); }
.station-window.founder-hub header { border-bottom-color: rgba(158, 240, 255, 0.28); }
.station-window.founder-hub h2 { color: #e8fbff; }
.station-window.founder-hub .station-blurb { color: #9ad8e8; }
.guild-hub-list { margin: 0 0 10px; padding-left: 1.15em; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.guild-hub-list b { color: #cfefff; font-weight: 600; }
.mt-founder { color: #9ef0ff; font-weight: 600; }
.station-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.station-actions #closeStationBtn {
    font-weight: 500; opacity: 0.88;
    background: transparent; border-color: rgba(255,255,255,0.18);
}
.station-actions #undockBtn.station-undock,
.station-actions #undockBtn.primary {
    min-width: 7.25rem; padding: 10px 18px; font-size: 15px; letter-spacing: 0.04em;
    box-shadow: 0 0 0 1px rgba(92,198,255,0.4), 0 8px 22px rgba(43,127,255,0.32);
}
.station-actions #undockBtn.station-undock:hover,
.station-actions #undockBtn.primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 0 1px rgba(92,198,255,0.55), 0 10px 28px rgba(43,127,255,0.4);
}
.station-goal-strip {
    display: flex; align-items: stretch; gap: 0; flex-shrink: 0;
    margin: 0; padding: 0 16px;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(90deg, rgba(92,198,255,0.08), rgba(0,0,0,0.12));
}
.station-goal-strip.hidden { display: none; }
.station-goal-chip {
    flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: 0; padding: 8px 4px 8px 0; text-align: left; cursor: pointer;
    background: transparent; border: none; color: inherit; font: inherit;
}
.station-goal-chip:hover .goal-step-title { color: #fff; }
.station-goal-strip .goal-step-dismiss { align-self: center; margin: 4px 0; }
.goal-step-kicker {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--accent); font-weight: 700; flex-shrink: 0;
}
.goal-step-title { font-size: 13px; font-weight: 700; color: #e8f0ff; }
.goal-step-hint {
    flex: 1 1 100%; font-size: 11.5px; color: var(--muted); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goal-step-dismiss {
    flex-shrink: 0; width: 32px; height: 32px; padding: 0; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.25);
    color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.goal-step-dismiss:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
/* Flight: compact next-goal coach chip — default docks left of Ops (HudLayout pins it) */
.goal-step-chip {
    position: absolute; z-index: 6;
    top: var(--hud-topbar-inset-top);
    /* Approx left of Menus+Ops until HudLayout pins (Ops ≈ God/Obs/Fix expanded) */
    right: calc(max(16px, env(safe-area-inset-right, 0px)) + 16px + min(380px, 56vw) + 210px + 16px);
    left: auto;
    transform: none;
    display: flex; align-items: stretch; gap: 0; max-width: min(420px, 92vw);
    width: min(300px, 42vw);
    border-radius: 10px; overflow: hidden;
    background: rgba(10, 16, 28, 0.92);
    border: 1px solid rgba(92,198,255,0.35);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.goal-step-chip.hidden { display: none; }
.goal-step-chip-body {
    flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    margin: 0; padding: 8px 12px; text-align: left; cursor: pointer;
    background: transparent; border: none; color: inherit; font: inherit;
}
.goal-step-chip .goal-step-dismiss { border-radius: 0; border: none; border-left: 1px solid rgba(255,255,255,0.12); }
.arming-seat-pad.drop-legal {
    outline: 2px solid rgba(138,255,193,0.65);
    box-shadow: 0 0 14px rgba(138,255,193,0.28);
}
.arming-seat-pad.drop-illegal {
    opacity: 0.42; filter: grayscale(0.35);
}
.arming-seat-pad.drag-over.drop-legal {
    outline-color: rgba(138,255,193,0.95);
    background: rgba(138,255,193,0.12);
}
.tabs { display: flex; gap: 4px; padding: 10px 16px 0; flex-shrink: 0; }
.tabs button { border-radius: 8px 8px 0 0; border-bottom: none; position: relative; }
.tabs button.active { background: rgba(92,198,255,0.18); border-color: var(--accent); color: #fff; }
.tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
    border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1;
    background: rgba(138,255,193,0.25); color: #8affc1; border: 1px solid rgba(138,255,193,0.45);
    vertical-align: middle;
}
.tab-badge.hidden { display: none; }
.tabpane { display: none; padding: 12px 18px 16px; overflow: hidden; }
.tabpane.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Station: fill the locked window — content scrolls; tab switches don't grow/shrink chrome. */
.station-window > .tabpane.active {
    flex: 1 1 0%;
    min-height: 0;
}
/* Market / Bay / Services use an internal scroll region so category tabs stay pinned. */
.tabpane.active:has(.shop-pane-head),
.tabpane.active:has(> .shop-pane-scroll) {
    overflow: hidden;
}
/* Guild tab: block stack so overflow boxes (.guild-notices) are not flex-shrunk to 0 height
   (that hid the message board while the post form below stayed visible). */
#tab-guild.tabpane.active {
    display: block;
    overflow-y: auto;
}
.shop-pane-head { flex: 0 0 auto; }
.shop-pane-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-top: 10px;
}
/* Offer cards: thumb | copy | actions. minmax(~520) → two columns in the
   1200px station; one column below ~560 / mobile (@media max-width 600). */
.shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
    gap: 8px;
}
.shop-list.shop-list-stack { grid-template-columns: 1fr; }
/* Bay / Market / Services offers — same 2-col cap (was forced single-column). */
.shop-list.shop-list-offers {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
}
/* Market / Bay category tabs — single panel selection (not filter chips); sticky outside scroll */
.shop-cat-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-bottom: 1px solid rgba(90, 150, 255, 0.28);
    background: linear-gradient(180deg, rgba(8, 16, 32, 0.75), rgba(4, 10, 22, 0.45));
    flex-shrink: 0;
}
.shop-cat-tab {
    flex: 1 0 auto;
    min-width: 6.5rem;
    margin: 0;
    padding: 8px 10px 9px;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    -webkit-user-select: none;
    user-select: none;
}
.shop-cat-tab:hover {
    color: #cfe0ff;
    background: rgba(92, 198, 255, 0.06);
}
.shop-cat-tab.active {
    color: #e8f0ff;
    border-bottom-color: var(--accent);
    background: rgba(92, 198, 255, 0.1);
    box-shadow: inset 0 -1px 0 rgba(92, 198, 255, 0.35);
}
.shop-cat-tab.pinned { color: #cfe8ff; }
.shop-cat-label {
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: none;
}
/* Separate control (not nested in another <button>) so touch ★ pin works reliably */
.shop-cat-pin {
    flex: 0 0 auto;
    width: 22px; height: 22px; padding: 0; margin: 0 0 0 2px;
    border: none; border-radius: 4px;
    background: transparent; color: var(--muted);
    font-size: 12px; line-height: 1; cursor: pointer;
    opacity: 0.55;
    display: inline-flex; align-items: center; justify-content: center;
}
.shop-cat-pin:hover, .shop-cat-tab.active .shop-cat-pin { opacity: 0.95; color: #e8f0ff; }
.shop-cat-pin.is-pinned {
    opacity: 1; color: #ffba4d;
    text-shadow: 0 0 6px rgba(255, 186, 77, 0.45);
}
.shop-cat-body { min-height: 0; }
.shop-cat-blurb { font-size: 12px; margin: 0 0 8px; line-height: 1.35; }
.section-title.subtle { font-size: 11px; letter-spacing: 0.08em; opacity: 0.85; margin-top: 12px; }
.shop-item.seated { border-color: rgba(138, 255, 193, 0.22); background: rgba(138, 255, 193, 0.04); }
/* Owned stowed strip — mint chrome, distinct from cyan buy rows */
.bay-section { margin-top: 10px; }
.bay-section-banner {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 4px 0 6px; padding: 6px 10px; border-radius: 6px;
}
.bay-section-banner.yours {
    background: linear-gradient(90deg, rgba(138, 255, 193, 0.14), rgba(138, 255, 193, 0.03));
    border-left: 3px solid rgba(138, 255, 193, 0.65);
}
.bay-section-banner.offers {
    background: linear-gradient(90deg, rgba(92, 198, 255, 0.12), rgba(92, 198, 255, 0.02));
    border-left: 3px solid rgba(92, 198, 255, 0.55);
}
.bay-section-kicker {
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.bay-section-banner.yours .bay-section-kicker { color: #8affc1; }
.bay-section-banner.offers .bay-section-kicker { color: #5cc6ff; }
.bay-family-head {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8a9bb8);
    margin: 12px 0 2px;
    padding: 0 2px;
    line-height: 1.3;
    border: none;
}
.bay-family-head::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 5px;
    background: linear-gradient(
        90deg,
        rgba(138, 155, 184, 0.5),
        rgba(138, 155, 184, 0.18) 55%,
        transparent
    );
}
.bay-buy-list > .bay-family-head:first-child { margin-top: 2px; }
/* Weapons Bay: ~4 offer cards across a station panel; family heads span the row. */
.bay-buy-list.bay-weapons {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
/*
 * Weapon offers: thumb + copy on top, price/actions as a full-width footer.
 * Side trail + align-items:center left empty bands above/below Buy when briefs wrap tall.
 */
.bay-buy-list.bay-weapons .shop-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "thumb copy"
        "actions actions";
    align-items: start;
    column-gap: 10px;
    row-gap: 8px;
}
.bay-buy-list.bay-weapons .shop-preview {
    grid-area: thumb;
    align-self: start;
}
.bay-buy-list.bay-weapons .info {
    grid-area: copy;
}
.bay-buy-list.bay-weapons .shop-item-trail {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
}
.bay-buy-list.bay-weapons .shop-item-trail .price {
    margin-right: auto;
    align-self: center;
}
.bay-buy-list.bay-weapons .shop-item-trail > button,
.bay-buy-list.bay-weapons .shop-item-trail .loot-actions {
    width: auto;
}
.bay-buy-list.bay-weapons .shop-item-trail .loot-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}
.bay-buy-list.bay-weapons .shop-item-trail .loot-actions button {
    white-space: nowrap;
}
.bay-section-title {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text);
}
.bay-section-rule {
    border: none; height: 1px; margin: 14px 0 8px;
    background: linear-gradient(90deg, transparent, rgba(92, 198, 255, 0.35), transparent);
}
.bay-own-list {
    padding: 8px; margin: 0 0 4px; border-radius: 10px;
    background: rgba(138, 255, 193, 0.045);
    border: 1px solid rgba(138, 255, 193, 0.18);
}
.bay-buy-list { margin-top: 2px; }
.shop-item.bay-owned {
    border-color: rgba(138, 255, 193, 0.35);
    background: rgba(138, 255, 193, 0.07);
    box-shadow: inset 3px 0 0 rgba(138, 255, 193, 0.45);
}
.shop-item.bay-owned.scorched-hint {
    opacity: 0.85;
    border-style: dashed;
    box-shadow: inset 3px 0 0 rgba(158, 200, 232, 0.35);
}
.bay-own-list .shop-preview {
    border-color: rgba(138, 255, 193, 0.45);
    background: rgba(20, 36, 28, 0.55);
}
.bay-own-list .shop-preview:hover,
.bay-own-list .shop-preview:focus-visible {
    border-color: rgba(138, 255, 193, 0.75);
}
.bay-buy-list .shop-preview {
    border-color: rgba(92, 198, 255, 0.4);
}
.bay-buy-list .shop-preview:hover,
.bay-buy-list .shop-preview:focus-visible {
    border-color: rgba(92, 198, 255, 0.7);
}
.shop-item .price.credit { color: var(--accent-2); }
.own-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em; vertical-align: middle;
}
.own-badge.fitted {
    color: #8affc1; border: 1px solid rgba(138,255,193,0.4); background: rgba(138,255,193,0.1);
}
.own-badge.stowed {
    color: #9ed9b8; border: 1px solid rgba(138,255,193,0.45); background: rgba(138,255,193,0.12);
}
.own-hint { color: #9ec8e8; }
.bay-own-blurb { margin-bottom: 6px; }
.bay-actions { flex-shrink: 0; }
.fit-replace-hint { color: #9ec8e8; }
.fit-kind {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    vertical-align: middle;
}
.fit-kind.upgrade { color: #8affc1; border: 1px solid rgba(138,255,193,0.4); background: rgba(138,255,193,0.08); }
.fit-kind.downgrade { color: #ffb3bb; border: 1px solid rgba(255,92,108,0.45); background: rgba(255,92,108,0.1); }
.fit-kind.sidegrade { color: #ffd59a; border: 1px solid rgba(255,186,77,0.4); background: rgba(255,186,77,0.08); }
.fit-deltas { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.fit-delta { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fit-delta.up { color: #8affc1; }
.fit-delta.down { color: #ffb3bb; }
.fit-delta i { font-style: normal; font-weight: 500; opacity: 0.85; }
.fit-delta-summary { font-size: 11px; margin-top: 4px; }
.fit-delta-empty { font-size: 11.5px; margin-top: 2px; }
.shop-item .weapon-brief {
    color: var(--muted); font-size: 11.5px; line-height: 1.35;
    white-space: normal; display: block;
}
.fit-confirm {
    margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(92,198,255,0.35);
    background: linear-gradient(135deg, rgba(12, 22, 40, 0.95), rgba(20, 28, 48, 0.88));
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.fit-confirm.is-downgrade {
    border-color: rgba(255,92,108,0.45);
    background: linear-gradient(135deg, rgba(36, 14, 22, 0.95), rgba(28, 18, 32, 0.9));
}
.fit-confirm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.fit-confirm-kind { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; }
.fit-confirm.is-downgrade .fit-confirm-kind { color: #ffb3bb; }
.fit-confirm-net { color: var(--credits); font-weight: 700; white-space: nowrap; }
.fit-confirm-swap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-bottom: 6px; font-size: 13px; }
.fit-confirm-arrow { color: var(--muted); }
.fit-confirm-cost { font-size: 11.5px; margin-bottom: 6px; }
.fit-confirm-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.fit-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.fit-confirm-actions button.danger {
    background: rgba(255,92,108,0.2); border-color: rgba(255,92,108,0.55); color: #ffd0d5;
}
.shop-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 8px;
    min-width: 0; }
.shop-item.hot { border-color: rgba(255,186,77,0.45); background: rgba(255,186,77,0.06); }
.shop-item .info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.shop-item .name { font-weight: 600; line-height: 1.25; }
.shop-item .desc { color: var(--muted); font-size: 11.5px; line-height: 1.35;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; word-break: break-word; }
.shop-item .desc-stats { color: var(--muted); font-size: 11.5px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item.arming-seat select { max-width: 14rem; }

/* Bay → Arming visual board: ship silhouette + hardpoint pads + rack tray */
.arming-board { display: flex; flex-direction: column; gap: 10px; }
.arming-link-row { margin-bottom: 2px; }
.arming-link-row.is-link-on {
    border-color: rgba(138, 220, 255, 0.4);
    background: rgba(40, 90, 140, 0.18);
}
.arming-stage { display: flex; flex-direction: column; gap: 8px; }
.arming-ship-well {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 14px;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid rgba(92, 198, 255, 0.22);
    background:
        radial-gradient(ellipse at 50% 28%, rgba(40, 70, 120, 0.35) 0%, rgba(6, 12, 28, 0.92) 55%),
        linear-gradient(160deg, rgba(12, 22, 48, 0.9), rgba(4, 8, 18, 0.95));
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.arming-ship-preview {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
    flex-shrink: 0;
}
.arming-ship-thumb {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(92, 198, 255, 0.28);
    box-shadow: 0 0 28px rgba(40, 100, 180, 0.35);
    margin: 0;
    pointer-events: none;
}
.arming-seats {
    position: relative;
    inset: auto;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
}
.arming-seat-pad {
    position: relative;
    transform: none;
    width: var(--ship-drop-w, 136px);
    min-height: var(--ship-drop-min-h, 88px);
    box-sizing: border-box;
    padding: 6px 6px 5px;
    border-radius: 10px;
    border: 1px solid rgba(120, 160, 220, 0.35);
    background: rgba(8, 14, 28, 0.88);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: grab;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.arming-seat-pad:hover,
.arming-seat-pad:focus-visible {
    border-color: rgba(92, 198, 255, 0.65);
    outline: none;
}
.arming-seat-pad.is-active {
    border-color: rgba(255, 186, 77, 0.55);
    background: rgba(255, 186, 77, 0.08);
    box-shadow: 0 0 0 1px rgba(255, 186, 77, 0.2), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.arming-seat-pad.is-link-bank {
    border-color: rgba(138, 220, 255, 0.7);
    background: rgba(50, 110, 170, 0.22);
    box-shadow:
        0 0 0 1px rgba(138, 220, 255, 0.35),
        0 0 16px rgba(80, 160, 220, 0.28),
        0 6px 18px rgba(0, 0, 0, 0.45);
}
.arming-seat-pad.is-link-bank.is-active {
    border-color: rgba(180, 230, 255, 0.85);
    background: linear-gradient(160deg, rgba(255, 186, 77, 0.12), rgba(50, 110, 170, 0.28));
    box-shadow:
        0 0 0 1px rgba(255, 186, 77, 0.28),
        0 0 18px rgba(80, 160, 220, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.45);
}
.arming-seat-pad.is-picked {
    border-color: rgba(138, 255, 193, 0.7);
    box-shadow: 0 0 0 1px rgba(138, 255, 193, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.arming-seat-pad.is-dragging { opacity: 0.55; cursor: grabbing; }
.arming-seat-pad.drag-over:not(.drop-illegal) {
    border-color: rgba(138, 255, 193, 0.75);
    background: rgba(138, 255, 193, 0.12);
    box-shadow: 0 0 0 1px rgba(138, 255, 193, 0.35), 0 8px 22px rgba(0, 0, 0, 0.5);
}
.arming-seat-pad .arming-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    border-radius: 8px;
    pointer-events: none;
}
.arming-seat-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    width: 100%;
    min-width: 0;
}
.arming-seat-idx {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    text-transform: uppercase;
}
.arming-seat-name {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.arming-seat-stats {
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.arming-seat-link-badge {
    position: absolute;
    top: -7px;
    right: -4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    color: #dff6ff;
    background: rgba(40, 100, 160, 0.95);
    border: 1px solid rgba(160, 220, 255, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}
.arming-seat-pad.is-link-bank.is-active .arming-seat-link-badge {
    background: rgba(50, 120, 180, 0.98);
    border-color: rgba(255, 200, 120, 0.55);
}
.arming-seat-active-btn {
    margin-top: 2px;
    font-size: 10px;
    padding: 2px 7px;
    line-height: 1.3;
    width: auto;
    min-height: 0;
    cursor: pointer;
}
.arming-compare {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(92, 198, 255, 0.28);
    background: rgba(10, 18, 36, 0.92);
}
.arming-compare-head,
.arming-compare-lines {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    font-size: 12px;
    margin-bottom: 4px;
}
.arming-compare-arrow { color: var(--muted); }
.arming-tray {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(90, 150, 255, 0.14);
}
.arming-tray-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.arming-tray-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}
.arming-tray-blurb {
    font-size: 11.5px;
    margin-bottom: 8px;
    line-height: 1.35;
}
.arming-tray-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.arming-rack {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 148px;
    max-width: 220px;
    flex: 1 1 160px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.28);
    background: rgba(8, 14, 28, 0.72);
    cursor: grab;
    user-select: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.arming-rack:hover,
.arming-rack:focus-visible {
    border-color: rgba(92, 198, 255, 0.55);
    outline: none;
}
.arming-rack.is-picked {
    border-color: rgba(138, 255, 193, 0.65);
    background: rgba(138, 255, 193, 0.1);
    box-shadow: 0 0 0 1px rgba(138, 255, 193, 0.25);
}
.arming-rack.is-dragging { opacity: 0.55; cursor: grabbing; }
.arming-rack.is-stock { border-style: dashed; }
.arming-rack.is-partial {
    border-color: rgba(92, 198, 255, 0.45);
}
.arming-fit-strip {
    margin-bottom: 10px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(92, 198, 255, 0.22);
    background: rgba(6, 12, 28, 0.55);
}
.arming-fit-pads { margin-top: 8px; }
.arming-rack .arming-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin: 0;
    border-radius: 8px;
    pointer-events: none;
    flex-shrink: 0;
}
.arming-rack-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.arming-rack-name {
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arming-rack-stats {
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arming-rack-seated { font-size: 10.5px; }

.shop-item .fit-replace-hint,
.shop-item .own-hint { display: block; font-size: 11px; line-height: 1.3; margin-top: 1px; }
.shop-item .price { color: var(--credits); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.shop-item-trail {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 6px; flex: 0 0 auto; min-width: 7.5rem;
}
.shop-item-trail .price { align-self: flex-end; }
.shop-item-trail > button,
.shop-item-trail .loot-actions { width: 100%; }
.shop-item-trail > button { white-space: nowrap; }
.shop-item-trail .loot-actions { justify-content: flex-end; }
.shop-item.unaffordable { opacity: 0.55; }
.shop-item.unaffordable button:disabled { cursor: not-allowed; opacity: 0.85; }
.shop-item.slot-full { opacity: 0.5; }
.loot-bay-blurb { font-size: 12px; margin: 0 0 8px; line-height: 1.4; }
.bay-loot-pulse {
    animation: bayLootPulse 1.6s ease-out 2;
    border-radius: 8px;
}
.pirate-racks-title.bay-loot-pulse {
    color: #ffba4d;
    text-shadow: 0 0 12px rgba(255, 180, 70, 0.45);
}
@keyframes bayLootPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 186, 77, 0.55); background: rgba(255, 160, 60, 0.14); }
    55% { box-shadow: 0 0 0 10px rgba(255, 186, 77, 0); background: rgba(255, 160, 60, 0.05); }
    100% { box-shadow: 0 0 0 0 rgba(255, 186, 77, 0); background: transparent; }
}
.loot-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.shop-item.loot-unidentified {
    border-color: rgba(127, 147, 184, 0.55);
    background: linear-gradient(135deg, rgba(20, 28, 48, 0.9), rgba(40, 32, 58, 0.55));
}
.shop-item.loot-unidentified .name { color: #b8c4de; letter-spacing: 0.02em; }
.shop-item.loot-damaged {
    border-color: rgba(255, 160, 90, 0.4);
    background: rgba(255, 140, 60, 0.06);
}
.shop-item.loot-ready {
    border-color: rgba(138, 255, 193, 0.28);
}
.loot-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    vertical-align: middle;
}
.loot-badge.shroud {
    color: #9eb0d0; border: 1px solid rgba(158, 176, 208, 0.45); background: rgba(80, 95, 130, 0.25);
}
.loot-badge.scorched {
    color: #ffb37a; border: 1px solid rgba(255, 160, 90, 0.45); background: rgba(255, 120, 50, 0.12);
}
.loot-badge.ready {
    color: var(--accent-2); border: 1px solid rgba(138, 255, 193, 0.4); background: rgba(138, 255, 193, 0.08);
}
.loot-badge.tempered,
.loot-badge.special {
    color: #e8c878; border: 1px solid rgba(232, 200, 120, 0.5); background: rgba(232, 200, 120, 0.1);
}
.loot-badge.ammo {
    color: #ffb37a; border: 1px solid rgba(255, 160, 90, 0.5); background: rgba(255, 120, 50, 0.1);
}
.loot-badge.ammo.dry {
    color: #ff8a6a; border-color: rgba(255, 100, 80, 0.6); background: rgba(255, 70, 50, 0.14);
}
.hud-ammo {
    font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
    text-align: right; max-width: 180px;
}
.hud-ammo .ammo-chip {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    font-size: 11px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
    border: 1px solid rgba(255, 160, 90, 0.4); background: rgba(255, 120, 50, 0.1); color: #ffb37a;
}
.hud-ammo .ammo-chip:first-child { margin-left: 0; }
.hud-ammo .ammo-chip.is-active {
    font-size: 13px; font-weight: 800; padding: 2px 8px;
    color: #ffe0c0; border-color: rgba(255, 186, 77, 0.75);
    background: rgba(255, 140, 60, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 186, 77, 0.25);
}
.hud-ammo .ammo-chip.dry {
    color: #ff8a6a; border-color: rgba(255, 100, 80, 0.55); background: rgba(255, 70, 50, 0.14);
}
.hud-ammo .ammo-chip.is-active.dry {
    color: #ffd0c0; border-color: rgba(255, 120, 90, 0.85);
    background: rgba(255, 80, 60, 0.28);
}
.hud-ammo-row.hidden { display: none; }
.hud-ammo-row.is-active-ammo .label { color: #ffba4d; }
.hud-weapon.needs-ammo { font-variant-numeric: tabular-nums; }
.hud-weapon.ammo-dry { font-weight: 700; }
.loot-badge.unique {
    color: #d8b8ff; border: 1px solid rgba(200, 160, 255, 0.55); background: rgba(160, 120, 255, 0.12);
}
.loot-badge.special.rarity-uncommon {
    color: #6fe07f; border-color: rgba(111, 224, 127, 0.5); background: rgba(111, 224, 127, 0.1);
}
.loot-badge.special.rarity-rare {
    color: #5cc6ff; border-color: rgba(92, 198, 255, 0.5); background: rgba(92, 198, 255, 0.1);
}
.loot-badge.special.rarity-legendary {
    color: #ffba4d; border-color: rgba(255, 186, 77, 0.55); background: rgba(255, 186, 77, 0.12);
}
.shop-item.loot-tempered,
.shop-item.seated.tempered {
    border-color: rgba(232, 200, 120, 0.35);
}
.shop-item.bay-owned.unique-find {
    border-color: rgba(200, 160, 255, 0.4);
}
.loot-affix-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 2px;
}
.loot-affix {
    color: #d4c090;
    font-size: 0.92em;
    display: inline-block;
    line-height: 1.3;
    font-weight: 600;
}
.loot-affix.rarity-uncommon { color: #6fe07f; }
.loot-affix.rarity-rare { color: #5cc6ff; }
.loot-affix.rarity-epic { color: #c08bff; }
.loot-affix.rarity-legendary { color: #ffba4d; }
.loot-affix.rarity-unique { color: #d8b8ff; }
.inv-stow-badge.tempered,
.inv-stow-badge.ready.tempered {
    color: #e8c878;
}
.shop-preview.loot-shroud-glyph {
    width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px dashed rgba(158, 176, 208, 0.55);
    background: repeating-linear-gradient(
        -45deg,
        rgba(30, 38, 58, 0.9),
        rgba(30, 38, 58, 0.9) 4px,
        rgba(50, 42, 70, 0.7) 4px,
        rgba(50, 42, 70, 0.7) 8px
    );
    cursor: default;
}
.loot-glyph {
    font-size: 13px; font-weight: 700; color: #a8b6d4; letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(120, 140, 180, 0.45);
}
.shop-preview.loot-damaged-preview { filter: saturate(0.55) brightness(0.85); opacity: 0.9; }
.shop-preview {
    flex: 0 0 auto;
    width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 0; margin: 0;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.35); cursor: zoom-in;
    display: grid; place-items: center; overflow: hidden;
}
.shop-preview.is-engine-aft {
    border-color: rgba(255, 160, 90, 0.32);
}
.shop-preview.is-weapon-bow {
    border-color: rgba(120, 200, 255, 0.32);
}
.shop-preview.is-mining-bow {
    border-color: rgba(255, 170, 68, 0.35);
}
.shop-preview:hover, .shop-preview:focus-visible {
    border-color: rgba(92,198,255,0.55);
    outline: none;
}
.shop-preview-canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.shop-preview-lightbox {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(4, 8, 16, 0.72); cursor: zoom-out;
}
.shop-preview-lightbox-canvas {
    /* JS sets exact width/height + DPR backing store; these are fallbacks. */
    width: 280px; height: 280px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(6, 12, 24, 0.95);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    image-rendering: auto;
}
.shop-preview-lightbox-hint { color: var(--muted); font-size: 12px; }
.slot-capacity { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.slot-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
    background: rgba(92,198,255,0.12); border: 1px solid rgba(92,198,255,0.35); color: var(--text); }
.slot-chip.full { background: rgba(255,186,77,0.12); border-color: rgba(255,186,77,0.45); color: #ffd59a; }
.slot-chip.over { background: rgba(255,92,108,0.14); border-color: rgba(255,92,108,0.55); color: #ffb3bb; }
.fit-overcap-warn { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
    background: rgba(255,92,108,0.1); border-left: 3px solid var(--danger); color: #ffc9cf; }
.over-tag { color: #ffb3bb; font-weight: 600; }
.hot-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; vertical-align: middle;
    background: rgba(255,186,77,0.22); color: #ffba4d; border: 1px solid rgba(255,186,77,0.4);
}
.ammo-hold-count {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle;
    color: #ffba4d; border: 1px solid rgba(255, 186, 77, 0.45);
    background: rgba(255, 186, 77, 0.1);
    font-variant-numeric: tabular-nums;
}
.ammo-hold-trail {
    color: var(--muted); font-size: 12px; font-weight: 650;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.shop-item-trail .price-unit {
    font-size: 10px; font-weight: 600; opacity: 0.75; margin-left: 1px;
}
.pulse-banner {
    margin-bottom: 12px; padding: 12px 14px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,186,77,0.1), rgba(92,198,255,0.06));
    border: 1px solid rgba(255,186,77,0.28);
}
.pulse-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #ffba4d; font-weight: 700; margin-bottom: 8px; }
.pulse-label .muted { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.pulse-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pulse-chip {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 6px;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); font-weight: 600; font-size: 13px;
}
.pulse-chip small { font-weight: 500; font-size: 11px; color: var(--muted); }
.pulse-hint { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.section-title { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; }
.section-title:first-child { margin-top: 0; }
.rarity-common { color: #cfd8e6; } .rarity-uncommon { color: #6fe07f; } .rarity-rare { color: #5cc6ff; }
.rarity-epic { color: #c08bff; } .rarity-legendary { color: #ffba4d; }
.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* Leaderboards (station tab) */
.lb-toolbar, .lb-boards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lb-chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--panel-border);
    background: rgba(0,0,0,0.25); color: var(--muted); cursor: pointer; }
.lb-chip.active { border-color: var(--accent); color: #fff; background: rgba(92,198,255,0.18); }
.lb-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; }
.lb-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center;
    padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.22); border: 1px solid transparent; }
.lb-row.you { border-color: var(--accent); background: rgba(92,198,255,0.12); }
.lb-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-name { color: var(--text); font-weight: 600; }
.lb-val { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.lb-you { font-size: 13px; color: var(--text); margin-top: 4px; }
.lb-you.muted, .lb-note { color: var(--muted); font-size: 12px; }
.lb-note { margin: 0 0 8px; }

/* Expedition contracts */
.contract-meta { font-size: 13px; margin-bottom: 10px; color: var(--text); }
.contract-list { display: flex; flex-direction: column; gap: 10px; }
.contract-card { padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,0.25);
    border: 1px solid var(--panel-border); }
.contract-card.status-active { border-color: rgba(92,198,255,0.45); }
.contract-card.status-completed { border-color: rgba(138,255,193,0.55); }
.contract-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.contract-badge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contract-reward { color: var(--credits); font-weight: 700; }
.contract-title { font-weight: 700; color: #fff; margin-bottom: 4px; }
.contract-desc { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.contract-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 8px; }
.contract-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.contract-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.contract-status { font-size: 12px; color: var(--text); }

/* Map-data marketplace */
.mmap-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mmap-wallet { margin-left: auto; font-size: 12.5px; }
.mmap-kind-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mmap-meta-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 8px; }
.mmap-meta { font-size: 11.5px; color: var(--muted); }
.mmap-suggest { margin: 0 0 10px; font-size: 12.5px; }
.mmap-trust { margin: 0 0 8px; font-size: 11.5px; line-height: 1.35; }
.mmap-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mmap-cell { font-size: 11px; padding: 3px 7px; border-radius: 6px;
    background: rgba(92,198,255,0.12); border: 1px solid rgba(92,198,255,0.25); color: #cfe9ff; }
.mmap-cell.stale { opacity: 0.7; border-color: rgba(255,200,120,0.35); color: #ffd9a8; }
.mmap-cell.muted { background: transparent; border-style: dashed; color: var(--muted); }
.mmap-card.yours { border-color: rgba(255,224,138,0.4); }
.mmap-kind-badge { letter-spacing: 0.02em; }
.mmap-card.mmap-kind-route { border-color: rgba(120,200,255,0.4); }
.mmap-card.mmap-kind-region { border-color: rgba(140,220,160,0.4); }
.mmap-card.mmap-kind-atlas { border-color: rgba(200,180,255,0.32); }
.mmap-sell-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.mmap-sell-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto;
    margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.2);
    border: 1px solid var(--panel-border); }
.mmap-sell-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    font-size: 13px; color: var(--text); cursor: pointer; }
.mmap-sell-row .muted { font-size: 11.5px; }
.mmap-sell-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* In-flight contracts strip (HUD) */
.panel.contracts-hud { padding: 10px 12px; }
.panel.contracts-hud .panel-title { margin-bottom: 8px; }
.chud-row { margin-bottom: 8px; }
.chud-row:last-child { margin-bottom: 0; }
.chud-title { font-size: 12.5px; font-weight: 600; color: #e8f0ff; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chud-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 3px; }
.chud-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.chud-row.ready .chud-bar > div { background: linear-gradient(90deg, #8affc1, #ffe08a); }
.chud-status { font-size: 11px; color: var(--muted); }
.chud-row.ready .chud-status { color: var(--credits); font-weight: 600; }

/* Guild station tab + in-flight chat */
.guild-hero { margin-bottom: 14px; }
.guild-hero .guild-tag { color: var(--accent-2); font-weight: 700; margin-right: 6px; }
.guild-hero h3 { margin: 0 0 4px; color: #fff; font-size: 18px; }
.guild-hero .muted { color: var(--muted); font-size: 12.5px; }
.guild-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.guild-form .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.guild-form input, .guild-form select {
    background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border); border-radius: 8px;
    color: #fff; padding: 8px 10px; font-size: 14px;
}
.guild-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guild-roster { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.guild-member { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
    padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.22); font-size: 13px; }
.guild-member .role { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; }
.guild-member.online .name { color: #8affc1; }
.guild-member .name { color: #e8f0ff; font-weight: 600; }
.guild-member-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.guild-member-actions button { padding: 2px 8px; font-size: 11px; }
.guild-atlas { margin: 0 0 14px; font-size: 13px; color: #e8f0ff; }
.guild-atlas-bal { margin-bottom: 4px; }
.guild-coming { font-size: 12px; color: var(--muted); margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(120, 150, 200, 0.18); }
.guild-relay-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.45;
    padding: 10px 12px; border-radius: 8px; background: rgba(232, 184, 74, 0.08);
    border: 1px solid rgba(232, 184, 74, 0.28); }
.guild-relay-hint b { color: #f0c96a; }
.guild-treasury { margin: 0 0 14px; }
.guild-treasury-bal { font-size: 13px; margin-bottom: 8px; color: #e8f0ff; }
.guild-log { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 120px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.guild-log-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #c8d4e8; }
.guild-notices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; max-height: 220px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.guild-notice { padding: 8px 10px; background: rgba(20, 32, 52, 0.55); border: 1px solid rgba(120, 150, 200, 0.16); border-radius: 6px; }
.guild-notice-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.guild-notice-meta button { padding: 2px 8px; font-size: 11px; }
.guild-notice-body { color: #e8f0ff; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.guild-form textarea {
    width: 100%; resize: vertical; min-height: 52px; padding: 8px 10px; border-radius: 6px;
    border: 1px solid rgba(120, 150, 200, 0.25); background: rgba(10, 16, 28, 0.7); color: #e8f0ff;
    font: inherit; }
.guild-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 220px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.guild-list-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center;
    padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.22); font-size: 13px; }
.guild-list-row .tag { color: var(--accent-2); font-weight: 700; }
.guild-found-hint { font-size: 12.5px; color: var(--muted); margin: -4px 0 8px; line-height: 1.4; }
.guild-found-hint.warn { color: #e8b84a; }
.guild-found-hint.muted { color: var(--muted); margin-top: 4px; }
.guild-found-cost { color: var(--credits); font-weight: 700; }

/* Joined guild: board | roster, then ops (atlas/territory | diplomacy/treasury) on wide panes */
.guild-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 24px;
    align-items: start;
    margin-bottom: 4px;
}
.guild-col { min-width: 0; }
.guild-col-side .guild-roster { max-height: min(42vh, 360px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.guild-ops {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 24px;
    align-items: start;
    margin-bottom: 8px;
}
.guild-ops-block { min-width: 0; }
@media (min-width: 720px) {
    .guild-cols {
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
    }
    .guild-ops {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .guild-col-side .section-title:first-child { margin-top: 0; }
    .guild-manage-body .guild-notices { max-height: min(28vh, 260px); }
    .guild-manage-body .guild-col-side .guild-roster { max-height: min(52vh, 420px); }
}

/* Undocked guild manage overlay */
#guildManage {
    z-index: 58;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.guild-manage-window {
    width: min(1040px, 96vw); max-height: 86vh; max-height: min(86vh, 100dvh - 24px);
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6); flex-shrink: 0;
}
.guild-manage-window header {
    display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
    border-bottom: 1px solid var(--panel-border); flex-shrink: 0;
}
.guild-manage-window h2 { margin: 0; font-size: 18px; color: #fff; letter-spacing: 0.5px; }
.guild-manage-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 16px 18px 20px;
}

.inv-guild-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.inv-guild-row .inv-guild-tag { color: var(--accent-2); font-weight: 700; }
#invOpenShip { margin-top: 10px; }

/* Desktop chat: right of #hud (max 280px) so it never stacks under #controls on short viewports.
   Leave ~230px on the right for #minimap (200px) + gap. Touch rules re-pin left below. */
#guildChat {
    position: fixed;
    left: 306px; /* 14 + 280 hud + 12 gap */
    right: auto;
    bottom: 14px;
    z-index: 14;
    width: min(360px, calc(100vw - 306px - 230px));
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
    display: flex; flex-direction: column; max-height: 320px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
/* ~1080p / short desktop: keep chat usable without dominating the playfield */
@media (max-height: 900px) and (min-width: 601px) {
    body:not(.touch-active) #guildChat {
        max-height: min(260px, 38vh);
    }
    body:not(.touch-active) .guild-chat-log {
        min-height: 64px;
        max-height: min(110px, 20vh);
    }
    #controls.panel.mini {
        font-size: 10.5px;
        padding: 7px 10px;
        line-height: 1.35;
    }
}
/* 4K / tall + wide: let chat breathe a bit more */
@media (min-width: 1921px) and (min-height: 1200px) {
    body:not(.touch-active) #guildChat {
        width: min(420px, calc(100vw - 306px - 230px));
        max-height: 380px;
    }
    body:not(.touch-active) .guild-chat-log {
        max-height: 220px;
    }
}
#guildChat.hidden { display: none; }
#guildChat.collapsed { max-height: none; }
#guildChat.collapsed .guild-chat-log,
#guildChat.collapsed .guild-chat-form,
#guildChat.collapsed .chat-channels { display: none; }
#guildChat header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; border-bottom: 1px solid var(--panel-border); font-size: 12px;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim, #9aa3ad);
}
.guild-chat-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.guild-chat-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
#guildChat header button {
    height: 28px; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 1;
}
#guildChat header #guildChatToggle { width: 28px; padding: 0; font-size: 16px; }
#guildChat header .guild-manage-open {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: rgba(92,224,200,0.12); border: 1px solid rgba(92,224,200,0.35); color: #7ff0dc;
}
#guildChat header .guild-manage-open:hover {
    border-color: rgba(92,224,200,0.65); background: rgba(92,224,200,0.2);
}
#guildChat.channel-sector header { color: #c8cdd4; }
#guildChat.channel-guild header { color: #5ce0c8; }
#guildChat.channel-universe header { color: #e8b84a; }
#guildChat.has-unread header { color: #fff; font-weight: 800; }
#guildChat.has-unread.collapsed {
    border-color: rgba(92,198,255,0.55);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(92,198,255,0.25);
}
#guildChat.has-unread.collapsed header {
    animation: chatUnreadPulse 1.8s ease-in-out infinite;
}
@keyframes chatUnreadPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}
.chat-unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none;
    background: rgba(92,198,255,0.28); color: #dff3ff; border: 1px solid rgba(92,198,255,0.55);
}
.chat-unread-badge.hidden { display: none; }
#chatHotkeyHint.chat-unread {
    color: #dff3ff; font-weight: 800;
    text-shadow: 0 0 10px rgba(92,198,255,0.55);
}
.chat-channels {
    display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--panel-border);
}
.chat-ch {
    flex: 1; padding: 5px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; border-radius: 6px; border: 1px solid transparent;
    background: rgba(255,255,255,0.04); color: #8a929c; cursor: pointer;
}
.chat-ch:hover:not(.locked) { border-color: rgba(255,255,255,0.15); color: #e8eaed; }
.chat-ch.locked,
.chat-ch[aria-disabled="true"] {
    opacity: 0.45; cursor: pointer; pointer-events: auto;
}
.chat-ch.locked:hover,
.chat-ch[aria-disabled="true"]:hover {
    border-color: rgba(255,255,255,0.12); color: #b0b6be; opacity: 0.7;
}
.chat-ch[data-channel="sector"].active {
    color: #e8eaed; border-color: rgba(200,205,212,0.45); background: rgba(200,205,212,0.12);
}
.chat-ch[data-channel="guild"].active {
    color: #7ff0dc; border-color: rgba(92,224,200,0.5); background: rgba(92,224,200,0.12);
}
.chat-ch[data-channel="universe"].active {
    color: #f0c96a; border-color: rgba(232,184,74,0.55); background: rgba(232,184,74,0.14);
}
.guild-chat-log {
    flex: 1; overflow-y: auto; padding: 8px 10px; min-height: 100px; max-height: 160px;
    font-size: 12.5px; display: flex; flex-direction: column; gap: 6px;
}
.gc-line { line-height: 1.35; word-break: break-word; }
.gc-line .gc-chan {
    font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; margin-right: 4px;
    text-transform: uppercase;
}
.gc-line.ch-sector .gc-chan { color: #aeb4bc; }
.gc-line.ch-guild .gc-chan { color: #5ce0c8; }
.gc-line.ch-universe .gc-chan { color: #e8b84a; }
.gc-line .gc-name { color: var(--accent-2); font-weight: 600; margin-right: 4px; }
.gc-line.ch-sector .gc-name { color: #d0d4da; }
.gc-line.ch-guild .gc-name { color: #7ff0dc; }
.gc-line.ch-universe .gc-name { color: #f0c96a; }
.gc-line .gc-body { color: var(--text); }
.gc-line.ch-sector .gc-body { color: #c8cdd4; }
.gc-line.self .gc-name { filter: brightness(1.15); }
button.gc-name {
    appearance: none; -webkit-appearance: none;
    display: inline; margin: 0 4px 0 0; padding: 0;
    border: none; background: none; cursor: pointer;
    font: inherit; font-weight: 600; color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(92, 198, 255, 0.35);
    text-underline-offset: 2px;
}
button.gc-name:hover,
button.gc-name:focus-visible {
    color: #fff;
    text-decoration-color: rgba(92, 198, 255, 0.85);
    outline: none;
}
.guild-chat-form {
    display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--panel-border);
}
.guild-chat-form input {
    flex: 1; background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border); border-radius: 8px;
    color: #fff; padding: 7px 10px; font-size: 13px; min-width: 0;
}
.guild-chat-form button { padding: 7px 12px; font-size: 12px; }

/* ---- Pilot Look (public peek glass pill) ---- */
#pilotLook.pilot-look {
    position: fixed;
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 28;
    max-width: min(520px, calc(100vw - 24px));
    pointer-events: auto;
}
#pilotLook .pilot-look-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(10, 18, 38, 0.92);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(92, 198, 255, 0.1),
        inset 0 1px 0 rgba(92, 198, 255, 0.08);
}
#pilotLook .pilot-look-hull {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(92, 198, 255, 0.22);
}
#pilotLook .pilot-look-copy {
    min-width: 0;
    flex: 1 1 auto;
}
#pilotLook .pilot-look-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #e8f0ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pilotLook .pilot-look-meta,
#pilotLook .pilot-look-note {
    font-size: 11.5px;
    line-height: 1.35;
    margin-top: 2px;
    color: var(--muted);
}
#pilotLook .pilot-look-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
#pilotLook .pilot-look-actions button {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(92, 198, 255, 0.35);
    background: rgba(92, 198, 255, 0.12);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
#pilotLook .pilot-look-actions button:hover,
#pilotLook .pilot-look-actions button:focus-visible {
    border-color: var(--accent);
    background: rgba(92, 198, 255, 0.22);
    color: #fff;
    outline: none;
}
#pilotLook #pilotLookClose {
    background: transparent;
    color: var(--muted);
    border-color: rgba(160, 180, 210, 0.28);
}
#pilotLook #pilotLookClose:hover,
#pilotLook #pilotLookClose:focus-visible {
    color: #fff;
    border-color: rgba(200, 220, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

/* ---- upper-right menu pill (? / Pilot / News / ⚙ / Admin) ---- */
#hudTopBar {
    position: fixed;
    top: var(--hud-topbar-inset-top);
    right: max(16px, env(safe-area-inset-right, 0px));
    z-index: 13;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 5px;
    border-radius: 999px;
    background: rgba(10, 18, 38, 0.88);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 4px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(92, 198, 255, 0.1),
        inset 0 1px 0 rgba(92, 198, 255, 0.08);
    pointer-events: auto;
}
#hudTopBar:has(button:not(.hidden)) { display: inline-flex; }
#hudTopBar button:not(.hud-float-btn) {
    position: static;
    top: auto; right: auto;
    z-index: auto;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#hudTopBar button:not(.hud-float-btn):hover,
#hudTopBar button:not(.hud-float-btn):focus-visible {
    border-color: rgba(92, 198, 255, 0.45);
    background: rgba(92, 198, 255, 0.16);
    color: #fff;
    outline: none;
}
#hudTopBar button:not(.hud-float-btn):active {
    background: rgba(92, 198, 255, 0.24);
}
#helpBtn, #settingsBtn, #displayScaleBtn {
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#helpBtn { font-size: 17px; }
#settingsBtn { font-size: 15px; }
#displayScaleBtn .display-scale-icon {
    display: block;
    flex-shrink: 0;
}
#displayScaleBtn[aria-expanded="true"] {
    border-color: rgba(92, 198, 255, 0.55);
    background: rgba(92, 198, 255, 0.2);
    color: #fff;
}

/* Quick display-scale popover (HUD pill → nested-square icon) */
#displayScaleBubble {
    position: fixed;
    z-index: 72;
    width: min(280px, calc(100vw - 24px));
    padding: 0;
    border-radius: 14px;
    background: rgba(10, 18, 38, 0.94);
    border: 1px solid rgba(90, 150, 255, 0.4);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(92, 198, 255, 0.08),
        inset 0 1px 0 rgba(92, 198, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    pointer-events: auto;
}
#displayScaleBubble.hidden { display: none !important; }
.display-scale-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(90, 150, 255, 0.2);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.display-scale-head:active { cursor: grabbing; }
.display-scale-head strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e8f0ff;
    pointer-events: none;
}
#displayScaleClose {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
#displayScaleClose:hover,
#displayScaleClose:focus-visible {
    border-color: rgba(92, 198, 255, 0.4);
    background: rgba(92, 198, 255, 0.14);
    color: #fff;
    outline: none;
}
.display-scale-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.display-scale-body .settings-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: center;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}
.display-scale-body .settings-row > span:first-child {
    grid-column: 1;
    color: #cfe0ff;
    font-weight: 600;
}
.display-scale-body .settings-row output {
    grid-column: 2;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
}
.display-scale-body .settings-row input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
}
.display-scale-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}
.display-scale-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 0;
    font-size: 12px;
    color: #cfe0ff;
    cursor: pointer;
}
.display-scale-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}
.display-scale-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.display-scale-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(90, 150, 255, 0.35);
    background: rgba(92, 198, 255, 0.1);
    color: #cfe0ff;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}
.display-scale-btn:hover,
.display-scale-btn:focus-visible {
    border-color: var(--accent);
    background: rgba(92, 198, 255, 0.2);
    color: #fff;
    outline: none;
}
#hudTopBar #adminBtn {
    background: rgba(255, 92, 108, 0.12);
    border-color: rgba(255, 92, 108, 0.45);
    color: #ffb3bb;
}
#hudTopBar #adminBtn:hover,
#hudTopBar #adminBtn:focus-visible {
    border-color: var(--danger);
    background: rgba(255, 92, 108, 0.26);
    color: #ffd0d6;
}

/* Admin shortcuts pill — God / Obs / Fix; default left of Menus; HudLayout-draggable */
#adminQuick {
    position: fixed;
    top: var(--hud-topbar-inset-top);
    /* Approx left of Menus until HudLayout pins precisely (extra room for God/Obs · ON) */
    right: calc(max(16px, env(safe-area-inset-right, 0px)) + 16px + min(380px, 56vw));
    left: auto;
    z-index: 13;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 5px;
    border-radius: 999px;
    background: rgba(10, 18, 38, 0.88);
    border: 1px solid rgba(255, 92, 108, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 4px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 92, 108, 0.08),
        inset 0 1px 0 rgba(255, 140, 150, 0.08);
    pointer-events: auto;
}
#adminQuick:not(.hidden):has(button:not(.hidden)) { display: inline-flex; }
#adminQuick:has(> .hud-float-header) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}
#adminQuick > .hud-float-header--compact {
    padding: 2px 6px 2px 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 92, 108, 0.28);
    background: rgba(28, 10, 16, 0.55);
    font-size: 9px;
    letter-spacing: 0.1em;
    min-height: 0;
    color: #ffb3bb;
}
#adminQuick > .hud-float-header--compact .hud-float-btn {
    width: 20px;
    height: 18px;
    font-size: 11px;
    border-radius: 4px;
}
#adminQuick > .hud-float-body {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 5px;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
}
body.hud-layout-on #adminQuick.hud-float-placed {
    display: inline-flex;
    width: auto;
    height: auto;
    right: auto;
}
#adminQuick button.admin-quick {
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #ffb3bb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#adminQuick button.admin-quick:hover,
#adminQuick button.admin-quick:focus-visible {
    border-color: rgba(255, 140, 150, 0.45);
    background: rgba(255, 92, 108, 0.16);
    color: #ffd0d6;
    outline: none;
}
#adminQuick button.admin-quick.hidden { display: none !important; }
#adminQuick #adminQuickGod.on {
    border-color: rgba(80, 220, 140, 0.55);
    background: rgba(40, 160, 90, 0.28);
    color: #9dffc4;
}
#adminQuick #adminQuickObs.on {
    border-color: rgba(120, 180, 255, 0.55);
    background: rgba(50, 100, 180, 0.28);
    color: #b8d4ff;
}
#manual { z-index: 60; }
#inventory { z-index: 60; }
#shipPanel { z-index: 60; }
#settings { z-index: 60; }

/* ---- settings overlay ---- */
.settings-window { width: min(560px, 94vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.settings-window header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
    border-bottom: 1px solid var(--panel-border); }
.settings-window h2 { margin: 0; font-size: 18px; color: #fff; letter-spacing: 0.5px; }
.settings-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.settings-section { margin-bottom: 18px; }
.settings-section h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.settings-field { display: block; margin: 0 0 10px; }
.settings-field span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted, #9fb4d8); }
.settings-field input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;
    border: 1px solid rgba(120,160,220,0.3); background: rgba(4,8,20,0.75); color: #e8f0ff; }
.settings-btn { margin: 4px 0 10px; padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(120,160,220,0.35);
    background: rgba(30,50,80,0.8); color: #cfe0ff; cursor: pointer; }
.settings-btn.primary { background: #2a7fd4; border-color: #2a7fd4; color: #fff; }
.settings-btn-danger {
    border-color: rgba(220, 100, 90, 0.55) !important;
    color: #ffc8b8 !important;
    background: rgba(80, 24, 20, 0.55) !important;
}
.settings-btn-danger:hover {
    border-color: #ff8866 !important;
    color: #ffe0d4 !important;
}
.settings-hr { border: 0; border-top: 1px solid rgba(120,160,220,0.2); margin: 14px 0; }
.settings-account-msg { margin-top: 8px; font-size: 12.5px; }
.settings-account-msg.good { color: #8affc1; }
.settings-account-msg.bad { color: #ff8a8a; }
.settings-row { display: grid; grid-template-columns: 1fr minmax(120px, 1.4fr) 36px; gap: 10px; align-items: center;
    margin-bottom: 10px; font-size: 13px; color: var(--text); }
@media (max-width: 420px) {
    .settings-row { grid-template-columns: 1fr 36px; }
    .settings-row input[type="range"] { grid-column: 1 / -1; order: 3; }
}
.settings-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.settings-row output { text-align: right; color: #fff; font-variant-numeric: tabular-nums; font-size: 12px; }
.settings-check { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 13px; color: var(--text); cursor: pointer; }
.settings-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.settings-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.settings-actions button { font-size: 13px; padding: 8px 12px; }
.settings-audio-actions { margin: 12px 0 0; }

/* Reduce motion (Settings toggle) */
.ev-reduce-motion .fx-flash,
.ev-reduce-motion .cashout-card,
.ev-reduce-motion .death-card,
.ev-reduce-motion .notice.big,
.ev-reduce-motion .bay-loot-pulse {
    animation: none !important;
    transition: none !important;
}
.ev-reduce-motion .hazard-banner.critical {
    animation: none !important;
}

/* ---- pilot inventory / character sheet ---- */
.inventory-window { width: min(760px, 96vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.inventory-window header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
    border-bottom: 1px solid var(--panel-border); }
.inventory-window h2 { margin: 0; font-size: 18px; color: #fff; letter-spacing: 0.5px; }
.inventory-body { flex: 1; overflow-y: auto; padding: 16px 18px 22px; }
.inv-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(120, 160, 220, 0.12); }
.inv-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.inv-section h3 {
    margin: 0 0 12px; padding-bottom: 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent);
    border-bottom: 1px solid rgba(92, 198, 255, 0.18);
}
.inv-identity .inv-name {
    font-size: 24px; font-weight: 700; color: #fff;
    letter-spacing: 0.02em; line-height: 1.2;
}
.inv-identity-block {
    padding-bottom: 14px;
}
.inv-identity .inv-seals,
.inv-honors .inv-seals {
    margin-top: 6px;
    font-size: 13px;
    color: #ffd25a;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inv-prestige-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 50%;
    image-rendering: auto;
    vertical-align: middle;
}
.inv-seal-icon { width: 32px; height: 32px; }
.inv-badge-icon { width: 26px; height: 26px; }
.inv-seal-text { color: #ffd25a; font-weight: 600; }
.wipe-notice-seal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.45;
}
.wipe-seal-icon { width: 36px; height: 36px; }
.wipe-seal-flair { font-weight: 600; color: #ffd25a; }
.vanity-seal-icon {
    width: 22px;
    height: 22px;
    margin-right: 4px;
    vertical-align: -5px;
    display: inline-block;
}
.inv-honors .inv-honor-empty { margin-top: 4px; font-size: 12.5px; }
.inv-honors .inv-surname {
    margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: rgba(0,0,0,0.25); font-size: 13px;
}
.inv-honors .inv-surname.earned { color: #c9b8ff; }
.inv-honors .inv-surname-title { font-weight: 700; color: #fff; margin-bottom: 2px; }
.inv-honors .inv-surname-gates { margin-top: 6px; display: grid; gap: 3px; }
.inv-honors .inv-surname-gate {
    display: flex; justify-content: space-between; gap: 12px;
    color: var(--muted); font-size: 12px;
}
.inv-honors .inv-surname-gate.met { color: #8affc1; }
.inv-honors .inv-surname-form {
    display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center;
}
.inv-honors .inv-surname-form input {
    flex: 1 1 120px; min-width: 100px; max-width: 220px;
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; border-radius: 4px; padding: 6px 8px; font-size: 13px;
}
.inv-honors .inv-surname-msg { margin-top: 4px; font-size: 12px; min-height: 1.2em; }
.inv-badges { margin-top: 10px; }
.inv-badges.empty { font-size: 12.5px; }
.inv-badges-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.inv-badges-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 6px; border: 1px solid rgba(180, 200, 255, 0.22);
    border-radius: 8px; font-size: 12.5px; color: #d7e4ff; background: rgba(40, 55, 90, 0.35);
}
.inv-badge-glyph { color: #9ec5ff; letter-spacing: 0.02em; font-size: 15px; }
.inv-badge-title { font-weight: 600; }
.admin-badge-presets { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.admin-badge-preset, .admin-fbadge-preset { font-size: 12px; }
.af-authed { color: #8affc1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.news-foot-honor { margin-left: 4px; }
.wipe-notice-feedback { margin-top: 10px; font-size: 12.5px; line-height: 1.45; }
.wipe-notice-feedback .linkish {
    background: none; border: none; color: #9ec5ff; text-decoration: underline;
    cursor: pointer; padding: 0; font: inherit;
}
.inv-identity .inv-surname {
    margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: rgba(0,0,0,0.25); font-size: 13px;
}
.inv-identity .inv-surname.earned { color: #c9b8ff; }
.inv-identity .inv-surname-title { font-weight: 700; color: #fff; margin-bottom: 2px; }
.inv-identity .inv-surname-gates { margin-top: 6px; display: grid; gap: 3px; }
.inv-identity .inv-surname-gate {
    display: flex; justify-content: space-between; gap: 12px;
    color: var(--muted); font-size: 12px;
}
.inv-identity .inv-surname-gate.met { color: #8affc1; }
.inv-identity .inv-surname-form {
    display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center;
}
.inv-identity .inv-surname-form input {
    flex: 1 1 120px; min-width: 100px; max-width: 220px;
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; border-radius: 4px; padding: 6px 8px; font-size: 13px;
}
.inv-identity .inv-surname-msg { margin-top: 4px; font-size: 12px; min-height: 1.2em; }
.inv-identity .inv-rename {
    margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: rgba(0,0,0,0.25); font-size: 13px;
}
.inv-identity .inv-rename-title { font-weight: 700; color: #fff; margin-bottom: 2px; }
.inv-identity .inv-rename-form { margin-top: 6px; }
.inv-identity .inv-rename.locked .inv-rename-title { color: #9aa8bc; }
.inv-identity .inv-rename.locked input:disabled,
.inv-identity .inv-rename.locked button.locked {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.35);
}
.inv-identity .inv-rename.locked button.locked:hover {
    filter: grayscale(0.35);
    opacity: 0.55;
}
.inv-identity .inv-meta { margin-top: 6px; color: var(--muted); font-size: 13px; }
.inv-identity .credits {
    color: var(--credits); font-weight: 700;
    font-size: 14px; letter-spacing: 0.02em;
}
.inv-ship-type {
    margin: 2px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #e8f0ff;
    letter-spacing: 0.02em;
}
.inv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.inv-stat { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.inv-stat span { color: var(--muted); }
.inv-stat b { color: #fff; font-weight: 600; }
.inv-fit-cat { margin-bottom: 12px; }
.inv-fit-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.inv-fit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}
.inv-fit-row {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 7px 8px; font-size: 13px; color: #eaf2ff;
    border-left: 2px solid rgba(92,198,255,0.4);
    background: rgba(255,255,255,0.03); border-radius: 0 6px 6px 0;
}
.inv-fit-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inv-fit-name { line-height: 1.3; }
.inv-fit-stats { font-size: 11.5px; line-height: 1.35; }
.inv-fit-empty { font-size: 12.5px; padding-left: 8px; }
.inv-thumb-slot {
    flex: 0 0 auto; width: 48px; height: 48px;
    display: grid; place-items: center;
}
.inv-thumb-slot .shop-preview {
    width: 48px; height: 48px; min-width: 48px; min-height: 48px;
}
.inv-thumb-slot .shop-preview.loot-shroud-glyph {
    width: 48px; height: 48px; flex-basis: 48px; min-width: 48px; min-height: 48px;
}
.inv-cargo-list { display: flex; flex-direction: column; gap: 4px; }
.inv-cargo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 7px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06); }
.inv-cargo-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.inv-cargo-name { font-weight: 600; color: #eaf2ff; }
.inv-cargo-tier {
    font-weight: 500; font-size: 11px; margin-left: 6px; text-transform: lowercase;
    opacity: 0.92;
}
.inv-jettison {
    flex: 0 0 auto; font-size: 12px; padding: 4px 10px;
    color: #ffb08a; border-color: rgba(255, 140, 90, 0.35);
    background: rgba(255, 100, 60, 0.08);
}
.inv-jettison:hover { background: rgba(255, 100, 60, 0.18); border-color: rgba(255, 140, 90, 0.55); }
.inv-stow-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.inv-stow-row {
    display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 8px 10px;
    font-size: 13px; padding: 8px; min-width: 0;
    background: rgba(255,255,255,0.03); border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}
.inv-stow-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.inv-stow-stats { font-size: 11.5px; line-height: 1.35; }
.inv-stow-actions {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    flex: 1 1 100%; margin-left: 58px; /* past thumb */
}
.inv-stow-actions button { font-size: 12px; padding: 4px 10px; }
.inv-stow-hint { font-size: 11.5px; white-space: nowrap; }
.inv-stow-row > .inv-stow-hint {
    flex: 1 1 100%;
    margin-left: 58px;
}
.inv-stow-badge {
    display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em; padding: 1px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.08); color: var(--muted); vertical-align: middle;
}
.inv-stow-badge.ready { background: rgba(122,255,208,0.15); color: #9ff0d0; }
.inv-stow-badge.damaged { background: rgba(255,176,74,0.15); color: #ffc078; }
.inv-stow-badge.unidentified { background: rgba(176,106,212,0.18); color: #d0a8f0; }
.inv-look { font-size: 13px; line-height: 1.4; }
.inv-paint-label { margin-top: 10px; font-size: 12px; font-weight: 600; color: #d8e4f4; letter-spacing: 0.02em; }
.inv-paint-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; align-items: center; }
.inv-paint {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.28);
    background: var(--paint, #5cc6ff);
    cursor: pointer; padding: 0;
    flex: 0 0 auto;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.inv-paint:hover { border-color: rgba(255,255,255,0.75); transform: translateY(-1px); }
.inv-paint.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(122,255,208,0.45); }
.inv-paint.none {
    display: inline-flex; align-items: center; justify-content: center;
    background:
        linear-gradient(135deg, rgba(18, 26, 42, 0.95), rgba(8, 12, 22, 0.98));
    border-color: rgba(160, 180, 210, 0.4);
}
.inv-paint.none .inv-paint-none-mark {
    font-size: 13px; line-height: 1; color: #9fb4d8; font-weight: 600;
}
.inv-paint.none.on {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(122,255,208,0.45);
}
.inv-paint.none.on .inv-paint-none-mark { color: #c8ffe8; }
.inv-hangar {
    display: grid;
    grid-template-columns: minmax(180px, 200px) minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
    margin: 0 0 4px;
}
.inv-hangar-stage {
    display: flex; justify-content: center; align-items: center;
    min-height: 196px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(92, 198, 255, 0.22);
    /* Soft bay floor — keep wash low so it doesn't read as hull glow. */
    background:
        radial-gradient(ellipse 80% 45% at 50% 88%, rgba(30, 60, 110, 0.22), transparent 65%),
        linear-gradient(165deg, rgba(10, 18, 36, 0.95), rgba(4, 8, 16, 0.98));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.32);
}
.inv-hangar-stage .shop-preview { margin: 0; }
.inv-hangar-controls { min-width: 0; }
.inv-hangar-controls .inv-paint-label { margin-top: 8px; }
.inv-hangar-controls .inv-hint { margin-top: 10px; margin-bottom: 0; }
.inv-hangar-preview {
    display: flex; justify-content: center; align-items: center;
    margin: 0 0 10px; min-height: 80px;
}
.inv-hangar-preview .shop-preview { margin: 0; }
@media (max-width: 520px) {
    .inv-hangar {
        grid-template-columns: 1fr;
    }
    .inv-hangar-stage { min-height: 176px; }
}
.inv-cosmetics { margin-top: 14px; }
.inv-cos-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.inv-cos-kind { font-size: 11px; color: #9fb4d8; min-width: 72px; }
.inv-cos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-cos-chip {
    font-size: 11px; padding: 4px 8px; border-radius: 4px;
    border: 1px solid rgba(140,170,210,0.35); background: rgba(20,28,42,0.6);
    color: #d8e4f4; cursor: pointer;
}
.inv-cos-chip:hover { border-color: rgba(255,255,255,0.55); }
.inv-cos-chip.on { border-color: #7affd0; box-shadow: 0 0 0 1px rgba(122,255,208,0.35); }
.inv-cos-chip.clear { opacity: 0.75; }
.shop-item.vanity-exclusive { border-left: 2px solid #ffd070; }
.shop-item.vanity-owned { background: rgba(122,255,208,0.04); }
.shop-item.vanity-locked { opacity: 0.55; }
.shop-item.vanity-equipped { box-shadow: inset 0 0 0 1px rgba(122,255,208,0.35); }
.vanity-intro { margin-bottom: 6px; }
.vanity-swatch {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 4px;
    background: linear-gradient(135deg, var(--vanity-swatch, #9fb4d8), rgba(8,14,28,0.85));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.35);
    align-self: center;
}
.shop-item .vanity-swatch { margin-right: 2px; }
.vanity-eq-tag { color: #7affd0 !important; }
.vanity-creative-controls {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end;
}
.vanity-marker-label {
    width: 96px; max-width: 40vw; padding: 4px 6px; font-size: 12px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.2);
    color: #e8f0ff; border-radius: 3px;
}
.vanity-marker-style {
    padding: 4px 6px; font-size: 12px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.2);
    color: #e8f0ff; border-radius: 3px;
}
.inv-hint { margin: 8px 0 0; font-size: 12px; }
.inv-hint kbd { background: rgba(255,255,255,0.1); border: 1px solid var(--panel-border); border-bottom-width: 2px;
    border-radius: 5px; padding: 1px 7px; font-size: 11px; color: #fff; }

/* ---- Ship outfit panel (wide) ---- */
.ship-panel-window {
    width: min(1240px, 98vw);
    max-height: 92vh;
    background:
        radial-gradient(ellipse 90% 55% at 12% -10%, rgba(50, 110, 170, 0.22), transparent 52%),
        radial-gradient(ellipse 70% 40% at 95% 10%, rgba(30, 80, 70, 0.14), transparent 48%),
        linear-gradient(165deg, rgba(8, 16, 36, 0.96), rgba(4, 8, 18, 0.98));
    border: 1px solid rgba(110, 168, 230, 0.28);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 24px 70px rgba(0, 0, 0, 0.55);
    animation: ship-panel-enter 0.32s ease-out;
}
@keyframes ship-panel-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
.ship-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 6px;
    border-bottom: 1px solid rgba(120, 160, 220, 0.14);
    background: linear-gradient(180deg, rgba(18, 32, 58, 0.5), transparent);
}
.ship-panel-kicker {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(140, 190, 230, 0.75);
}
.ship-panel-title-block h2 {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: #f2f7ff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ship-panel-close {
    flex: none;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 7px 14px;
    border-radius: 8px;
}
.ship-panel-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.35fr);
    gap: 10px 18px;
    align-items: center;
    padding: 8px 20px 10px;
    border-bottom: 1px solid rgba(120, 160, 220, 0.14);
    background:
        linear-gradient(105deg, rgba(12, 28, 52, 0.55) 0%, rgba(8, 18, 36, 0.2) 55%, transparent 100%),
        rgba(4, 10, 22, 0.35);
}
.ship-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    /* No frame — craft sits flush so the hero stays short. */
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.ship-hero-preview .shop-preview {
    display: block;
    width: 128px;
    height: 128px;
    min-width: 128px;
    min-height: 128px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
}
.ship-hero-preview .shop-preview:hover,
.ship-hero-preview .shop-preview:focus-visible {
    border: none;
    outline: none;
    background: transparent;
}
.ship-hero-preview .shop-preview-canvas {
    display: block;
    width: 128px;
    height: 128px;
}
.ship-hero-identity { min-width: 0; }
.ship-hero-class {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ship-hero-name {
    margin: 2px 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ship-hero-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ship-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(120, 160, 220, 0.28);
    background: rgba(10, 18, 36, 0.65);
    color: #c8d8f0;
}
.ship-status-chip.is-docked {
    border-color: rgba(138, 255, 193, 0.4);
    color: #9ff0d0;
    background: rgba(40, 90, 70, 0.22);
}
.ship-status-chip.is-flight {
    border-color: rgba(92, 198, 255, 0.4);
    color: var(--accent);
}
.ship-status-chip.is-link {
    border-color: rgba(255, 186, 90, 0.4);
    color: #ffc878;
    background: rgba(90, 60, 20, 0.25);
}
.ship-status-chip.is-warn {
    border-color: rgba(255, 120, 90, 0.45);
    color: #ffb0a0;
}
.ship-hero-vitals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.ship-vital {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.16);
    background: rgba(6, 12, 26, 0.55);
    min-width: 0;
}
.ship-vital-k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(150, 180, 220, 0.7);
}
.ship-vital b {
    font-size: 13px;
    font-weight: 700;
    color: #eef4ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ship-vital.is-armed b { color: var(--accent-2); }
.ship-panel-body {
    flex: 1;
    overflow: auto;
    padding: 14px 18px 20px;
}
.ship-panel-empty { padding: 28px 12px; text-align: center; }
.ship-panel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.78fr);
    gap: 16px;
    align-items: start;
    min-height: 0;
    /* Shared drop footprint — open pads & ready cards match (taller for stats + desc). */
    --ship-drop-w: 152px;
    --ship-drop-h: 152px;
    --ship-drop-gap: 8px;
}
.ship-panel-main,
.ship-panel-rail,
.ship-panel-tray,
.ship-panel-side {
    min-width: 0;
}
.ship-panel-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 0;
}
.ship-outfit-hint {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.4;
}
.ship-outfit-group {
    margin-bottom: 16px;
    animation: ship-cat-in 0.38s ease both;
}
.ship-outfit-group.is-systems { animation-delay: 0.06s; }
.ship-hangar { animation: ship-cat-in 0.38s ease both; animation-delay: 0.1s; }
@keyframes ship-cat-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.ship-group-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(120, 160, 220, 0.14);
}
.ship-group-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d8e8ff;
}
.ship-group-blurb {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.3;
}
.ship-slots-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ship-scanner-prefs {
    margin-top: 8px;
    padding: 8px 10px 6px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.18);
    background: rgba(6, 12, 28, 0.4);
}
.ship-scanner-prefs .ship-scanner-ping { margin: 0 0 4px; }
.ship-scanner-prefs-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.35;
}
.ship-slot-cat {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(120, 160, 220, 0.16);
    background:
        linear-gradient(145deg, rgba(14, 24, 46, 0.55), rgba(6, 12, 26, 0.42));
    transition: border-color 0.18s ease, background 0.18s ease;
}
.ship-slot-cat:hover {
    border-color: rgba(120, 160, 220, 0.28);
}
.ship-slot-cat.is-weapons {
    border-color: rgba(92, 198, 255, 0.28);
    background:
        linear-gradient(145deg, rgba(16, 36, 62, 0.62), rgba(6, 14, 28, 0.48));
}
.ship-slot-cat.is-aux {
    border-color: rgba(160, 180, 220, 0.22);
}
.ship-slot-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.ship-slot-cat-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ship-slot-cat-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.ship-cat-ready {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ship-cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(180, 200, 230, 0.85);
}
.ship-cap em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    min-width: 2.4em;
    text-align: right;
}
.ship-cap-track {
    display: block;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.ship-cap-track i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(92, 198, 255, 0.55), rgba(138, 255, 193, 0.75));
    transition: width 0.25s ease;
}
.ship-cat-tip {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
}
.ship-weapon-link {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 220, 0.2);
    background: rgba(6, 12, 28, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ship-weapon-link.is-on {
    border-color: rgba(255, 186, 90, 0.45);
    background: rgba(60, 40, 12, 0.28);
}
.ship-weapon-link-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ship-weapon-link-name {
    font-size: 11px;
    font-weight: 700;
    color: #ffc878;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ship-weapon-link-info .muted {
    font-size: 11.5px;
    line-height: 1.35;
}
.ship-link-toggle {
    flex: none;
    min-width: 56px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ship-cat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 8px 10px;
    /* Stretch so Ready matches equipped pad column height (6-weapon boards, etc.). */
    align-items: stretch;
}
.ship-cat-divider {
    width: 1px;
    align-self: stretch;
    min-height: var(--ship-drop-h, 152px);
    margin: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(120, 160, 220, 0.35) 12%,
        rgba(120, 160, 220, 0.35) 88%,
        transparent 100%
    );
}
.ship-cat-pads,
.ship-cat-stow {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ship-stow-strip {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--ship-drop-gap, 8px);
    /* Fill the Ready column so empty middle/bottom still accept unequip drops. */
    flex: 1 1 auto;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
}
.ship-stow-strip.is-unfit-target,
.ship-tray-items.is-unfit-target {
    outline: 1px dashed rgba(122, 255, 208, 0.55);
    outline-offset: 2px;
    background: rgba(40, 90, 70, 0.18);
    border-radius: 10px;
}
body.ship-dragging-unfit .ship-stow-strip,
body.ship-dragging-unfit .ship-tray-items {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
}
.ship-stow-empty {
    font-size: 11.5px;
    padding: 8px 4px;
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--ship-drop-h, 152px);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    border: 1px dashed rgba(120, 160, 220, 0.16);
    background: rgba(0, 0, 0, 0.12);
}
.ship-slot-pad.is-tempered,
.ship-tray-card.is-tempered {
    border-color: rgba(232, 200, 120, 0.4);
}
.ship-slot-pad.is-unique,
.ship-tray-card.is-unique {
    border-color: rgba(200, 160, 255, 0.45);
}
.ship-slot-info .loot-badge,
.ship-tray-name .loot-badge,
.ship-slot-name .loot-badge {
    font-size: 9px;
    padding: 0 5px;
    margin-left: 4px;
}
/* Affix rarity chrome on Ship pads / Ready (scanned finds = normal rack + tint). */
.ship-slot-pad.is-affix-uncommon,
.ship-tray-card.is-affix-uncommon,
.ship-tray-card.is-compact.is-affix-uncommon,
.ship-slot-pad.is-filled.is-affix-uncommon:hover,
.ship-tray-card.is-affix-uncommon:hover,
.ship-tray-card.is-compact.is-affix-uncommon:hover,
.ship-tray-card.is-compact.is-affix-uncommon.is-picked {
    border-color: rgba(111, 224, 127, 0.55);
    box-shadow: 0 0 0 1px rgba(111, 224, 127, 0.2);
}
.ship-slot-pad.is-affix-rare,
.ship-tray-card.is-affix-rare,
.ship-tray-card.is-compact.is-affix-rare,
.ship-slot-pad.is-filled.is-affix-rare:hover,
.ship-tray-card.is-affix-rare:hover,
.ship-tray-card.is-compact.is-affix-rare:hover,
.ship-tray-card.is-compact.is-affix-rare.is-picked {
    border-color: rgba(92, 198, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(92, 198, 255, 0.22);
}
.ship-slot-pad.is-affix-legendary,
.ship-tray-card.is-affix-legendary,
.ship-tray-card.is-compact.is-affix-legendary,
.ship-slot-pad.is-filled.is-affix-legendary:hover,
.ship-tray-card.is-affix-legendary:hover,
.ship-tray-card.is-compact.is-affix-legendary:hover,
.ship-tray-card.is-compact.is-affix-legendary.is-picked {
    border-color: rgba(255, 186, 77, 0.65);
    box-shadow: 0 0 0 1px rgba(255, 186, 77, 0.25);
}
.ship-slot-info .loot-affix,
.ship-tray-info .loot-affix {
    font-size: 11px;
}
.ship-tray-stats {
    font-size: 10.5px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
/* Identical footprint + layout for fitted pads and Ready cards. */
.ship-slot-pad,
.ship-tray-card.is-compact {
    width: var(--ship-drop-w, 152px);
    min-height: var(--ship-drop-h, 152px);
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
}
.ship-tray-card.is-compact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 7px;
    overflow: visible;
    border-radius: 10px;
    border: 1px solid rgba(120, 160, 220, 0.28);
    background:
        linear-gradient(160deg, rgba(14, 26, 52, 0.95), rgba(4, 8, 18, 0.96));
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ship-tray-card.is-compact:hover,
.ship-tray-card.is-compact.is-picked {
    border-color: rgba(92, 198, 255, 0.45);
}
/* Tempered / unique must win over the compact Ready border + hover. */
.ship-tray-card.is-tempered,
.ship-tray-card.is-compact.is-tempered,
.ship-tray-card.is-compact.is-tempered:hover,
.ship-tray-card.is-compact.is-tempered.is-picked,
.ship-slot-pad.is-tempered {
    border-color: rgba(232, 200, 120, 0.55);
    box-shadow: 0 0 0 1px rgba(232, 200, 120, 0.18);
}
.ship-tray-card.is-unique,
.ship-tray-card.is-compact.is-unique,
.ship-tray-card.is-compact.is-unique:hover,
.ship-slot-pad.is-unique {
    border-color: rgba(200, 160, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(200, 160, 255, 0.2);
}
.ship-tray-card.is-compact .ship-slot-thumb {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}
.ship-tray-card.is-compact .ship-slot-info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: visible;
}
.ship-tray-card.is-compact .ship-slot-stats {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--muted, #8a9bb8);
}
.ship-tray-card.is-compact .ship-slot-desc {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(138, 155, 184, 0.85);
    word-break: break-word;
}
.ship-tray-card.is-compact .ship-tray-actions {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 0;
    padding: 4px;
    border-radius: 8px;
    background: rgba(4, 10, 22, 0.88);
    border: 1px solid rgba(120, 160, 220, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 3;
}
.ship-tray-card.is-compact:hover .ship-tray-actions,
.ship-tray-card.is-compact:focus-within .ship-tray-actions,
.ship-tray-card.is-compact.is-picked .ship-tray-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.ship-tray-card.is-compact .ship-tray-actions button {
    font-size: 10.5px;
    padding: 3px 8px;
}
body.touch-active .ship-tray-card.is-compact .ship-tray-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.ship-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.ship-rail-head .section-title { margin: 0; }
.ship-rail-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.ship-rail-blurb {
    margin: 0 0 8px;
    font-size: 11.5px;
    line-height: 1.35;
}
.ship-surplus .section-title { color: #c8b48a; }
.ship-surplus-empty {
    font-size: 12px;
    padding: 10px 4px;
}
.ship-hangar {
    margin-top: 6px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(120, 160, 220, 0.16);
    background: rgba(6, 12, 26, 0.4);
}
.ship-hangar .ship-group-head {
    margin-bottom: 8px;
    padding-bottom: 6px;
}
.ship-hangar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.ship-hangar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color 0.15s ease;
}
.ship-hangar-row.is-active {
    border-color: rgba(92, 198, 255, 0.4);
    background: rgba(20, 44, 74, 0.35);
}
.ship-hangar-row .info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ship-hangar-row .name { font-weight: 700; color: #fff; }
.ship-hangar-buyback { font-size: 12px; }
.ship-hangar-list-price { font-size: 12px; }
.ship-hangar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
    justify-content: flex-end;
}
.ship-hangar-row button { flex: 0 0 auto; }
.ship-arming-host { margin-top: 4px; }
.ship-arming-host .arming-board { margin-top: 0; }
.arming-board-ship-weapons .arming-equipped-section {
    margin-bottom: 8px;
}
.arming-board-ship-weapons .arming-link-row {
    margin: 0 0 10px;
}
.arming-board-ship-weapons .arming-fit-inline-blurb {
    margin: 0 0 6px;
}
.arming-board-ship-weapons .arming-stage { margin-top: 0; }
.arming-board-ship-weapons .arming-seat-pad {
    width: var(--ship-drop-w, 152px);
    height: var(--ship-drop-h, 152px);
    min-height: var(--ship-drop-h, 152px);
}
.arming-board-ship-weapons .arming-rack {
    width: var(--ship-drop-w, 152px);
    max-width: 100%;
    min-width: 0;
    height: var(--ship-drop-h, 152px);
    min-height: var(--ship-drop-h, 152px);
    flex: 0 0 auto;
}
.arming-seat-pad.is-empty-seat {
    border-style: dashed;
    opacity: 0.88;
}
.arming-seat-empty-mark {
    font-size: 22px;
    line-height: 1;
    color: #6a7a98;
    text-align: center;
    padding: 8px 0 2px;
}
.arming-seat-clear-btn {
    margin-top: 2px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid rgba(120, 160, 220, 0.3);
    background: rgba(20, 36, 60, 0.75);
    color: #b8c8e0;
    cursor: pointer;
}
.arming-seat-clear-btn:hover { border-color: #ff8866; color: #ffc8b8; }
.arming-assign-chips .arming-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.arming-assign-chips .arming-rack,
.arming-board-ship-weapons .arming-rack {
    width: var(--ship-drop-w, 152px);
    max-width: 100%;
    height: var(--ship-drop-h, 152px);
    min-height: var(--ship-drop-h, 152px);
    box-sizing: border-box;
    flex: 0 0 auto;
}
.arming-rack.is-stock {
    border-color: rgba(122, 255, 208, 0.35);
}
.ship-slot-pads {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--ship-drop-gap, 8px);
}
.ship-slot-pad {
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(120, 160, 220, 0.28);
    background:
        linear-gradient(160deg, rgba(14, 26, 52, 0.95), rgba(4, 8, 18, 0.96));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: visible;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ship-slot-pad.is-filled:hover {
    border-color: rgba(92, 198, 255, 0.45);
    transform: translateY(-1px);
}
.ship-slot-pad.is-empty {
    border-style: dashed;
    border-color: rgba(92, 198, 255, 0.28);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(8, 16, 32, 0.45);
    /* Match Ready card footprint even when label text is short. */
    min-height: var(--ship-drop-h, 152px);
    height: var(--ship-drop-h, 152px);
}
.ship-slot-pad.has-slot-num { position: relative; }
.ship-slot-num {
    position: absolute;
    top: 4px;
    left: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #061024;
    background: var(--accent, #5cc6ff);
    z-index: 2;
    pointer-events: none;
}
.ship-slot-pad.is-picked,
.ship-slot-pad.is-arm-source {
    border-color: rgba(122, 255, 208, 0.7);
    box-shadow: 0 0 0 1px rgba(122, 255, 208, 0.22);
}
.ship-slot-pad.is-dragging { opacity: 0.55; cursor: grabbing; }
.ship-slot-arm-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    border: 1px solid rgba(120, 160, 220, 0.28);
}
.ship-slot-arm-badge.is-armed {
    background: rgba(122, 255, 208, 0.14);
    color: #9ff0d0;
    border-color: rgba(122, 255, 208, 0.35);
}
.ship-slot-arm-badge.is-idle {
    background: rgba(255, 176, 74, 0.1);
    color: #ffc078;
    border-color: rgba(255, 176, 74, 0.28);
}
.arming-board-ship .arming-assign-chips.is-stock-only .arming-rack {
    width: min(180px, 100%);
}
.ship-slot-pad.drag-over.is-replace-target {
    border-color: rgba(232, 200, 120, 0.65);
    box-shadow: 0 0 0 1px rgba(232, 200, 120, 0.25);
}
.ship-slot-pad.is-empty:hover,
.ship-slot-pad.drag-over {
    border-color: rgba(122, 255, 208, 0.7);
    background: rgba(40, 90, 70, 0.22);
    transform: translateY(-1px);
}
.ship-slot-empty-label { font-size: 12px; font-weight: 600; color: #cfe0ff; }
.ship-slot-drop-hint { font-size: 11px; }
.ship-slot-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #e8f0ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    flex: 0 0 auto;
}
.ship-slot-meta {
    display: block;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: #9eb6d8;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
}
.ship-slot-meta.is-dry { color: #ffb37a; }
.ship-tray-info .ship-slot-meta {
    margin-top: 1px;
}
.ship-slot-stats {
    font-size: 10.5px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    flex: 1 1 auto;
    min-height: 0;
}
.ship-slot-info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.ship-slot-thumb {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 1px;
}
.ship-slot-unfit {
    margin-top: auto;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid rgba(120, 160, 220, 0.3);
    background: rgba(20, 36, 60, 0.75);
    color: #cfe0ff;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ship-slot-unfit:hover { border-color: var(--accent); color: #fff; }
.ship-panel-tray {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(200, 180, 130, 0.2);
    background: rgba(10, 12, 22, 0.55);
    max-height: min(42vh, 420px);
    overflow: auto;
}
.ship-tray-items { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ship-tray-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(120, 160, 220, 0.24);
    background: rgba(8, 14, 28, 0.88);
    cursor: grab;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.ship-tray-card:hover { border-color: rgba(120, 160, 220, 0.4); }
.ship-tray-card.is-scorched { opacity: 0.78; cursor: default; }
.ship-tray-card.is-picked,
.ship-tray-card.is-dragging {
    border-color: rgba(122, 255, 208, 0.65);
    box-shadow: 0 0 0 1px rgba(122, 255, 208, 0.2);
}
/* Tempered / unique gold|violet — beat filled/tray hover + pick styles below. */
.ship-slot-pad.is-filled.is-tempered,
.ship-slot-pad.is-filled.is-tempered:hover,
.ship-slot-pad.is-tempered:hover,
.ship-tray-card.is-tempered:hover,
.ship-tray-card.is-tempered.is-picked,
.ship-tray-card.is-tempered.is-dragging,
.ship-tray-card.is-compact.is-tempered:hover,
.ship-tray-card.is-compact.is-tempered.is-picked,
.ship-tray-card.is-compact.is-tempered.is-dragging {
    border-color: rgba(232, 200, 120, 0.7);
    box-shadow: 0 0 0 1px rgba(232, 200, 120, 0.28);
}
.ship-slot-pad.is-filled.is-unique,
.ship-slot-pad.is-filled.is-unique:hover,
.ship-slot-pad.is-unique:hover,
.ship-tray-card.is-unique:hover,
.ship-tray-card.is-unique.is-picked,
.ship-tray-card.is-compact.is-unique:hover,
.ship-tray-card.is-compact.is-unique.is-picked {
    border-color: rgba(200, 160, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(200, 160, 255, 0.28);
}
/* Special-stat chrome by roll tier (wins over generic tempered gold). */
.ship-slot-pad.is-affix-uncommon,
.ship-tray-card.is-affix-uncommon,
.ship-tray-card.is-compact.is-affix-uncommon,
.ship-slot-pad.is-filled.is-affix-uncommon,
.ship-slot-pad.is-filled.is-affix-uncommon:hover,
.ship-tray-card.is-affix-uncommon:hover,
.ship-tray-card.is-compact.is-affix-uncommon:hover,
.ship-tray-card.is-compact.is-affix-uncommon.is-picked,
.ship-tray-card.is-tempered.is-affix-uncommon:hover {
    border-color: rgba(111, 224, 127, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(111, 224, 127, 0.22);
}
.ship-slot-pad.is-affix-rare,
.ship-tray-card.is-affix-rare,
.ship-tray-card.is-compact.is-affix-rare,
.ship-slot-pad.is-filled.is-affix-rare,
.ship-slot-pad.is-filled.is-affix-rare:hover,
.ship-tray-card.is-affix-rare:hover,
.ship-tray-card.is-compact.is-affix-rare:hover,
.ship-tray-card.is-compact.is-affix-rare.is-picked,
.ship-tray-card.is-tempered.is-affix-rare:hover {
    border-color: rgba(92, 198, 255, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(92, 198, 255, 0.22);
}
.ship-slot-pad.is-affix-legendary,
.ship-tray-card.is-affix-legendary,
.ship-tray-card.is-compact.is-affix-legendary,
.ship-slot-pad.is-filled.is-affix-legendary,
.ship-slot-pad.is-filled.is-affix-legendary:hover,
.ship-tray-card.is-affix-legendary:hover,
.ship-tray-card.is-compact.is-affix-legendary:hover,
.ship-tray-card.is-compact.is-affix-legendary.is-picked,
.ship-tray-card.is-tempered.is-affix-legendary:hover {
    border-color: rgba(255, 186, 77, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(255, 186, 77, 0.28);
}
.ship-tray-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.ship-tray-name { font-weight: 600; color: #e8f0ff; }
.ship-tray-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ship-panel-side {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(92, 198, 255, 0.18);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(40, 70, 120, 0.22), transparent 55%),
        rgba(6, 12, 26, 0.55);
}
.ship-side-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.ship-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-bottom: 10px;
}
.ship-stat-row {
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.025);
}
.ship-arm-summary { margin-top: 8px; }
.ship-stat-arm {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    margin-bottom: 4px;
    border: 1px solid transparent;
}
.ship-stat-arm.is-active {
    border-color: rgba(92, 198, 255, 0.35);
    background: rgba(20, 44, 74, 0.4);
}
.ship-stat-arm > b {
    flex: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(92, 198, 255, 0.18);
    color: var(--accent);
    font-size: 11px;
}
.ship-stat-arm-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ship-stat-arm-name { font-weight: 600; color: #e8f0ff; }
.ship-compare-panel {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(92, 198, 255, 0.28);
    background: rgba(4, 10, 22, 0.9);
    font-size: 12px;
    animation: ship-cat-in 0.2s ease;
}
.ship-arming-host .arming-board { margin-top: 4px; }
@media (max-width: 1100px) {
    .ship-panel-hero {
        grid-template-columns: auto 1fr;
    }
    .ship-hero-vitals {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 980px) {
    .ship-panel-layout {
        grid-template-columns: 1fr;
    }
    .ship-panel-rail { position: static; }
    .ship-cat-row {
        grid-template-columns: 1fr;
    }
    .ship-cat-divider {
        display: none;
    }
    .ship-panel-hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .ship-hero-vitals {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ship-panel-tray { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ship-panel-window,
    .ship-outfit-group,
    .ship-hangar,
    .ship-compare-panel {
        animation: none;
    }
    .ship-slot-pad,
    .ship-tray-card {
        transition: none;
    }
}
.muted { color: var(--muted); }

/* ---- admin console ---- */
#admin { z-index: 65; }
#adminManual { z-index: 70; }
.admin-header-actions { display: flex; gap: 8px; align-items: center; }
.admin-manual-window header h2 { color: #ffc090; }
.maint-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    padding: 8px 16px; text-align: center; font-size: 13px; line-height: 1.35;
    background: rgba(120, 40, 20, 0.92); color: #ffe8c8; border-bottom: 1px solid rgba(255,160,80,0.45);
    pointer-events: none;
}
.maint-banner.hidden { display: none; }
.admin-window { width: min(1120px, 98vw); max-height: 88vh; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.admin-window header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--panel-border); }
.admin-window h2 { margin: 0; font-size: 19px; color: #fff; }
.admin-window .tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
    overscroll-behavior-x: contain; scrollbar-width: thin;
}
.admin-window .tabs button { flex: 0 0 auto; white-space: nowrap; }
.admin-window .tabpane { display: none; padding: 16px 20px; overflow-y: auto; }
.admin-window .tabpane.active { display: block; }
.admin-player { border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ap-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ap-head .name { color: #fff; font-weight: 600; }
.ap-head .desc { color: var(--muted); font-size: 12px; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-actions button { font-size: 12px; padding: 5px 9px; }
.ap-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.ap-give { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.ap-give select, .ap-give input { font-size: 12px; padding: 4px; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
.ap-give .ap-qty { width: 58px; }
.admin-player-detail {
    border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px; margin-top: 8px;
    background: rgba(0,0,0,0.18);
}
.admin-player-detail.empty { color: var(--muted); }
.admin-players-list { margin-top: 8px; max-height: 46vh; overflow: auto; }
.admin-audit-list { margin-top: 8px; max-height: 55vh; overflow: auto; font-size: 12px; }
.admin-audit-row {
    display: grid;
    grid-template-columns: 158px 140px 120px 64px 1fr;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    align-items: start;
}
.admin-audit-row .when { color: var(--muted); }
.admin-audit-row .type { color: #c8d6ff; font-weight: 600; }
.admin-audit-row .who { color: var(--muted); word-break: break-all; }
.admin-audit-row .detail { color: var(--text); word-break: break-word; }
@media (max-width: 900px) {
    .admin-audit-row { grid-template-columns: 1fr; gap: 2px; }
}
.badge { font-size: 10px; background: rgba(255,92,108,0.3); color: #ffb3bb; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.admin-names { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.admin-name { display: flex; align-items: center; gap: 10px; border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 12px; }
.admin-name .info { flex: 1; display: flex; flex-direction: column; cursor: pointer; min-width: 0; }
.admin-name .info:hover .name { color: #ffe9a8; }
.admin-name .name { color: #fff; }
.admin-name .desc { color: var(--muted); font-size: 12px; }
.admin-name button { font-size: 12px; padding: 5px 10px; }
.admin-inspect-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.admin-inspect-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.admin-inspect-bar input[type="number"] { width: 72px; font-size: 13px; padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
.admin-inspect-bar button { font-size: 12px; padding: 6px 12px; }
.admin-inspect-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: var(--muted); margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: rgba(0,0,0,0.18); }
.admin-inspect-meta.empty { color: var(--muted); }
.admin-inspect-meta b { color: var(--text); font-weight: 600; }
.admin-inspect-list { display: flex; flex-direction: column; gap: 8px; }
.admin-body { border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 12px; background: rgba(0,0,0,0.12); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.admin-body:hover { border-color: rgba(92,198,255,0.35); background: rgba(40,70,110,0.14); }
.admin-body.selected { border-color: rgba(92,198,255,0.55); background: rgba(40,90,140,0.18); }
.admin-body .ab-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.admin-body .ab-head .name { color: #fff; font-weight: 600; font-size: 13px; }
.admin-body .ab-head .type { color: #ffb3bb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-body .ab-grid { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.admin-body .ab-grid b { color: var(--text); font-weight: 500; }
.admin-body .ab-grid code { font-size: 11px; color: #c8d6ff; }
.admin-body .ab-id { opacity: 0.85; }
.admin-inspect-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.95fr); gap: 14px; align-items: start; }
.admin-inspect-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.admin-workshop, .admin-spawn { border: 1px solid var(--panel-border); border-radius: 8px; padding: 12px 14px; background: rgba(0,0,0,0.14); }
.admin-workshop.empty { opacity: 0.85; }
.admin-workshop-target { color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.admin-workshop-target .type { color: #ffb3bb; font-weight: 500; font-size: 11px; text-transform: uppercase; margin-left: 6px; }
#adminWorkshopPreview { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 10px; border-radius: 8px; border: 1px solid var(--panel-border); background: #0a1020; }
.admin-workshop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; }
.admin-workshop-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.admin-workshop-grid label.wide { grid-column: 1 / -1; }
.admin-workshop-grid .admin-ops-hint.wide { grid-column: 1 / -1; }
.admin-workshop-grid input[type="number"],
.admin-workshop-grid select {
    font-size: 12px; padding: 5px 8px; background: rgba(8, 14, 28, 0.95); color: var(--text);
    border: 1px solid rgba(92, 198, 255, 0.35); border-radius: 6px; color-scheme: dark;
}
.admin-workshop-grid select option { background: #0a1226; color: var(--text); }
.admin-workshop-grid input[type="range"] { width: 100%; }
.admin-seed-row { display: flex; gap: 6px; align-items: center; }
.admin-seed-row input { flex: 1; min-width: 0; }
.admin-workshop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.admin-workshop-actions button { font-size: 12px; padding: 6px 12px; }
@media (max-width: 720px) {
    .admin-inspect-layout { grid-template-columns: 1fr; }
    .admin-inspect-side { position: static; }
}
.admin-ops-note { font-size: 12px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; }
.admin-ops-note b { color: var(--text); }
.admin-ops-block { border: 1px solid var(--panel-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: rgba(0,0,0,0.14); }
.admin-ops-block.danger { border-color: rgba(255,92,108,0.45); background: rgba(255,40,60,0.08); }
.admin-ops-label { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-ops-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.admin-ops-actions button, .admin-ops-block button { font-size: 12px; padding: 6px 12px; }
#adminGodmode.on { border-color: rgba(80,220,140,0.55); color: #7dffb0; background: rgba(40,160,90,0.2); }
#adminObserve.on { border-color: rgba(120,180,255,0.55); color: #9ec4ff; background: rgba(50,100,180,0.22); }
#adminWeaponTest.on { border-color: rgba(255,180,90,0.55); color: #ffd090; background: rgba(160,100,30,0.22); }
.admin-ops-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.admin-ops-hint.inline { display: inline; margin-top: 0; flex: 1 1 12rem; min-width: 10rem; }
.admin-ops-hint code { color: #ffb3bb; font-size: 11px; }
.admin-ops-session-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 10px;
}
.admin-ops-session-row:last-child { margin-bottom: 0; }
.admin-ops-session-row select {
    font-size: 12px; padding: 5px 8px; max-width: min(220px, 100%);
    background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px;
}
.admin-ops-session-row select:disabled,
.admin-ops-session-row button:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.admin-spawn-npc { margin-top: 12px; }
.admin-dens-list {
    margin-top: 8px; padding: 8px 10px; border-radius: 8px;
    background: rgba(0,0,0,0.22); border: 1px solid var(--panel-border);
    font-size: 12px; max-height: 140px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
}
.admin-dens-row {
    display: flex; align-items: flex-start; gap: 8px;
    color: var(--text); cursor: pointer; font-size: 12px;
}
.admin-dens-row .muted { font-size: 10.5px; display: block; }
.admin-npc-den-only.hidden { display: none !important; }
.admin-wipe-backups { margin-top: 8px; max-height: 12vh; overflow: auto; }
.admin-backup-row { font-size: 11px; margin: 2px 0; }
.admin-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); margin: 8px 0; }
.admin-contract-detail {
    border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px 12px; margin-top: 8px;
    background: rgba(0,0,0,0.14); max-height: 40vh; overflow: auto; font-size: 12px;
}
.admin-contract-detail.empty { color: var(--muted); }
.admin-contract-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-atlas-list { margin-top: 10px; max-height: 42vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.admin-atlas-row {
    display: grid; grid-template-columns: 72px 88px 1fr auto; gap: 8px; align-items: center;
    padding: 6px 10px; background: rgba(0,0,0,0.14); border: 1px solid var(--panel-border); border-radius: 6px; font-size: 12px;
    cursor: pointer;
}
.admin-atlas-row:hover { border-color: rgba(92,198,255,0.35); background: rgba(40,90,140,0.12); }
.admin-atlas-row.selected {
    border-color: rgba(255, 210, 90, 0.55); background: rgba(80, 60, 10, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 90, 0.2);
}
.admin-atlas-row.settled { border-color: rgba(255, 210, 90, 0.35); background: rgba(80, 60, 10, 0.18); }
.admin-atlas-row.settled.selected { border-color: rgba(255, 210, 90, 0.65); }
.admin-atlas-row .coord { font-weight: 600; color: #c8d6ff; font-variant-numeric: tabular-nums; }
.admin-atlas-row .status { color: #ffe9a8; }
.admin-atlas-row .meta { color: var(--muted); font-size: 11px; }
.admin-atlas-row .row-hint { font-size: 11px; color: var(--muted); padding: 2px 6px; }
.admin-atlas-row.selected .row-hint { color: #ffe9a8; }
.admin-atlas-detail {
    margin-top: 8px; padding: 10px 12px; background: rgba(0,0,0,0.14); border: 1px solid var(--panel-border); border-radius: 8px;
}
.admin-atlas-detail.empty { color: var(--muted); }
.admin-atlas-pilots { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-height: 160px; overflow: auto; }
.admin-atlas-pilot { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; }
.admin-atlas-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.admin-search-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.admin-search-label input[type="search"] {
    font-size: 13px; padding: 5px 8px; min-width: 160px; background: rgba(0,0,0,0.3); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px;
}
.admin-subtabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}
.admin-subtabs button {
    font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--panel-border);
    background: rgba(0,0,0,0.2); color: var(--muted); cursor: pointer;
}
.admin-subtabs button.active {
    color: #fff; border-color: rgba(92,198,255,0.45); background: rgba(40,90,140,0.28);
}
.admin-subtabs button.hidden { display: none; }
.admin-subpane { display: none; }
.admin-subpane.active { display: block; }
.admin-knowledge-sticky { margin-bottom: 4px; }
.admin-sticky-bar { margin-bottom: 8px; }
.admin-inspect-meta .sep { color: rgba(255,255,255,0.25); margin: 0 4px; }
.admin-atlas-pilot .muted { color: var(--muted); }
.admin-window .tabs > button.hidden { display: none; }
#adminMaintMsg, #adminContractName {
    width: 100%; max-width: 420px; font-size: 13px; padding: 6px 8px;
    background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px;
    margin: 6px 0;
}
.admin-spawn-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.admin-spawn-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.admin-spawn-grid select, .admin-spawn-grid input[type="number"] {
    font-size: 13px; padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px; min-width: 110px;
}
.admin-spawn-pos-mode { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 10px; font-size: 12px; color: var(--text); }
.admin-spawn-pos-mode label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-feedback-list { display: flex; flex-direction: column; gap: 8px; }
.admin-feedback { border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px 12px; background: rgba(0,0,0,0.14); }
.admin-feedback.unread { border-color: rgba(92,198,255,0.4); background: rgba(40,90,140,0.12); }
.admin-feedback .af-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.admin-feedback .af-type { text-transform: uppercase; letter-spacing: 0.04em; color: #ffb3bb; font-weight: 600; font-size: 11px; }
.admin-feedback .af-when { color: var(--muted); margin-left: auto; }
.admin-feedback .af-msg { color: #fff; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-bottom: 6px; }
.admin-feedback .af-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.admin-feedback .af-meta b { color: var(--text); font-weight: 500; }
.admin-feedback .af-id { opacity: 0.7; }
.admin-feedback .af-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-feedback .af-actions button { font-size: 12px; padding: 5px 10px; }
.admin-eco-wallet, .admin-eco-pulse {
    border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px 12px;
    background: rgba(0,0,0,0.14); margin-bottom: 10px; font-size: 13px;
}
.admin-eco-wallet.empty, .admin-eco-pulse.empty { color: var(--muted); }
.admin-eco-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-eco-head .name { color: #fff; font-weight: 600; }
.admin-eco-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.admin-eco-meta b { color: var(--text); font-weight: 500; }
.admin-eco-meta code { font-size: 11px; color: #c8d6ff; }
.admin-eco-cargo { margin: 0 0 8px; padding-left: 18px; color: var(--text); font-size: 12px; }
.admin-eco-cargo .muted { color: var(--muted); }
#adminEcoName, #adminEcoStation, #adminEcoAmount, #adminEcoBoost {
    font-size: 13px; padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px;
}
#adminEcoName { min-width: 160px; }
#adminEcoStation { min-width: 180px; }
#adminEcoAmount { width: 110px; }
#adminEcoBoost { width: 80px; }
#adminResetConfirm { width: 120px; font-size: 13px; padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 6px; }
#adminResetUniverse { border-color: rgba(255,92,108,0.5); color: #ffb3bb; }
#adminDelete { border-color: rgba(255,140,80,0.55); color: #ffc090; }
#adminRoleName, #adminSurnameName, #adminSurnameValue, #adminBadgeName,
#adminDelAccName, #adminDelAccConfirm {
    min-width: 140px; font-size: 13px; padding: 5px 8px; background: rgba(0,0,0,0.3); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px;
}
#adminRoleName { min-width: 180px; }
#adminRoleSelect, #adminBadgeSelect, #adminEcoGood,
.admin-window select, .admin-player-pick {
    font-size: 12px; padding: 5px 8px;
    background: rgba(8, 14, 28, 0.95); color: var(--text);
    border: 1px solid rgba(92, 198, 255, 0.35); border-radius: 6px;
    color-scheme: dark;
}
.admin-window select:focus, .admin-player-pick:focus, #adminRoleSelect:focus,
#adminBadgeSelect:focus, #adminEcoGood:focus {
    border-color: var(--accent); outline: none;
}
.admin-window select option, .admin-player-pick option,
#adminRoleSelect option, #adminBadgeSelect option, #adminEcoGood option {
    background: #0a1226; color: var(--text);
}
.admin-player-pick { max-width: min(220px, 42vw); min-width: 120px; }
@media (max-width: 600px) {
    .admin-player-pick { max-width: 100%; min-width: 0; flex: 1 1 140px; }
    .admin-inspect-bar #adminRoleName,
    .admin-inspect-bar #adminSurnameName,
    .admin-inspect-bar #adminBadgeName,
    .admin-inspect-bar #adminDelAccName,
    .admin-inspect-bar #adminEcoName { flex: 1 1 140px; min-width: 0; }
}
#atab-broadcast textarea { width: 100%; background: rgba(0,0,0,0.3); color: var(--text); border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px; resize: vertical; margin-bottom: 10px; }
.notice.action { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.notice.action button { font-size: 13px; padding: 6px 12px; white-space: nowrap; }
.notice.sticky .notice-dismiss { min-width: 28px; min-height: 28px; }
/* ---- goals / guide overlay ---- */
#goalsGuide { z-index: 60; }
.goals-window {
    width: min(820px, 96vw); height: min(84vh, 700px); background: var(--panel);
    border: 1px solid var(--panel-border); border-radius: 14px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.goals-window header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap;
}
.goals-window h2 { margin: 0; font-size: 18px; color: #fff; letter-spacing: 0.5px; }
.goals-header-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.goals-toggle { margin: 0 !important; }
.goals-lead {
    margin: 0; padding: 10px 18px; font-size: 12.5px; color: var(--muted); line-height: 1.45;
    border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.12);
}
.goals-lore {
    padding: 14px 18px 12px; border-bottom: 1px solid rgba(92,198,255,0.2);
    background: linear-gradient(180deg, rgba(20,48,72,0.55), rgba(8,16,28,0.35));
}
.goals-lore.hidden { display: none; }
.goals-lore-title {
    font-size: 15px; font-weight: 650; color: #e8f4ff; letter-spacing: 0.04em; margin-bottom: 8px;
}
.goals-lore-lead, .goals-lore-promise {
    margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c5d6ea;
}
.goals-lore-promise { margin-bottom: 0; color: #9ef0ff; }
.goals-body { display: flex; flex: 1; min-height: 0; }
.goals-nav {
    width: 120px; flex-shrink: 0; border-right: 1px solid var(--panel-border);
    padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.goals-nav button {
    text-align: left; border: none; background: transparent; color: var(--muted);
    padding: 8px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer;
}
.goals-nav button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.goals-main { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.goals-focus-card {
    padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(92,198,255,0.35);
    background: rgba(40,80,120,0.22);
}
.goals-focus-card.done { border-color: rgba(138,255,193,0.4); background: rgba(40,100,70,0.18); }
.goals-focus-card.peek { border-color: rgba(255,200,120,0.4); }
.goals-focus-kicker {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px;
}
.goals-focus-card h3 { margin: 0 0 8px; font-size: 17px; color: #fff; }
.goals-hint { margin: 0 0 6px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.goals-detail { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.goals-focus-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.goals-focus-actions button {
    font-size: 12.5px; padding: 7px 12px; border-radius: 6px;
    border: 1px solid rgba(120,160,220,0.35); background: rgba(30,50,80,0.8); color: #cfe0ff; cursor: pointer;
}
.goals-focus-actions button.primary { background: #2a7fd4; border-color: #2a7fd4; color: #fff; }
.goals-group-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 8px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
}
.goals-group-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.goals-step {
    display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
    padding: 10px 12px; margin: 0 0 6px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: rgba(0,0,0,0.18); color: inherit;
}
.goals-step:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.goals-step.current { border-color: rgba(92,198,255,0.45); background: rgba(50,100,150,0.2); }
.goals-step.focused { box-shadow: inset 0 0 0 1px rgba(255,200,120,0.45); }
.goals-step.done { opacity: 0.72; }
.goals-step.done .goals-step-title { color: var(--accent-2); }
.goals-step-mark {
    flex-shrink: 0; width: 18px; text-align: center; font-weight: 700; color: var(--accent); margin-top: 1px;
}
.goals-step.done .goals-step-mark { color: var(--accent-2); }
.goals-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goals-step-title { font-weight: 700; font-size: 13.5px; color: #fff; }
.goals-step-hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
.panel.goal { cursor: pointer; }
@media (max-width: 640px) {
    .goals-nav { width: 88px; padding: 8px 6px; }
    .goals-nav button { font-size: 11px; padding: 7px 8px; }
    .goals-main { padding: 10px 12px 16px; }
    .goals-window { height: min(88vh, 720px); }
}

.manual-window { width: min(900px, 94vw); height: min(82vh, 720px); background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.manual-window header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--panel-border); flex-wrap: wrap; }
.manual-window h2 { margin: 0; font-size: 20px; color: #fff; letter-spacing: 1px; }
.manual-header-tools { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.manual-search { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; max-width: 280px; min-width: 0; }
.manual-search-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.manual-search input {
    flex: 1; min-width: 0; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--panel-border);
    background: rgba(0,0,0,0.28); color: var(--text); font-size: 13px;
}
.manual-search input:focus { outline: none; border-color: var(--accent); }
.manual-search input::placeholder { color: var(--muted); }
.manual-search-status {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 22px; font-size: 12px; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
}
.manual-search-status.hidden { display: none; }
.manual-search-msg { min-width: 0; flex: 1 1 auto; }
.manual-find-nav {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.manual-find-nav.hidden { display: none; }
.manual-find-nav button {
    min-width: 28px; padding: 3px 8px; font-size: 11px; line-height: 1.2;
    border-radius: 6px; border: 1px solid var(--panel-border);
    background: rgba(255,255,255,0.06); color: var(--text);
}
.manual-find-nav button:hover { background: rgba(92,198,255,0.18); border-color: var(--accent); }
.manual-find-count {
    font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; color: var(--text);
}
.manual-body { display: flex; flex: 1; min-height: 0; }
.manual-nav { width: 210px; flex-shrink: 0; border-right: 1px solid var(--panel-border); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.manual-nav button { text-align: left; border: none; background: transparent; color: var(--muted); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.manual-nav button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.manual-nav button.active { background: rgba(92,198,255,0.16); color: #fff; }
.manual-nav button.manual-nav-miss { display: none; }
.manual-content { flex: 1; overflow-y: auto; padding: 20px 28px; line-height: 1.6; font-size: 14px; }
.manual-content h3 { margin-top: 0; color: var(--accent); font-size: 18px; }
.manual-content b { color: #eaf2ff; }
.manual-content code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent-2); }
.manual-content kbd { background: rgba(255,255,255,0.1); border: 1px solid var(--panel-border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; font-size: 12px; color: #fff; }
.manual-content .tip { background: rgba(138,255,193,0.08); border-left: 3px solid var(--accent-2); padding: 9px 14px; border-radius: 6px; color: #cfeede; }
.manual-content .muted { color: var(--muted); font-size: 12px; font-weight: 400; }
.manual-content mark.manual-hl {
    background: rgba(255,200,80,0.35); color: #fff8e8; padding: 0 2px; border-radius: 3px;
}
.manual-content mark.manual-hl-active {
    background: rgba(255,170,40,0.72); color: #fff; outline: 1px solid rgba(255,220,140,0.85);
    box-shadow: 0 0 0 2px rgba(255,180,60,0.25);
}
.manual-content ul, .manual-content ol { padding-left: 22px; }
.manual-content li { margin: 4px 0; }
.manual-content table.kv { width: 100%; border-collapse: collapse; }
.manual-content table.kv td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.manual-content table.kv td:first-child { white-space: nowrap; width: 36%; color: var(--accent); }

@media (max-width: 600px) {
    #controls { display: none; }
    /* Narrow: controls gone — pin chat back under the left HUD (touch rules still win when active). */
    body:not(.touch-active) #guildChat {
        left: max(10px, env(safe-area-inset-left));
        width: min(360px, calc(100vw - 24px));
    }
    #hud { max-width: none; width: max-content; gap: 6px; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); }
    #hud .hud-stack { width: 168px; max-width: 168px; }
    #hud .den-panel { width: 120px; max-width: 120px; }
    #hud .panel { padding: 7px 8px; border-radius: 7px; font-size: 11px; }
    #hud .panel.mini { padding: 6px 8px; font-size: 10px; }
    #hud .panel-title { font-size: 8px; margin-bottom: 3px; letter-spacing: 0.06em; }
    #hud .row { gap: 6px; margin: 1px 0; }
    #hud .bar { gap: 5px; margin: 3px 0; font-size: 9.5px; }
    #hud .bar > span:first-child, #hud .bar.goal-bar > span { width: 28px; }
    #hud .bar .bar-val { min-width: 2.8em; font-size: 9px; }
    #hud .track { height: 5px; border-radius: 3px; }
    #hud .frontier-readout { margin-top: 1px; padding-top: 4px; font-size: 9.5px; }
    #hud .frontier-readout .fr-sub { font-size: 9px; }
    #hud .sector .danger { font-size: 9.5px; }
    #hud #hudSector { font-size: 10px; }
    #hud .scan-near { font-size: 9px; }
    #hud .panel.goal .goal-name { font-size: 11px; margin-bottom: 2px; }
    #hud .panel.goal .goal-detail { font-size: 9.5px; margin-top: 2px; }
    #hud .panel.contracts-hud { padding: 6px 8px; }
    #hud .panel.contracts-hud .panel-title { margin-bottom: 4px; }
    #hud .chud-title { font-size: 10.5px; margin-bottom: 2px; }
    #hud .chud-status { font-size: 9.5px; }
    #hud .chud-bar { height: 3px; margin-bottom: 2px; }
    #hud .chud-row { margin-bottom: 5px; }
    .hud-extras { gap: 6px; }
    .hud-extras-body { gap: 6px; }
    .hazard-banner { padding: 6px 8px; border-radius: 7px; }
    .hazard-banner .hazard-title { font-size: 10px; }
    .hazard-banner .hazard-detail { margin-top: 2px; font-size: 9.5px; }
    #notices {
        top: max(108px, calc(64px + env(safe-area-inset-top, 0px) + 40px));
        right: 10px;
        gap: 4px;
        max-width: min(280px, 48vw);
    }
    #notices.overlay-safe {
        top: max(116px, calc(72px + env(safe-area-inset-top, 0px) + 40px));
        max-width: min(240px, 44vw);
    }
    .notice { padding: 6px 10px; border-radius: 6px; font-size: 11px; }
    .notice.big { font-size: 13px; padding: 8px 14px; }
    .notice.sticky { gap: 8px; padding-right: 8px; }
    .notice.sticky .notice-dismiss { font-size: 16px; min-width: 28px; min-height: 28px; }
    #hudTopBar {
        top: max(64px, calc(env(safe-area-inset-top, 0px) + 52px));
        right: max(10px, env(safe-area-inset-right, 0px));
        gap: 3px;
        padding: 3px 4px;
    }
    #hudTopBar button:not(.hud-float-btn) { height: 30px; padding: 0 10px; font-size: 12px; }
    #helpBtn, #settingsBtn, #displayScaleBtn { width: 30px; }
    #adminQuick {
        top: max(64px, calc(env(safe-area-inset-top, 0px) + 52px));
        right: calc(max(10px, env(safe-area-inset-right, 0px)) + 8px + min(320px, 55vw));
        gap: 3px;
        padding: 3px 4px;
    }
    #adminQuick button.admin-quick { height: 30px; padding: 0 9px; font-size: 11px; }
    .manual-body { flex-direction: column; }
    .manual-nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--panel-border); }
    .inv-stats { grid-template-columns: 1fr; }
    .inv-fit-grid,
    .inv-stow-list { grid-template-columns: 1fr; }
    .inv-fit-row { gap: 8px; padding: 6px 6px; }
    .inv-stow-row .inv-thumb-slot { margin-top: 2px; }
    .inv-stow-row .inv-stow-info { flex: 1 1 calc(100% - 58px); min-width: 0; }
    .inv-stow-row .inv-stow-actions,
    .inv-stow-row .inv-stow-hint {
        flex: 1 1 100%;
        margin-left: 58px; /* align under name, past thumb */
    }
    .inv-thumb-slot .shop-preview {
        width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    }
    .inv-thumb-slot {
        width: 44px; height: 44px;
    }
    .station-actions button { min-height: 40px; min-width: 68px; padding: 8px 12px; font-size: 13px; }
    .station-actions #undockBtn.station-undock { min-width: 88px; padding: 10px 16px; font-size: 14px; }
    .goal-step-chip {
        top: var(--hud-topbar-inset-top);
        right: max(12px, env(safe-area-inset-right, 0px));
        left: auto;
        width: min(280px, calc(100vw - 24px));
        max-width: min(360px, 94vw);
    }
    .goal-step-title { font-size: 12px; }
    .goal-step-hint { font-size: 10.5px; }
    .station-window header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .station-window h2 { font-size: 16px; }
    .station-window {
        width: min(1200px, 100vw - 12px);
        height: min(85vh, 100dvh - 12px);
        max-height: min(85vh, 100dvh - 12px);
        border-radius: 10px;
    }
    #station.overlay {
        padding: max(2px, env(safe-area-inset-top, 0px)) 6px max(2px, env(safe-area-inset-bottom, 0px));
    }
    .shop-list { grid-template-columns: 1fr; }
    .shop-item { gap: 8px; padding: 9px 10px; }
    .shop-item .desc { font-size: 11px; line-height: 1.35; }
    .shop-item-trail { min-width: 6.75rem; gap: 5px; }
    .shop-preview { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
    .station-meters { gap: 10px; }
    .station-credits { min-width: 4.5rem; }
    .station-credits b { font-size: 14px; }
    .records-status { gap: 6px 10px; font-size: 11px; }
    .records-status .chip { min-width: 64px; gap: 1px; padding: 6px 8px; }
    .records-status .chip b { font-size: 11px; }
    .tabs { padding: 6px 10px 0; gap: 3px; }
    .tabpane { padding: 10px 12px; }
    .shop-cat-tab { min-width: 6.25rem; padding: 9px 12px 10px; font-size: 11.5px; }

    /* Entry: top-align so tall content + keyboard can scroll to Feedback */
    #entry {
        align-items: flex-start;
        justify-content: flex-start;
        padding: max(16px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom));
    }
    .entry-window { width: min(440px, 100%); margin: 0 auto; padding: 22px 18px 20px; }
    .entry-window h1 { font-size: 32px; letter-spacing: 4px; }
    .entry-auth input, .entry-auth button,
    #entry input[type="text"], #entry input[type="password"], #entry input[type="email"],
    #entry button {
        min-height: 44px; font-size: 16px;
    }
    .entry-hero { margin-bottom: 14px; }
    .entry-columns { gap: 16px; }
    .entry-aside {
        padding-top: 14px;
        border-top: 1px solid var(--panel-border);
    }
    .entry-feedback { font-size: 14px; min-height: 44px; padding: 10px 4px; }
    .entry-manual { font-size: 14px; min-height: 44px; padding: 10px 4px; }
    .entry-motto { margin-top: 10px; }
    .inv-honors .inv-surname {
        padding: 10px; font-size: 13px;
    }
    .inv-honors .inv-surname-form {
        flex-direction: column; align-items: stretch;
    }
    .inv-honors .inv-surname-form input {
        max-width: none; font-size: 16px; min-height: 44px;
    }
    .inventory-body {
        padding: 12px 14px max(20px, env(safe-area-inset-bottom));
    }

    /* Station tabs: swipe to reach Guild — denser on phone */
    .tabs {
        overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
        overscroll-behavior-x: contain; scrollbar-width: thin;
        padding-bottom: 0;
    }
    .tabs button {
        flex: 0 0 auto; white-space: nowrap; min-height: 38px; padding: 7px 11px; font-size: 12px;
        border-radius: 6px 6px 0 0;
    }

    /* Guild panels — thumb-friendly */
    .guild-member {
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
    }
    .guild-member-actions { grid-column: 1 / -1; justify-content: flex-start; gap: 8px; }
    .guild-list-row {
        grid-template-columns: auto 1fr auto;
        gap: 6px 8px;
    }
    .guild-list-row button { grid-column: 1 / -1; }
    .guild-form-row { gap: 10px; }
    .guild-form-row input { min-height: 44px; font-size: 16px; /* avoid iOS zoom */ }
    .guild-form input, .guild-form select, .guild-form textarea { min-height: 44px; font-size: 16px; }
    .guild-form textarea { min-height: 72px; }
    .guild-member-actions button,
    .guild-notice-meta button,
    .guild-form-row button,
    .guild-form button,
    .guild-list-row button,
    .guild-atlas .guild-form-row button,
    [data-guild-leave] {
        min-height: 40px; padding: 8px 12px; font-size: 13px;
    }
    .guild-notices, .guild-list, .guild-log { max-height: min(36vh, 240px); }
    .guild-manage-window {
        width: min(1040px, 100vw - 16px);
        max-height: min(90vh, 100dvh - 16px);
    }
    .guild-cols, .guild-ops { grid-template-columns: 1fr; }
}

/* Touch session: desk top-right Pilot/News/?/⚙ move into the touch strip; lift chat above the stick.
   Pill hides unless Admin is showing (still desktop-corner chrome for ops). */
body.touch-active #helpBtn,
body.touch-active #inventoryBtn,
body.touch-active #newsBtn,
body.touch-active #displayScaleBtn,
body.touch-active #settingsBtn { display: none !important; }
body.touch-active #hudTopBar { display: none !important; }
body.touch-active #hudTopBar:has(#adminBtn:not(.hidden)) { display: inline-flex !important; }
body.touch-active #adminQuick:not(.hidden):has(button:not(.hidden)) {
    display: inline-flex !important;
    top: var(--hud-topbar-inset-top);
    right: calc(max(16px, env(safe-area-inset-right, 0px)) + 8px + 92px);
    left: auto;
}
body.touch-active #adminQuick:has(> .hud-float-header) {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px;
    padding: 4px 5px !important;
    border-radius: 999px !important;
    overflow: visible;
}
body.touch-active #adminQuick > .hud-float-header { display: none !important; }
body.touch-active #adminQuick > .hud-float-body {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
/* Touch keeps fixed corner chrome — no float strip header even if wrap already ran */
body.touch-active #hudTopBar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px;
    padding: 4px 5px !important;
    border-radius: 999px !important;
    overflow: visible;
}
body.touch-active #hudTopBar > .hud-float-body {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
body.touch-active #guildChat {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(168px, calc(env(safe-area-inset-bottom) + 156px));
    width: min(360px, calc(100vw - 24px));
    max-height: min(320px, 48vh);
    z-index: 16;
}
body.touch-active #guildChat header button {
    min-height: 40px; min-width: 40px; padding: 0 12px; font-size: 13px;
}
body.touch-active #guildChat header #guildChatToggle { width: 40px; font-size: 18px; }
body.touch-active #guildChat header .guild-manage-open {
    min-height: 40px; padding: 0 14px; font-size: 12px;
}
body.touch-active .chat-ch {
    min-height: 40px; padding: 8px 6px; font-size: 12px;
}
body.touch-active .guild-chat-log {
    max-height: min(160px, 30vh);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body.touch-active .guild-chat-form input {
    min-height: 40px; font-size: 16px;
}
body.touch-active #prompt { bottom: max(200px, calc(env(safe-area-inset-bottom) + 190px)); }

/* Phone: chat above the control stack; keep expandable via − / + */
@media (max-width: 480px) {
    body.touch-active #guildChat {
        left: max(6px, env(safe-area-inset-left));
        right: max(6px, env(safe-area-inset-right));
        /* Sit above the joystick so chat never steals stick hits. */
        bottom: max(132px, calc(env(safe-area-inset-bottom) + 120px));
        width: auto;
        max-width: none;
        max-height: min(72px, 11vh);
        border-radius: 6px;
    }
    body.touch-active #guildChat.collapsed {
        /* Tuck collapsed chip to the right of the stick. */
        left: max(124px, calc(env(safe-area-inset-left) + 116px));
        right: auto;
        width: min(100px, calc(100vw - 140px));
        max-height: none;
        bottom: max(16px, env(safe-area-inset-bottom));
    }
    body.touch-active #guildChat header {
        padding: 4px 5px; font-size: 9px; letter-spacing: 0.04em;
    }
    body.touch-active #guildChat header button {
        min-height: 32px; min-width: 32px; height: 32px; padding: 0 6px; font-size: 11px;
    }
    body.touch-active #guildChat header #guildChatToggle { width: 32px; font-size: 14px; }
    body.touch-active #guildChat header .guild-manage-open {
        min-height: 32px; height: 32px; padding: 0 8px; font-size: 10px;
    }
    body.touch-active .chat-ch {
        min-height: 28px; padding: 3px 4px; font-size: 10px;
    }
    body.touch-active .guild-chat-log {
        min-height: 28px; max-height: min(36px, 6vh); padding: 3px 5px; font-size: 10px; gap: 2px;
    }
    body.touch-active .guild-chat-form { padding: 3px 5px; gap: 4px; }
    body.touch-active .guild-chat-form input {
        min-height: 32px; padding: 4px 6px; font-size: 16px;
    }
    body.touch-active .guild-chat-form button { padding: 4px 8px; font-size: 11px; }
    body.touch-active #prompt { bottom: max(148px, calc(env(safe-area-inset-bottom) + 136px)); font-size: 11px; padding: 5px 10px; }
}
@media (min-width: 481px) and (max-width: 900px) {
    body.touch-active #guildChat {
        bottom: max(152px, calc(env(safe-area-inset-bottom) + 140px));
        max-height: min(280px, 42vh);
    }
    body.touch-active #prompt { bottom: max(176px, calc(env(safe-area-inset-bottom) + 164px)); }
}
/* Leave room for the persistent Close chip; chrome Close is redundant on touch. */
body.touch-active #mapChrome {
    top: max(64px, calc(env(safe-area-inset-top) + 52px));
}
body.touch-active #mapCloseBtn { display: none; }
/* Guild manage: elevated Close (same pattern as map); keep panel below the chip */
body.touch-active #guildManageClose { display: none; }
body.touch-active #guildManage {
    align-items: flex-start;
    justify-content: center;
    padding: max(56px, calc(env(safe-area-inset-top) + 48px)) 10px max(16px, env(safe-area-inset-bottom));
}
body.touch-active .guild-manage-window {
    max-height: min(86vh, calc(100dvh - 72px));
    width: min(1040px, calc(100vw - 20px));
}
/* Guild tap targets on any coarse pointer (phones + tablets) */
body.touch-active .guild-member-actions button,
body.touch-active .guild-notice-meta button,
body.touch-active .guild-form-row button,
body.touch-active .guild-form button,
body.touch-active .guild-list-row button,
body.touch-active .guild-atlas .guild-form-row button,
body.touch-active [data-guild-leave],
body.touch-active #invGuildManage {
    min-height: 44px; padding: 10px 14px; font-size: 14px;
}
body.touch-active .guild-form input,
body.touch-active .guild-form select,
body.touch-active .guild-form textarea,
body.touch-active .guild-form-row input {
    min-height: 44px; font-size: 16px;
}
body.touch-active .guild-member {
    grid-template-columns: 1fr auto;
}
body.touch-active .guild-member-actions {
    grid-column: 1 / -1; justify-content: flex-start; gap: 8px;
}
body.touch-active .tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
}
body.touch-active .tabs button {
    flex: 0 0 auto; white-space: nowrap; min-height: 38px; padding: 7px 11px;
}
body.touch-active .shop-item button {
    min-height: 44px; padding: 10px 14px;
}
body.touch-active .shop-item button.shop-preview {
    min-height: 48px; min-width: 48px; width: 48px; height: 48px; padding: 0;
}
body.touch-active .shop-cat-pin {
    min-height: 36px; min-width: 36px; width: 36px; height: 36px;
    padding: 0; font-size: 14px; opacity: 0.85;
}
body.touch-active .shop-cat-tab {
    min-height: 40px; padding: 8px 8px 9px;
}
/* News / pilot close — thumb-friendly when news auto-opens on login */
body.touch-active #newsClose,
body.touch-active #invClose,
body.touch-active .news-window header button,
body.touch-active .inventory-window header button {
    min-height: 44px; min-width: 72px; padding: 10px 14px; font-size: 14px;
}
/* Honors on pilot sheet — readable + safe-area friendly on narrow screens */
body.touch-active .inv-honors .inv-surname-form input {
    min-height: 44px; font-size: 16px; max-width: none; flex: 1 1 100%;
}
body.touch-active .inv-honors .inv-surname-form button {
    min-height: 44px; padding: 10px 14px; font-size: 14px;
}
body.touch-active .inv-honors .inv-surname-gate {
    font-size: 13px; gap: 8px; flex-wrap: wrap;
}
body.touch-active .inv-badge {
    font-size: 13px; padding: 6px 10px; min-height: 36px;
}

/* --- Touch controls (phones & tablets) --- */
#touch { position: fixed; inset: 0; z-index: 20; pointer-events: none; touch-action: none; }
#touch.hidden { display: none; }
/* Map canvas z=30, map chrome z=40. Lift touch so Close + map controls stay tappable. */
#touch.map-open { z-index: 45; }
#touch.map-open .joystick,
#touch.map-open .touch-ui,
#touch.map-open .touch-btn:not([data-act="map"]):not([data-act="mapCycle"]) {
    visibility: hidden; pointer-events: none;
}
#touch.map-open .touch-btn[data-act="map"],
#touch.map-open .touch-btn[data-act="mapCycle"],
#touch.map-open .touch-close {
    visibility: visible; pointer-events: auto;
}
/* Fullscreen panels (manual / news / pilot / guild / feedback) sit at z≈58–60 — elevate Close. */
#touch.overlay-open { z-index: 72; }
#touch.overlay-open .joystick,
#touch.overlay-open .touch-btns,
#touch.overlay-open .touch-ui { visibility: hidden; pointer-events: none; }
#touch.overlay-open .touch-close { visibility: visible; pointer-events: auto; }
#touch .joystick,
#touch .touch-btn { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
/* Overflow menu must pan vertically — do not inherit touch-action:none from combat chrome. */
#touch .touch-overflow {
    pointer-events: auto;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#touch .touch-overflow-item {
    pointer-events: auto;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.joystick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom));
    width: 124px; height: 124px; border-radius: 50%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.joy-knob { width: 56px; height: 56px; border-radius: 50%; background: rgba(92,198,255,0.35);
    border: 1px solid rgba(92,198,255,0.7); transition: transform 0.04s linear; }
.touch-btns { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.touch-row { display: flex; gap: 12px; }
.touch-btn { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
    background: rgba(20,28,44,0.6); color: #eaf2ff; font-size: 22px; font-weight: 600; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; position: relative; }
.touch-btn.fire { width: 88px; height: 88px; font-size: 16px; background: rgba(255,92,108,0.28); border-color: rgba(255,92,108,0.7); }
.touch-btn.pressed { background: rgba(92,198,255,0.4); transform: scale(0.94); }

/* Util strip: chat / pilot (wide) / overflow — above combat stack */
.touch-ui {
    position: absolute;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(328px, calc(env(safe-area-inset-bottom) + 304px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.touch-btn.ui {
    width: 52px; height: 52px; font-size: 20px;
    background: rgba(14, 22, 38, 0.78); border-color: rgba(255,255,255,0.28);
}
.touch-btn.ui.menu-open { border-color: rgba(92,198,255,0.75); background: rgba(92,198,255,0.22); }
.touch-btn.ui.has-unread { border-color: rgba(92,198,255,0.7); box-shadow: 0 0 0 1px rgba(92,198,255,0.35); }
.touch-unread {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
    background: #5cc6ff; color: #021022; border: 1px solid rgba(255,255,255,0.35);
}
.touch-unread.hidden { display: none; }
.touch-overflow {
    display: flex; flex-direction: column; gap: 6px; min-width: 132px;
    padding: 8px; border-radius: 12px;
    background: rgba(10, 16, 28, 0.94); border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    max-height: min(56vh, 340px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.touch-overflow.hidden { display: none; }
.touch-overflow-item {
    min-height: 44px; padding: 10px 14px; border-radius: 8px; text-align: left;
    font-size: 14px; font-weight: 700; letter-spacing: 0.03em;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #eaf2ff;
}
.touch-overflow-label {
    margin: 4px 2px 0; padding: 2px 6px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #8a9bb8);
    pointer-events: none;
}
.touch-overflow-label:first-child { margin-top: 0; }
.touch-overflow-item.pressed,
.touch-overflow-item:active { background: rgba(92,198,255,0.28); }
.touch-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px; width: auto; height: 44px; padding: 0 18px; border-radius: 22px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
    visibility: hidden; pointer-events: none;
    background: rgba(8, 14, 28, 0.96); border-color: rgba(92,198,255,0.55);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55); z-index: 2;
}
#touch.map-open .touch-close:active,
#touch.overlay-open .touch-close:active {
    transform: translateX(-50%) scale(0.97);
}
.touch-btn.touch-cycle { font-size: 18px; background: rgba(92,198,255,0.16); }
.touch-btn.touch-wpn {
    font-size: 11px; letter-spacing: 0.04em; font-weight: 700;
    background: rgba(255,186,77,0.18); border-color: rgba(255,186,77,0.55);
}
#mapCycleBtn { display: none; }
body.touch-active #mapCycleBtn { display: inline-flex; }

/* Wide / tablet default: dedicated Scan / Upload / Pilot; phone-only overflow rows hidden */
.touch-phone-only { display: none !important; }
.touch-wide-only { display: flex; }
.touch-row.touch-wide-only { display: flex; }

/* Tablet medium scale — still shows the fuller button set */
@media (min-width: 481px) and (max-width: 900px) {
    .joystick {
        left: max(16px, env(safe-area-inset-left));
        bottom: max(20px, env(safe-area-inset-bottom));
        width: 108px; height: 108px;
    }
    .joy-knob { width: 48px; height: 48px; }
    .touch-btns {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
        gap: 10px;
    }
    .touch-row { gap: 10px; }
    .touch-btn { width: 54px; height: 54px; font-size: 19px; }
    .touch-btn.fire { width: 76px; height: 76px; font-size: 14px; }
    .touch-ui {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(286px, calc(env(safe-area-inset-bottom) + 264px));
        gap: 8px;
    }
    .touch-btn.ui { width: 46px; height: 46px; font-size: 18px; }
    .touch-close { min-width: 108px; height: 40px; font-size: 14px; padding: 0 14px; }
}

/* Phone — compact HUD + thumb-sized combat (high-DPR phones need readable taps, not 28px dots) */
@media (max-width: 480px) {
    .touch-phone-only { display: flex !important; }
    .touch-wide-only { display: none !important; }

    .joystick {
        left: max(12px, env(safe-area-inset-left));
        bottom: max(14px, env(safe-area-inset-bottom));
        /* Must stay thumb-sized — 32px made the stick effectively unusable. */
        width: 104px; height: 104px;
    }
    .joy-knob { width: 46px; height: 46px; }
    .touch-btns {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        gap: 8px;
    }
    .touch-row { gap: 8px; }
    .touch-btn { width: 44px; height: 44px; font-size: 15px; }
    .touch-btn.fire {
        width: 56px; height: 56px; font-size: 12px; letter-spacing: 0.04em;
    }
    .touch-btn.touch-cycle { font-size: 15px; }
    .touch-btn.touch-wpn { font-size: 10px; }

    /* Horizontal strip (Chat + ⋯) above the combat cluster */
    .touch-ui {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(148px, calc(env(safe-area-inset-bottom) + 136px));
        flex-direction: row; align-items: center; gap: 8px;
    }
    .touch-btn.ui { width: 40px; height: 40px; font-size: 16px; }
    .touch-unread {
        min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; line-height: 16px;
        top: -3px; right: -3px;
    }
    .touch-overflow {
        position: absolute; right: 0; bottom: calc(100% + 6px);
        min-width: 132px; padding: 8px; gap: 6px; border-radius: 12px;
        max-height: min(52vh, 320px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .touch-overflow-item {
        min-height: 44px; padding: 10px 14px; font-size: 14px; border-radius: 8px;
    }
    .touch-overflow-label { font-size: 10px; }
    /* Elevated Close — findable, thumb-friendly */
    .touch-close {
        top: max(10px, env(safe-area-inset-top));
        min-width: 112px; height: 40px; padding: 0 16px; font-size: 14px; border-radius: 20px;
    }

    /* HUD: readable compact (was ~¼ desktop / 5–7px — illegible on S25-class DPR) */
    #hud {
        max-width: none;
        width: max-content;
        gap: 4px;
        left: max(6px, env(safe-area-inset-left));
        top: max(6px, env(safe-area-inset-top));
    }
    #hud .hud-top-row { gap: 4px; }
    #hud .hud-stack { width: 108px; max-width: 108px; }
    #hud .den-panel { width: 88px; max-width: 88px; padding: 4px 5px; }
    #hud .den-progress-label { font-size: 8px; margin-bottom: 2px; }
    #hud .den-progress-bar { height: 3px; }
    #hud .den-progress-row { padding: 3px 4px; border-radius: 3px; }
    #hud .panel { padding: 6px 7px; border-radius: 6px; font-size: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
    #hud .panel-title { font-size: 8px; margin-bottom: 2px; letter-spacing: 0.05em; }
    #hud .row { gap: 4px; margin: 1px 0; }
    #hud .bar { gap: 4px; margin: 2px 0; font-size: 9px; }
    #hud .bar > span:first-child, #hud .bar.goal-bar > span { width: 22px; }
    #hud .bar .bar-val { min-width: 2.4em; font-size: 8.5px; }
    #hud .track { height: 4px; border-radius: 2px; }
    #hud .frontier-readout { margin-top: 1px; padding-top: 3px; font-size: 8.5px; line-height: 1.25; }
    #hud .frontier-readout .fr-sub { font-size: 8px; margin-top: 0; }
    #hud .frontier-readout .fr-sep { margin: 0 3px; }
    #hud .sector .danger { font-size: 8.5px; }
    #hud #hudSector { font-size: 9px; }
    #hud .scan-near { font-size: 8px; line-height: 1.25; }
    #hud .panel.goal .goal-name { font-size: 10px; margin-bottom: 1px; }
    #hud .panel.goal .goal-detail { font-size: 8.5px; margin-top: 1px; line-height: 1.25; }
    #hud .panel.contracts-hud { padding: 5px 6px; }
    #hud .panel.contracts-hud .panel-title { margin-bottom: 3px; }
    #hud .chud-title { font-size: 9.5px; margin-bottom: 1px; }
    #hud .chud-status { font-size: 8.5px; }
    #hud .chud-bar { height: 2px; margin-bottom: 2px; }
    #hud .chud-row { margin-bottom: 4px; }

    .hazard-banner { padding: 5px 6px; border-radius: 5px; }
    .hazard-banner .hazard-title { font-size: 9px; letter-spacing: 0.03em; }
    .hazard-banner .hazard-detail { margin-top: 1px; font-size: 8.5px; line-height: 1.25; }

    #notices {
        top: max(72px, calc(12px + env(safe-area-inset-top, 0px) + 44px));
        right: 6px;
        gap: 3px;
        max-width: min(240px, 52vw);
    }
    #notices.overlay-safe {
        top: max(80px, calc(20px + env(safe-area-inset-top, 0px) + 44px));
        max-width: min(220px, 48vw);
    }
    .notice { padding: 5px 8px; border-radius: 5px; font-size: 11px; max-width: 100%; }
    .notice.big { font-size: 12px; padding: 6px 10px; }
    .notice.action { gap: 4px; }
    .notice.action button { font-size: 11px; padding: 4px 8px; min-height: 32px; }
    .notice.sticky { gap: 6px; padding-right: 6px; }
    .notice.sticky .notice-dismiss { font-size: 16px; min-width: 32px; min-height: 32px; }

    /* Bests / Next upgrade: collapsed by default → one compact toggle line */
    .hud-extras { gap: 3px; }
    .hud-extras-summary {
        display: flex; padding: 5px 6px; border-radius: 4px; font-size: 9px;
        min-height: 32px; box-sizing: border-box;
    }
    .hud-extras-title { font-size: 7px; }
    .hud-extras-peek { font-size: 8px; }
    .hud-extras-chevron { font-size: 8px; }
    .hud-extras-body { display: none; gap: 3px; }
    .hud-extras-toggle:checked ~ .hud-extras-body { display: flex; }
    .hud-extras-toggle:checked ~ .hud-extras-summary .hud-extras-chevron { transform: rotate(180deg); }
    .hud-extras-toggle:checked ~ .hud-extras-summary { border-color: rgba(92,198,255,0.4); }

    /* Map chrome denser (elevated Close stays findable) */
    #mapChrome {
        gap: 4px; width: min(280px, calc(100vw - 16px));
        top: max(8px, env(safe-area-inset-top));
    }
    body.touch-active #mapChrome {
        top: max(52px, calc(env(safe-area-inset-top) + 44px));
    }
    #mapChromeActions { gap: 4px; }
    #mapCycleBtn { padding: 5px 8px; border-radius: 6px; font-size: 11px; min-height: 32px; }
    #mapLegendBtn { padding: 5px 8px; border-radius: 6px; font-size: 11px; min-height: 32px; }
    #mapCloseBtn { padding: 5px 9px; border-radius: 6px; font-size: 11px; min-height: 32px; }
    #mapSearchInput { padding: 6px 8px; border-radius: 6px; font-size: 16px; /* iOS zoom guard */ }
    #mapSearchResults { max-height: 140px; border-radius: 6px; }
    #mapSearchResults .msr { padding: 6px 8px; font-size: 12px; }
    #mapSearchResults .msr .msr-meta { font-size: 10px; }
    #mapSearchResults .msr-actions button { font-size: 11px; padding: 4px 8px; min-height: 32px; }
    #mapChromeHint { font-size: 9px; padding: 2px 5px; }
    #mapLegend {
        left: max(8px, env(safe-area-inset-left));
        bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px));
        width: min(220px, calc(100vw - 16px));
        border-radius: 8px;
    }
    .map-legend-head { padding: 7px 9px; font-size: 10px; min-height: 32px; }
    .map-legend-body { padding: 0 9px 9px; max-height: min(40vh, 260px); }
    .map-legend-swatch { flex-basis: 12px; width: 12px; height: 12px; border-radius: 2px; }
    .map-legend-label { font-size: 11px; }
    .map-legend-note { font-size: 10px; margin-top: 5px; padding-top: 5px; }

    /* Station chrome denser — keep Bay/Market rows thumb-friendly */
    .station-window header { padding: 8px 10px; gap: 6px; }
    .station-window h2 { font-size: 15px; }
    .station-actions button { min-height: 36px; min-width: 56px; padding: 6px 10px; font-size: 12px; }
    .station-meters { gap: 8px; }
    .station-credits { min-width: 3.5rem; padding: 0; }
    .station-credits .label { font-size: 9px; }
    .station-credits b { font-size: 13px; }
    .records-status { gap: 5px 8px; font-size: 10px; }
    .records-status .chip { min-width: 56px; padding: 5px 7px; }
    .records-status .chip b { font-size: 11px; }
    .tabs { padding: 4px 8px 0; gap: 2px; }
    .tabs button {
        min-height: 34px; padding: 5px 8px; font-size: 11px; border-radius: 5px 5px 0 0;
    }
    .tab-badge { min-width: 14px; height: 14px; margin-left: 3px; font-size: 9px; }
    .tabpane { padding: 8px 10px; }
    .shop-item {
        padding: 8px 9px; gap: 8px; border-radius: 7px;
        flex-wrap: wrap; align-items: flex-start;
    }
    .shop-item .info { flex: 1 1 140px; }
    .shop-item .name { font-size: 13px; }
    .shop-item .desc { font-size: 11px; line-height: 1.35; }
    .shop-item .desc-stats { font-size: 10.5px; }
    .shop-item .price { font-size: 12px; }
    .shop-item-trail {
        flex: 1 1 100%; min-width: 0; width: 100%;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        justify-content: flex-end; gap: 6px;
    }
    .shop-item-trail > button,
    .shop-item-trail .loot-actions { width: auto; }
    .shop-cat-blurb, .loot-bay-blurb { font-size: 11px; }
    .shop-preview { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 6px; }
    .shop-preview-lightbox-canvas { width: 220px; height: 220px; border-radius: 10px; }
    .arming-ship-well { min-height: 0; padding: 12px 8px 10px; }
    .arming-ship-thumb { width: 88px; height: 88px; min-width: 88px; min-height: 88px; }
    .arming-seat-pad { width: var(--ship-drop-w, 120px); min-height: var(--ship-drop-min-h, 80px); padding: 5px; }
    .arming-seat-pad .arming-thumb { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
    .arming-rack { min-width: var(--ship-drop-w, 120px); flex: 0 1 var(--ship-drop-w, 120px); }
    .arming-rack .arming-thumb { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    body.touch-active .shop-item button {
        min-height: 40px; padding: 8px 12px; font-size: 12px;
    }
    body.touch-active .shop-item button.shop-preview {
        min-height: 44px; min-width: 44px; width: 44px; height: 44px; padding: 0;
    }
    body.touch-active .tabs button {
        min-height: 36px; padding: 6px 9px; font-size: 11px;
    }
    body.touch-active .shop-cat-tab {
        min-height: 38px; padding: 7px 9px;
    }

    /* Minimap — clear of stick + combat; sharp on high-DPR */
    #minimapShell.minimap-shell {
        width: 128px; height: 128px;
        right: max(8px, env(safe-area-inset-right));
        bottom: max(168px, calc(env(safe-area-inset-bottom) + 156px));
    }
    body.touch-active #minimapShell.minimap-shell {
        bottom: max(172px, calc(env(safe-area-inset-bottom) + 160px));
    }
    #miniCtrls button { width: 26px; height: 26px; font-size: 13px; }

    /* Entry / Manual / Goals / Admin — denser so overlays fit the viewport */
    .entry-window { padding: 16px 14px 14px; }
    .entry-window h1 { font-size: 26px; letter-spacing: 3px; }
    .entry-window .tagline { font-size: 12px; }
    .manual-window, .goals-window, .admin-window, .admin-manual-window {
        width: min(100vw - 8px, 100%);
        height: min(92dvh, 100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);
        max-height: min(92dvh, 100dvh - 8px);
        border-radius: 10px;
    }
    .manual-window header, .goals-window header, .admin-window header {
        padding: 8px 10px; gap: 6px;
    }
    .manual-window h2, .goals-window h2, .admin-window h2 { font-size: 15px; }
    .manual-content { padding: 12px 14px; font-size: 13px; }
    .manual-nav button { padding: 6px 8px; font-size: 11px; }
    .goals-lead { padding: 8px 12px; font-size: 11px; }
    .goals-main { padding: 8px 10px 14px; gap: 10px; }
    .goals-focus-card { padding: 10px 12px; }
    .goals-focus-card h3 { font-size: 14px; }
    .admin-window .tabpane { padding: 10px 12px; }
    .admin-window .tabs button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
    .admin-ops-block { padding: 8px 10px; margin-bottom: 8px; }
    .admin-player { padding: 8px 9px; margin-bottom: 8px; }
    .ap-actions button { font-size: 11px; padding: 5px 8px; min-height: 32px; }
    .admin-players-list { max-height: 52vh; }
    .admin-audit-list { max-height: 58vh; font-size: 11px; }
}

/* High-DPR phones (S25+ class): slight extra room for combat + HUD when touch is active */
@media (max-width: 480px) and (min-resolution: 2.5dppx) {
    body.touch-active .joystick { width: 112px; height: 112px; }
    body.touch-active .joy-knob { width: 50px; height: 50px; }
    body.touch-active .touch-btn { width: 48px; height: 48px; font-size: 16px; }
    body.touch-active .touch-btn.fire { width: 60px; height: 60px; font-size: 13px; }
    body.touch-active .touch-ui {
        bottom: max(164px, calc(env(safe-area-inset-bottom) + 152px));
    }
    body.touch-active #hud .hud-stack { width: 118px; max-width: 118px; }
    body.touch-active #minimapShell.minimap-shell {
        width: 140px; height: 140px;
        bottom: max(188px, calc(env(safe-area-inset-bottom) + 176px));
    }
}
@media (max-width: 480px) {
    html.touch-hires body.touch-active .joystick { width: 112px; height: 112px; }
    html.touch-hires body.touch-active .joy-knob { width: 50px; height: 50px; }
    html.touch-hires body.touch-active .touch-btn { width: 48px; height: 48px; font-size: 16px; }
    html.touch-hires body.touch-active .touch-btn.fire { width: 60px; height: 60px; font-size: 13px; }
    html.touch-hires body.touch-active .touch-ui {
        bottom: max(164px, calc(env(safe-area-inset-bottom) + 152px));
    }
    html.touch-hires body.touch-active #hud .hud-stack { width: 118px; max-width: 118px; }
    html.touch-hires body.touch-active #minimapShell.minimap-shell {
        width: 140px; height: 140px;
        bottom: max(188px, calc(env(safe-area-inset-bottom) + 176px));
    }
}

/* Landscape phones — use width; keep combat thumb-sized (portrait width rules miss wide CSS px) */
@media (orientation: landscape) and (pointer: coarse) {
    body.touch-active #hud {
        max-width: none;
        width: max-content;
        gap: 4px;
    }
    body.touch-active #hud .hud-stack { width: 120px; max-width: 120px; }
    body.touch-active #hud .den-panel { width: 96px; max-width: 96px; }
    body.touch-active #hud .panel { padding: 5px 6px; font-size: 10px; }
    body.touch-active #hud .panel-title { font-size: 8px; }
    body.touch-active #hud .bar { font-size: 9px; }
    body.touch-active #hud .bar .bar-val { font-size: 8.5px; }
    body.touch-active #minimapShell.minimap-shell {
        width: 112px; height: 112px;
        bottom: max(10px, env(safe-area-inset-bottom));
        right: max(8px, env(safe-area-inset-right));
    }
    body.touch-active .joystick {
        width: 88px; height: 88px;
        left: max(12px, env(safe-area-inset-left));
        bottom: max(10px, env(safe-area-inset-bottom));
    }
    body.touch-active .joy-knob { width: 40px; height: 40px; }
    body.touch-active .touch-btns {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        gap: 7px;
    }
    body.touch-active .touch-row { gap: 7px; }
    body.touch-active .touch-btn { width: 42px; height: 42px; font-size: 14px; }
    body.touch-active .touch-btn.fire { width: 52px; height: 52px; font-size: 11px; }
    body.touch-active .touch-ui {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(132px, calc(env(safe-area-inset-bottom) + 120px));
        flex-direction: row; gap: 7px;
    }
    body.touch-active .touch-btn.ui { width: 38px; height: 38px; font-size: 15px; }
    body.touch-active #guildChat {
        left: max(108px, calc(env(safe-area-inset-left) + 100px));
        right: max(160px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto;
        max-height: min(120px, 42vh);
    }
    body.touch-active #guildChat.collapsed {
        left: max(108px, calc(env(safe-area-inset-left) + 100px));
        right: auto;
        width: min(120px, 28vw);
        bottom: max(10px, env(safe-area-inset-bottom));
    }
    body.touch-active #prompt {
        bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
        font-size: 11px;
    }
    body.touch-active .manual-window,
    body.touch-active .goals-window,
    body.touch-active .admin-window {
        height: min(96dvh, 100dvh - 4px);
        max-height: min(96dvh, 100dvh - 4px);
    }
}

/* Short landscape fallback (browser chrome / foldables) — same spirit, slightly tighter */
@media (max-height: 420px) and (pointer: coarse) {
    body.touch-active .joystick { width: 76px; height: 76px; }
    body.touch-active .joy-knob { width: 34px; height: 34px; }
    body.touch-active .touch-btn { width: 36px; height: 36px; font-size: 12px; }
    body.touch-active .touch-btn.fire { width: 44px; height: 44px; font-size: 10px; }
    body.touch-active .touch-ui {
        bottom: max(108px, calc(env(safe-area-inset-bottom) + 96px));
    }
    body.touch-active #hud .hud-stack { width: 96px; max-width: 96px; }
    body.touch-active #minimapShell.minimap-shell { width: 96px; height: 96px; }
}