* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', monospace;
    background: #0a0e17;
    color: #c8d6e5;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 70% 90%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.2), transparent);
}

.container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

h1 {
    text-align: center;
    font-size: 2rem;
    color: #00d4ff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.subtitle {
    text-align: center;
    color: #576574;
    font-size: 0.85rem;
    margin-bottom: 32px;
    letter-spacing: 1px;
}

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

.tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid #1e2a3a;
    color: #576574;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s;
}

.tab.active {
    background: #1e2a3a;
    color: #00d4ff;
    border-color: #00d4ff;
}

.tab:hover {
    color: #00d4ff;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #576574;
}

input {
    padding: 12px;
    background: #111827;
    border: 1px solid #1e2a3a;
    color: #c8d6e5;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

input:focus {
    border-color: #00d4ff;
}

.btn {
    padding: 14px;
    background: #00d4ff;
    border: none;
    color: #0a0e17;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
}

.btn:hover {
    background: #00b8d9;
}

.error {
    text-align: center;
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 16px;
}

.success {
    text-align: center;
    color: #1dd1a1;
    font-size: 0.85rem;
    margin-top: 16px;
}

.hidden {
    display: none !important;
}

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: #111827;
    border-bottom: 1px solid #1e2a3a;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

.nav-title {
    color: #00d4ff;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-right: 32px;
}

.nav-links {
    display: flex;
    gap: 4px;
    flex: 1;
}

.nav-btn {
    background: transparent;
    border: 1px solid #1e2a3a;
    color: #576574;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 6px 16px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.nav-btn:hover {
    color: #00d4ff;
    border-color: #00d4ff;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-label {
    color: #576574;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-ship-name {
    color: #1dd1a1;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-credits {
    color: #1dd1a1;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.nav-sep {
    color: #1e2a3a;
    font-size: 0.8rem;
}

.credits-float {
    position: fixed;
    pointer-events: none;
    font-size: 0.8rem;
    font-weight: bold;
    transform: translateX(-50%);
    animation: credits-float-up 1.4s ease-out forwards;
    z-index: 9999;
}

@keyframes credits-float-up {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

#nav-pilot-name {
    color: #576574;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-logout {
    border-color: #333;
    color: #576574;
}

.nav-logout:hover {
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
}

/* --- Game content --- */
#game-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.game-layout {
    display: flex;
    margin-top: 100px;
    height: calc(100vh - 100px);
    overflow: hidden;
}

.game-content {
    flex: 1;
    padding: 40px 20px 20px;
    margin-right: 240px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* --- Action view background --- */
.action-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.15);
    transition: background-image 0.6s ease, transform-origin 1.2s ease-out;
    pointer-events: none;
    z-index: 0;
    will-change: transform-origin;
}

.action-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(10, 14, 23, 0.15) 0%,
        rgba(10, 14, 23, 0.65) 70%,
        rgba(10, 14, 23, 0.9) 100%
    );
    pointer-events: none;
}

.action-bg.no-bg {
    background-image: none !important;
}

/* Ensure content stacks above bg — only bump z-index, don't override position */
.game-content > *:not(.action-bg) {
    z-index: 1;
}

/* --- Location object label (e.g. "To Abacus" above stargate) --- */
.location-object-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #a855f7;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
}

.location-object-label.warp-out { animation: warpContentOut 0.4s ease-in forwards; }
.location-object-label.warp-in  { animation: warpContentIn  0.5s ease-out forwards; }

/* --- Location object wrapper — flex-centres the image ignoring parent padding --- */
.location-object-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.location-object-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 50%;
}

.location-object {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.3));
    animation: objectFloat 6s ease-in-out infinite;
    will-change: transform;
}

/* Enemy ship in space — frigate-sized, matches .ship-float dimensions */
.location-object.enemy-ship-obj {
    width: 80px;
    height: 50px;
    max-height: 50px;
    filter: drop-shadow(0 0 18px rgba(255, 107, 107, 0.5));
}

@keyframes objectFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

.location-object-wrap.warp-out {
    animation: warpContentOut 0.4s ease-in forwards;
}

.location-object-wrap.warp-in {
    animation: warpContentIn 0.5s ease-out forwards;
}

/* --- Warp animation --- */
@keyframes warpStreaks {
    0%   { opacity: 0; background-size: 100% 100%; }
    10%  { opacity: 1; }
    80%  { opacity: 1; background-size: 100% 2000%; }
    100% { opacity: 0; background-size: 100% 2000%; }
}

@keyframes warpShipOut {
    0%   { transform: translateY(var(--ship-ty, 0px)) scale(1) rotate(var(--ship-rot, 0deg)); opacity: 0.85; }
    40%  { transform: translateY(var(--ship-ty, 0px)) scale(0.3) rotate(var(--ship-rot, 0deg)); opacity: 1; }
    60%  { transform: translateY(var(--ship-ty, 0px)) scale(0.05) rotate(var(--ship-rot, 0deg)); opacity: 0; }
    100% { transform: translateY(var(--ship-ty, 0px)) scale(0.05) rotate(var(--ship-rot, 0deg)); opacity: 0; }
}

@keyframes warpShipIn {
    0%   { transform: translateY(var(--ship-ty, 0px)) scale(0.05) rotate(var(--ship-rot, 0deg)); opacity: 0; }
    40%  { transform: translateY(var(--ship-ty, 0px)) scale(0.3) rotate(var(--ship-rot, 0deg)); opacity: 1; }
    100% { transform: translateY(var(--ship-ty, 0px)) scale(1) rotate(var(--ship-rot, 0deg)); opacity: 0.85; }
}

@keyframes warpContentOut {
    0%   { opacity: 1; filter: blur(0px); }
    100% { opacity: 0; filter: blur(6px); }
}

@keyframes warpContentIn {
    0%   { opacity: 0; filter: blur(6px); }
    100% { opacity: 1; filter: blur(0px); }
}

/* --- Warp spool progress bar --- */
/* ─── Ship HUD window ───────────────────────────────────────────────────── */
.ship-hud {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(7, 11, 20, 0.90);
    border: 1px solid #1e2a3a;
    backdrop-filter: blur(4px);
    min-width: 380px;
    max-width: 560px;
    width: 56%;
    pointer-events: all;
    transition: box-shadow 0.15s ease;
}

/* SVG warp border — absolute overlay on the HUD */
/* Warp spool bar — sits above the HUD window */
.hud-warp-wrap {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    pointer-events: none;
}
.hud-warp-wrap.hidden { display: none; }

.hud-warp-countdown {
    text-align: center;
    color: #00d4ff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
    white-space: nowrap;
}

.hud-warp-bar-outer {
    height: 4px;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.hud-warp-bar-fill {
    height: 100%;
    width: 0%;
    background: #00d4ff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.9);
    transition: width 0.05s linear;
}

/* Three tank bars side by side */
.hud-tanks {
    flex: 1;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.hud-tank {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hud-tank-label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

/* Bar: outer track, fill behind, text on top */
.hud-bar-outer {
    position: relative;
    height: 20px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.hud-bar-fill {
    position: absolute;
    inset: 0;
    right: auto;     /* width is set by JS */
    width: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.hud-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Per-stat colours */
.hud-shield    { background: linear-gradient(90deg, #1d4ed8, #3b82f6); box-shadow: 0 0 6px rgba(59,130,246,0.5); }
.hud-shield-col { color: #93c5fd; }

.hud-armor     { background: linear-gradient(90deg, #b45309, #f59e0b); box-shadow: 0 0 6px rgba(245,158,11,0.5); }
.hud-armor-col  { color: #fcd34d; }

.hud-structure { background: linear-gradient(90deg, #991b1b, #ef4444); box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.hud-structure-col { color: #fca5a5; }


.warp-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        transparent 48%,
        rgba(0, 212, 255, 0.15) 49%,
        rgba(0, 212, 255, 0.15) 51%,
        transparent 52%,
        transparent 100%
    );
    background-size: 100% 100%;
    z-index: 50;
}

.warp-overlay.warping {
    animation: warpStreaks 1.2s ease-in forwards;
}

.ship-float.warp-out {
    animation: warpShipOut 0.5s ease-in forwards !important;
}

.ship-float.warp-in {
    animation: warpShipIn 0.6s ease-out forwards !important;
}

.location-display.warp-out {
    animation: warpContentOut 0.4s ease-in forwards;
}

.location-display.warp-in {
    animation: warpContentIn 0.5s ease-out forwards;
}

.action-bg.warp-out {
    animation: warpContentOut 0.4s ease-in forwards;
}

.action-bg.warp-in {
    animation: warpContentIn 0.5s ease-out forwards;
}

/* --- Floating ship --- */
@keyframes shipBob {
    0%   { transform: translateY(0px) rotate(-1deg); }
    50%  { transform: translateY(-18px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(-1deg); }
}

.ship-float {
    position: absolute;
    width: 80px;
    height: 50px;
    object-fit: contain;
    animation: shipBob 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.85;
    filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.35));
    transition: left 0.9s linear, top 0.9s linear, scale 0.2s ease;
}

.ship-float.flipped {
    scale: -1 1;
}

/* Larger ship when docked inside a station */
.ship-float.docked {
    width: 220px;
    height: 140px;
    opacity: 1;
    animation: none;
    filter: drop-shadow(0 0 28px rgba(0, 212, 255, 0.5));
}

/* Enhanced glow on ship while warp spool is charging — driven by JS filter */
.ship-float.spooling {
    animation: shipBob 4s ease-in-out infinite;
    /* filter is set inline by JS to match spool progress */
}

/* --- Nearby ships --- */
#nearby-ships-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nearby-ship-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    animation: shipBob 5.5s ease-in-out infinite;
    transition: left 0.9s linear, top 0.9s linear, scale 0.2s ease;
}

.nearby-ship-wrap.flipped .nearby-ship-img {
    scale: -1 1;
}

.nearby-ship-img {
    width: 80px;
    height: 50px;
    object-fit: contain;
    opacity: 0.7;
    filter: drop-shadow(0 0 14px rgba(255, 200, 0, 0.3));
    transition: scale 0.2s ease;
}

.nearby-ship-label {
    margin-top: 6px;
    font-size: 0.65rem;
    color: #ffd32a;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 211, 42, 0.6);
    line-height: 1.3;
}

/* --- Sidebar --- */
.sidebar {
    width: 220px;
    min-width: 220px;
    background: #0d1117;
    border-right: 1px solid #151d27;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Overview panel (right side) --- */
.overview-panel {
    position: fixed;
    top: 100px;
    right: 0;
    width: 240px;
    bottom: 0;
    background: rgba(13, 17, 23, 0.92);
    border-left: 1px solid #151d27;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 98;
}

.overview-header {
    padding: 10px 14px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #576574;
}

.overview-action-bar {
    min-height: 44px;
    padding: 6px 8px;
    border-top: 1px solid #1e2a3a;
    border-bottom: 1px solid #1e2a3a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.2);
}

.overview-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    color: #576574;
    font-family: inherit;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 44px;
}

.overview-action-btn .btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.overview-action-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: #00d4ff;
    color: #00d4ff;
}

.overview-action-btn.btn-mine {
    flex-direction: row;
    gap: 5px;
    font-size: 0.6rem;
    min-width: unset;
    flex: 1;
    justify-content: center;
}

.overview-action-btn.btn-mine .btn-icon {
    font-size: 0.8rem;
}

.overview-action-btn.btn-mine:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: #34d399;
    color: #34d399;
}

.overview-action-btn.btn-mine-active {
    background: rgba(52, 211, 153, 0.15);
    border-color: #34d399;
    color: #34d399;
}

.overview-action-btn.btn-jump:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #a855f7;
}

.overview-item.selected {
    background: rgba(0, 212, 255, 0.08);
    outline: 1px solid rgba(0, 212, 255, 0.2);
}

.overview-section {
    padding: 0;
}

.overview-section-title {
    padding: 10px 14px 4px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3d5068;
}

.overview-list {
    display: flex;
    flex-direction: column;
}

.overview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: default;
    transition: background 0.15s;
    user-select: none;
}

.overview-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.overview-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.overview-item-icon.entity-stargate {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.overview-item-icon.entity-station {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
}

.overview-item-icon.entity-field {
    background: rgba(249, 202, 36, 0.15);
    color: #f9ca24;
}

.overview-item-icon.entity-sun {
    background: rgba(255, 159, 67, 0.18);
    color: #ff9f43;
}

.overview-item-icon.entity-player {
    background: rgba(29, 209, 161, 0.12);
    color: #1dd1a1;
}

.overview-item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.overview-item-name {
    font-size: 0.75rem;
    color: #c8d6e5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-item-type {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3d5068;
}

/* --- Context menu (right-click) --- */
.context-menu {
    position: fixed;
    z-index: 500;
    min-width: 140px;
    background: #111827;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.context-menu-item {
    padding: 7px 16px;
    font-size: 0.75rem;
    color: #c8d6e5;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.context-menu-item:hover {
    background: rgba(0, 212, 255, 0.12);
    color: #00d4ff;
}

/* --- Location bar --- */
.location-bar {
    position: fixed;
    top: 48px;
    left: 220px;
    right: 0;
    height: 52px;
    background: linear-gradient(90deg, #0d1117 0%, #111827 60%, #0d1117 100%);
    border-bottom: 1px solid #1e2a3a;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 99;
    padding: 0 20px;
}

.location-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.location-bar-system-icon {
    font-size: 1.1rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px currentColor);
    flex-shrink: 0;
}

.location-bar-system-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.location-bar-system-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
}

.location-bar-sec-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    line-height: 1;
}

.sec-high   .location-bar-system-name,
.sec-high   .location-bar-sec-label,
.sec-high                             { color: #00d4ff; }

.sec-low    .location-bar-system-name,
.sec-low    .location-bar-sec-label,
.sec-low                              { color: #ffd32a; }

.sec-no-sec .location-bar-system-name,
.sec-no-sec .location-bar-sec-label,
.sec-no-sec                           { color: #ff6b6b; }

.location-bar-divider {
    width: 1px;
    height: 28px;
    background: #1e2a3a;
    margin: 0 20px;
    flex-shrink: 0;
}

.location-bar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.location-bar-subloc-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.location-bar-subloc-name {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Sub-location colours */
.location-bar-center.docked     .location-bar-subloc-name { color: #1dd1a1; }
.location-bar-center.docked     .location-bar-subloc-icon { color: #1dd1a1; }
.location-bar-center.in-space   .location-bar-subloc-name { color: #c8d6e5; }
.location-bar-center.in-space   .location-bar-subloc-icon { color: #576574; }
.location-bar-center.at-stargate .location-bar-subloc-name { color: #a855f7; }
.location-bar-center.at-stargate .location-bar-subloc-icon { color: #a855f7; }
.location-bar-center.at-field   .location-bar-subloc-name { color: #f9ca24; }
.location-bar-center.at-field   .location-bar-subloc-icon { color: #f9ca24; }
.location-bar-center.at-sun     .location-bar-subloc-name { color: #ff9f43; }
.location-bar-center.at-sun     .location-bar-subloc-icon { color: #ff9f43; }

.location-bar-right {
    margin-left: auto;
    flex-shrink: 0;
}

.location-bar-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.location-bar-status-pill.docked {
    background: rgba(29, 209, 161, 0.15);
    color: #1dd1a1;
    border: 1px solid rgba(29, 209, 161, 0.3);
}

.location-bar-status-pill.in-space {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.25);
}


/* --- Sidebar dropdowns --- */
.sidebar-section {
    padding: 4px 12px;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
    color: #7f8c9a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    user-select: none;
}

.sidebar-section-header:hover {
    background: rgba(255,255,255,0.06);
    color: #c8d6e5;
}

.sidebar-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sidebar-section-icon.icon-sun      { background: rgba(255,159,67,0.18);  color: #ff9f43; }
.sidebar-section-icon.icon-station  { background: rgba(0,212,255,0.15);   color: #00d4ff; }
.sidebar-section-icon.icon-field    { background: rgba(249,202,36,0.15);  color: #f9ca24; }
.sidebar-section-icon.icon-stargate { background: rgba(168,85,247,0.15);  color: #a855f7; }

.sidebar-section-label {
    flex: 1;
}

.sidebar-section-arrow {
    font-size: 0.55rem;
    transition: transform 0.2s;
    color: #3d5068;
}

.sidebar-section.open .sidebar-section-arrow {
    transform: rotate(90deg);
}

.sidebar-section-items {
    display: none;
    padding: 2px 0 6px 0;
}

.sidebar-section.open .sidebar-section-items {
    display: block;
}

.sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 12px 7px 50px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #576574;
    font-family: inherit;
    font-size: 0.75rem;
    text-align: left;
    cursor: default;
    transition: background 0.15s, color 0.15s;
}

.sidebar-item:hover {
    background: rgba(255,255,255,0.05);
    color: #c8d6e5;
}

.sidebar-item.active {
    background: rgba(0, 212, 255, 0.12);
    color: #00d4ff;
    font-weight: 600;
}

.sidebar-warp-btn {
    display: none;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid rgba(0,212,255,0.4);
    border-radius: 4px;
    color: #00d4ff;
    font-family: inherit;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sidebar-item:hover .sidebar-warp-btn {
    display: inline-block;
}

.sidebar-item.active .sidebar-warp-btn {
    display: none;
}

.sidebar-warp-btn:hover {
    background: rgba(0,212,255,0.15);
    border-color: #00d4ff;
}

/* Spooling state — button stays visible and shows countdown */
.sidebar-warp-btn.spooling {
    display: inline-block;
    border-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245,158,11,0.12);
    animation: spoolPulse 0.8s ease-in-out infinite;
    min-width: 38px;
    text-align: center;
}

@keyframes spoolPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* --- Location display --- */
.location-display {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.location-display h1 {
    font-size: 2.4rem;
    margin-bottom: 4px;
}

.station-name {
    color: #576574;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.station-name.in-space {
    color: #ff6b6b;
}

.station-name.at-stargate {
    color: #a855f7;
}

.station-name.at-field {
    color: #f9ca24;
}

.station-name.at-sun {
    color: #ff9f43;
}

.location-status {
    color: #576574;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.location-status.warp-error {
    color: #ff6b6b;
}

.location-btn {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.location-btn.undock {
    background: transparent;
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
}

.location-btn.undock:hover {
    background: #ff6b6b;
    color: #0a0e17;
}

.location-btn.dock {
    background: transparent;
    border: 1px solid #1dd1a1;
    color: #1dd1a1;
}

.location-btn.dock:hover {
    background: #1dd1a1;
    color: #0a0e17;
}

.location-btn.jump {
    background: transparent;
    border: 1px solid #a855f7;
    color: #a855f7;
}

.location-btn.jump:hover {
    background: #a855f7;
    color: #0a0e17;
}

/* --- Station Services --- */
.station-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 240px;
    margin: 16px auto 0;
}

.station-services .station-service-btn:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
}

.station-services:has(#mining-panel) {
    display: block;
}

/* ── Combat Site panel ── */
.combat-site-panel {
    padding: 20px;
    text-align: center;
}

.combat-site-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e84040;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 12px rgba(232, 64, 64, 0.5);
    margin-bottom: 10px;
}

.combat-site-status {
    font-size: 0.8rem;
    color: #576574;
    font-style: italic;
}

.station-service-btn {
    padding: 10px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    color: #576574;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.station-service-btn:hover {
    border-color: #00d4ff;
    color: #00d4ff;
}

/* --- Mining Panel --- */
#mining-panel {
    width: 100%;
    max-width: 280px;
    margin: 16px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#mining-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mining-ore-btn {
    background: transparent;
    border: 1px solid #f9ca24;
    color: #f9ca24;
    padding: 10px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.mining-ore-btn:hover {
    background: #f9ca24;
    color: #0a0e17;
}

#mining-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#mining-status-text {
    color: #f9ca24;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#mining-progress-bar {
    width: 100%;
    height: 6px;
    background: #1e2a3a;
    border-radius: 3px;
    overflow: hidden;
}

#mining-progress-fill {
    height: 100%;
    background: #f9ca24;
    width: 0%;
    transition: width 0.9s linear;
}

#mining-countdown {
    color: #576574;
    font-size: 0.75rem;
}

.mining-cancel-btn {
    background: transparent;
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.mining-cancel-btn:hover {
    background: #ff6b6b;
    color: #0a0e17;
}

.mining-error {
    color: #ff6b6b;
    font-size: 0.75rem;
    text-align: center;
    letter-spacing: 1px;
}

/* --- Modal --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    background: #111827;
    border: 1px solid #1e2a3a;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #1e2a3a;
}

.modal-header h2 {
    color: #00d4ff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.modal-close {
    background: none;
    border: none;
    color: #576574;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #ff6b6b;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

/* --- Skill cards --- */
.skill-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    margin-top: 8px;
}

.skill-category-label {
    color: #00d4ff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.skill-category-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #1e2a3a);
}

.skill-category-header .skill-category-line:first-child {
    background: linear-gradient(to left, transparent, #1e2a3a);
}

.skill-card {
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    padding: 16px;
    margin-bottom: 12px;
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.skill-name {
    color: #c8d6e5;
    font-size: 0.9rem;
    font-weight: bold;
}

.level-blocks {
    display: flex;
    gap: 3px;
}

.level-block {
    width: 14px;
    height: 14px;
    border: 1px solid #1e2a3a;
    background: #0a0e17;
    cursor: default;
    transition: background 0.2s, border-color 0.2s;
}

.level-block.filled {
    background: #00d4ff;
    border-color: #00d4ff;
    box-shadow: 0 0 4px rgba(0, 212, 255, 0.4);
}

.level-block:hover {
    border-color: #00d4ff;
}

.skill-description {
    color: #576574;
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 10px;
    font-style: italic;
}

.skill-time-info {
    color: #576574;
    font-size: 0.75rem;
    margin-bottom: 10px;
}

.skill-progress-bar {
    width: 100%;
    height: 6px;
    background: #1e2a3a;
    margin-bottom: 8px;
    overflow: hidden;
}

.skill-progress-fill {
    height: 100%;
    background: #00d4ff;
    transition: width 1s linear;
}

.skill-countdown {
    color: #00d4ff;
    font-size: 0.75rem;
    text-align: right;
    margin-bottom: 10px;
}

.skill-train-btn {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    font-family: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.skill-train-btn:hover {
    background: #00d4ff;
    color: #0a0e17;
}

.skill-train-btn.cancel {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.skill-train-btn.cancel:hover {
    background: #ff6b6b;
    color: #0a0e17;
}

.skill-train-btn:disabled {
    border-color: #333;
    color: #333;
    cursor: not-allowed;
}

.skill-train-btn:disabled:hover {
    background: transparent;
    color: #333;
}

.skill-maxed {
    color: #1dd1a1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 8px;
}

/* --- Quantity Prompt --- */
.qty-prompt {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.qty-prompt-box {
    background: #111827;
    border: 1px solid #1e2a3a;
    padding: 24px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.qty-prompt-label {
    color: #c8d6e5;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.qty-prompt-input {
    padding: 10px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    color: #c8d6e5;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    outline: none;
}

.qty-prompt-input:focus {
    border-color: #00d4ff;
}

.qty-prompt-btns {
    display: flex;
    gap: 8px;
}

.qty-prompt-ok {
    flex: 1;
    padding: 8px;
    font-size: 0.75rem;
}

.qty-prompt-cancel {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: 1px solid #576574;
    color: #576574;
    font-family: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-prompt-cancel:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* --- Inventory Panel (draggable) --- */
.inventory-panel {
    position: fixed;
    bottom: 90px;
    left: 240px;
    width: 260px;
    max-height: 360px;
    background: #111827;
    border: 1px solid #1e2a3a;
    z-index: 140;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.inventory-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #1e2a3a;
    cursor: move;
    user-select: none;
}

.inventory-panel-header span {
    color: #1dd1a1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

.inventory-panel-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 300px;
}

.inventory-empty {
    color: #576574;
    font-size: 0.75rem;
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.inventory-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #1e2a3a;
    cursor: grab;
    transition: background 0.15s;
}

.inventory-row:active {
    cursor: grabbing;
}

.inventory-row:hover {
    background: #1e2a3a;
}

.inventory-row:last-child {
    border-bottom: none;
}

.item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.inventory-item-name {
    color: #c8d6e5;
    font-size: 0.8rem;
    flex: 1;
}

.inventory-item-qty {
    color: #1dd1a1;
    font-size: 0.75rem;
    font-weight: bold;
}

/* --- Shipyard layout --- */
.shipyard-content {
    display: flex;
    flex-direction: column;
}

.shipyard-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px 12px;
    border-top: 1px solid #111d2e;
    flex-shrink: 0;
}

.free-ship-btn {
    padding: 4px 12px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    background: transparent;
    border: 1px solid #2a5a3a;
    color: #3a8a5a;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.free-ship-btn:hover:not(:disabled) {
    border-color: #00e676;
    color: #00e676;
}

.free-ship-btn:disabled {
    border-color: #1a3a2a;
    color: #2a5a3a;
    cursor: default;
}

/* --- Shipyard --- */
.ship-card {
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ship-name {
    color: #c8d6e5;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ship-count {
    color: #576574;
    font-size: 0.75rem;
    font-weight: normal;
    letter-spacing: 1px;
}

.ship-active-label {
    color: #1dd1a1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ship-board-btn {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid #00d4ff;
    color: #00d4ff;
    font-family: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.ship-board-btn:hover {
    background: #00d4ff;
    color: #0a0e17;
}

.ship-board-btn.leave {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.ship-board-btn.leave:hover {
    background: #ff6b6b;
    color: #0a0e17;
}

.ship-board-btn.destroy {
    border-color: #ff4444;
    color: #ff4444;
}

.ship-board-btn.destroy:hover {
    background: #ff4444;
    color: #fff;
}

.ship-card-actions {
    display: flex;
    gap: 8px;
}

/* --- Fitting modal --- */
.fitting-content {
    max-width: 820px;
    width: 90vw;
}

.fitting-body {
    display: flex;
    flex-direction: column;
}

/* Top section — three columns side by side */
.fitting-top {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #1e2a3a;
}

/* Left: equipped slots */
.fitting-equipped-panel {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1e2a3a;
}

.fitting-slots {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Right: image + stats + bonuses stacked */
.fitting-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Stats and bonuses sit side by side under the image */
.fitting-info-row {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #1e2a3a;
}

/* Shared panel header */
.fitting-panel-header {
    padding: 10px 14px;
    border-bottom: 1px solid #1e2a3a;
    color: #00d4ff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    flex-shrink: 0;
    background: #0a0e17;
}

/* Bottom: station modules horizontal strip */
.fitting-station-panel {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #1e2a3a;
    position: relative;
}

/* We intentionally do NOT make .fitting-body a positioning context.
   When the station panel expands into overlay mode, it should anchor to
   .modal-content (which is already position: relative and stretches to
   the bottom of the modal chrome), not to fitting-body — fitting-body
   collapses once the panel leaves the flow, which would make the overlay
   jump up by the panel's own height. */

/* Thin resize handle across the top edge of the station panel */
.fitting-station-resize {
    height: 6px;
    background: transparent;
    cursor: ns-resize;
    border-top: 1px solid #1a2a3a;
    border-bottom: 1px solid #1a2a3a;
    flex-shrink: 0;
    transition: background 0.15s;
}

.fitting-station-resize:hover,
.fitting-station-panel.resizing .fitting-station-resize {
    background: #00d4ff55;
}

/* When expanded (dragged open) the panel floats above the rest of the UI */
.fitting-station-panel.expanded {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
    background: #0a0e17;
}

/* Disable text selection while resizing */
body.fitting-station-resizing,
body.fitting-station-resizing * {
    user-select: none !important;
    cursor: ns-resize !important;
}

.fitting-station-toggle {
    width: 100%;
    padding: 9px 14px;
    background: #0a0e17;
    border: none;
    border-bottom: 1px solid #1e2a3a;
    color: #00d4ff;
    font-family: inherit;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.fitting-station-toggle:hover {
    background: #0d1622;
}

.fitting-station-panel .fitting-modules {
    max-height: 200px;
    transition: max-height 0.25s ease, padding 0.25s ease;
    overflow-y: auto;
}

.fitting-station-panel.collapsed .fitting-modules {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

.fitting-ship-image-wrap {
    flex: 1;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.fitting-ship-image {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    display: block;
}

/* Group: label header above the slot area */
.fitting-slot-group {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #1e2a3a;
}

.fitting-slot-group:last-child {
    border-bottom: 1px solid #1e2a3a;
}

.fitting-slot-group-header {
    padding: 6px 16px;
    background: #060d18;
    color: #8899aa;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-bottom: 1px solid #1a2a3a;
}

.fitting-slot-group-area {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fitting-slot {
    position: relative;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-top: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fitting-slot-group-area .fitting-slot {
    border: none;
    border-bottom: 1px solid #1a2a3a;
}

.fitting-slot-group-area .fitting-slot:last-child {
    border-bottom: none;
}

.fitting-slot-icon {
    color: #576574;
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.fitting-slot-label {
    color: #576574;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.fitting-slot-value {
    margin-left: auto;
    color: #333;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: italic;
}

.fitting-slot-fitted {
    margin-left: auto;
    color: #ffffff;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fitting-slot-valid {
    border-color: #1dd1a1;
    background: rgba(29, 209, 161, 0.06);
}

.fitting-slot-invalid {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.06);
}

.fitting-unequip-btn {
    margin-left: 8px;
    background: none;
    border: none;
    color: #576574;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
}

.fitting-unequip-btn:hover {
    color: #ff6b6b;
}

/* ── Auto Fire cog button ─────────────────────────────────────────────────── */
.fitting-auto-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #3d5068;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s;
}
.fitting-auto-btn:hover {
    color: #7eadcf;
}
.fitting-auto-btn.fitting-auto-active {
    color: #4ade80;
}
.fitting-auto-popup {
    position: absolute;
    top: calc(100% + 2px);
    right: 4px;
    background: #0d1520;
    border: 1px solid #2a3a50;
    border-radius: 4px;
    padding: 8px 12px;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.fitting-auto-popup.hidden {
    display: none;
}
.fitting-auto-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0b4c8;
    font-size: 0.75rem;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
}
.fitting-auto-check {
    accent-color: #4ade80;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.fitting-module-row[draggable="true"] {
    cursor: grab;
}

/* ── Fitting drag-to-unequip ──────────────────────────────────────────────── */
.fitting-slot-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.fitting-modules-drop-target {
    border: 1px dashed #4ade80 !important;
    background: rgba(74, 222, 128, 0.05) !important;
    box-shadow: inset 0 0 12px rgba(74, 222, 128, 0.08);
}

.fitting-module-row[draggable="true"]:active {
    cursor: grabbing;
}

.fitting-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0a0e17;
    border-right: 1px solid #1e2a3a;
    padding: 0;
}

.fitting-bonuses {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0a0e17;
    overflow-y: auto;
}

.fitting-stats-header {
    padding: 7px 14px;
    border-bottom: 1px solid #1e2a3a;
    color: #00d4ff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
}

.fitting-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid #0d1117;
}

.fitting-stat-label {
    color: #576574;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fitting-stat-value {
    color: #c8d6e5;
    font-size: 0.75rem;
    font-weight: bold;
}

.fitting-stat-base {
    color: #3d5068;
    font-size: 0.7rem;
    text-decoration: line-through;
    margin-left: auto;
    margin-right: 6px;
}

.fitting-stat-badge {
    font-size: 0.75rem;
    font-weight: bold;
}

.fitting-stat-badge.buff {
    color: #34d399;
}

.fitting-stat-badge.nerf {
    color: #f87171;
}

/* ── Resist toggle button ─────────────────────────────────────────────────── */
.resist-toggle-btn {
    margin-left: 6px;
    vertical-align: middle;
    background: none;
    border: 1px solid #2a3a50;
    border-radius: 3px;
    color: #3d5068;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 5px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.resist-toggle-btn:hover,
.resist-toggle-btn.resist-toggle-active {
    color: #00d4ff;
    border-color: #00d4ff;
}

/* ── Resist floating popup ────────────────────────────────────────────────── */
.resist-popup {
    position: fixed;
    z-index: 1000;
    min-width: 190px;
    background: #0d1520;
    border: 1px solid #2a3a50;
    border-radius: 6px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.08);
    overflow: hidden;
}
.resist-popup.hidden { display: none; }
.resist-popup-header {
    padding: 6px 14px;
    color: #00d4ff;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 1px solid #1e2a3a;
    background: #080d14;
}
.resist-popup .fitting-stat-row {
    padding: 7px 14px;
}

/* ── Resist value colours ─────────────────────────────────────────────────── */
.fitting-resist-value {
    font-size: 0.75rem;
    font-weight: bold;
}
.resist-em        { color: #60a5fa; }   /* blue  */
.resist-kinetic   { color: #facc15; }   /* gold  */
.resist-explosive { color: #f97316; }   /* orange */

/* --- Station modules (bottom strip, scrolls vertically) --- */
.fitting-modules {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    background: #0a0e17;
    overflow-y: auto;
    padding: 8px;
    gap: 8px;
    min-height: 0;
}

.fitting-module-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fitting-module-group-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8899aa;
    padding: 2px 4px 4px;
    border-bottom: 1px solid #1a2a3a;
}

.fitting-module-group-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 6px;
    min-height: 60px;
    border: 1px dashed transparent;
    border-radius: 4px;
    transition: background 0.12s, border-color 0.12s;
}

.fitting-module-group-area.fitting-modules-drop-target {
    background: rgba(0, 212, 255, 0.06);
    border-color: #00d4ff55;
}

.fitting-module-group-empty {
    color: #3a4656;
    font-size: 1rem;
    padding: 8px 0;
    width: 100%;
    text-align: center;
    user-select: none;
}

.fitting-modules-empty {
    color: #576574;
    font-size: 0.7rem;
    text-align: center;
    padding: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.fitting-module-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid #1e2a3a;
    background: #0d1117;
    width: 90px;
    cursor: default;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}

.fitting-module-row:hover {
    background: #111827;
    border-color: #2a3a4e;
}

.fitting-module-name {
    color: #c8d6e5;
    font-size: 0.65rem;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

.fitting-module-bonus {
    font-size: 0.6rem;
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 3px;
    padding: 1px 4px;
    margin-right: 4px;
    white-space: nowrap;
}

.fitting-module-qty {
    color: #a855f7;
    font-size: 0.7rem;
    font-weight: bold;
}

/* --- Module Info Popup --- */
.module-info-popup {
    position: fixed;
    z-index: 9999;
    background: #0d1b2a;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 16px;
    width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 212, 255, 0.1);
    color: #c8d6e5;
}

.module-info-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #8899aa;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
}
.module-info-close:hover { color: #fff; }

.module-info-image-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.module-info-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.module-info-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-bottom: 4px;
}

.module-info-slot {
    font-size: 0.65rem;
    color: #576574;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 8px;
}

.module-info-desc {
    font-size: 0.72rem;
    color: #8899aa;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 0;
}

.module-info-stats {
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mip-stat {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
}

.mip-stat.buff {
    color: #34d399;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.mip-stat.nerf {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.mip-stat.weapon {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.mip-stat.mip-dps {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mip-stat.mip-damage-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px 8px;
}

.mip-damage-label {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fb923c;
    opacity: 0.85;
}

.mip-dmg-parts {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
}

.mip-dmg-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid currentColor;
    min-width: 52px;
    line-height: 1;
}

.mip-dmg-num {
    font-size: 0.95rem;
    font-weight: 700;
}

.mip-dmg-type {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.mip-dmg-em        { color: #60a5fa; }   /* blue  */
.mip-dmg-kinetic   { color: #facc15; }   /* gold  */
.mip-dmg-explosive { color: #f97316; }   /* orange */

/* --- Manufacturing Modal --- */
.manufacturing-content {
    max-width: 700px;
    width: 95vw;
}

.manufacturing-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    min-height: 280px;
}

.mfg-section-header {
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00d4ff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    margin-bottom: 8px;
}

/* Blueprint list */
.mfg-blueprints {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid #1e2a3a;
    padding-right: 14px;
}

.mfg-blueprint-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.mfg-blueprint-row:hover,
.mfg-blueprint-row.selected {
    border-color: #00d4ff;
}

.mfg-blueprint-row.cannot-build {
    opacity: 0.45;
}

.mfg-blueprint-name {
    flex: 1;
    font-size: 0.75rem;
}

/* Detail panel */
.mfg-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mfg-detail-empty {
    font-size: 0.72rem;
    color: #576574;
}

.mfg-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.mfg-detail-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}

.mfg-detail-name {
    font-size: 0.85rem;
    font-weight: bold;
}

.mfg-ingredients {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mfg-ingredient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 4px;
    font-size: 0.73rem;
}

.mfg-ingredient-name { color: #c8d6e5; }

.mfg-ingredient-qty { font-weight: bold; }
.mfg-ingredient-qty.ok   { color: #34d399; }
.mfg-ingredient-qty.lack { color: #f87171; }

.mfg-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.mfg-qty-label {
    font-size: 0.65rem;
    color: #576574;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mfg-qty-input {
    width: 60px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    color: #c8d6e5;
    padding: 4px 6px;
    font-size: 0.8rem;
    border-radius: 4px;
    text-align: center;
}
.mfg-qty-input:focus { outline: none; border-color: #00d4ff; }

.mfg-time-label {
    font-size: 0.68rem;
    color: #576574;
    margin-left: auto;
}

.mfg-build-btn {
    width: 100%;
    padding: 10px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-top: 4px;
}

.mfg-build-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Jobs queue */
.mfg-jobs-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 212, 255, 0.15);
}

.mfg-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mfg-empty {
    font-size: 0.72rem;
    color: #576574;
}

.mfg-job-row {
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mfg-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mfg-job-name  { font-size: 0.75rem; color: #c8d6e5; }

.mfg-job-timer {
    font-size: 0.75rem;
    font-weight: bold;
    color: #00d4ff;
    font-variant-numeric: tabular-nums;
}

.mfg-job-bar-track {
    height: 4px;
    background: #1e2a3a;
    border-radius: 2px;
    overflow: hidden;
}

.mfg-job-bar-fill {
    height: 100%;
    background: #00d4ff;
    border-radius: 2px;
    transition: width 0.9s linear;
}

.mfg-job-row.complete .mfg-job-bar-fill { background: #34d399; }
.mfg-job-row.complete .mfg-job-timer    { color: #34d399; }

/* --- Refining Modal --- */
.refining-content {
    max-width: 780px;
    width: 95vw;
}

.refining-body {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    gap: 16px;
    min-height: 340px;
}

.refining-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refining-col-header {
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00d4ff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.refining-ore-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 320px;
}

.refining-ore-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 4px;
    cursor: grab;
    transition: border-color 0.15s;
}

.refining-ore-row:hover {
    border-color: #00d4ff;
}

.refining-ore-row:active {
    cursor: grabbing;
}

.refining-ore-name {
    flex: 1;
    font-size: 0.75rem;
    color: #c8d6e5;
}

.refining-ore-qty {
    font-size: 0.7rem;
    color: #a855f7;
    font-weight: bold;
}

/* Hopper / drop zone */
.refining-drop-zone {
    flex: 1;
    border: 2px dashed #1e2a3a;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 120px;
    transition: border-color 0.15s, background 0.15s;
}

.refining-drop-zone.drag-over {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.05);
}

.refining-drop-hint {
    font-size: 0.7rem;
    color: #576574;
    text-align: center;
}

.refining-hopper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.refining-hopper-item .item-icon {
    width: 48px;
    height: 48px;
}

.refining-hopper-name {
    font-size: 0.75rem;
    color: #c8d6e5;
    text-align: center;
}

.refining-qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.refining-qty-label {
    font-size: 0.65rem;
    color: #576574;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.refining-qty-input {
    width: 60px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    color: #c8d6e5;
    padding: 4px 6px;
    font-size: 0.8rem;
    border-radius: 4px;
    text-align: center;
}

.refining-qty-input:focus {
    outline: none;
    border-color: #00d4ff;
}

.refining-qty-max {
    font-size: 0.65rem;
    color: #576574;
}

.refining-refine-btn {
    width: 100%;
    padding: 10px;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

/* Output panel */
.refining-output-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refining-output-empty {
    font-size: 0.72rem;
    color: #576574;
}

.refining-output-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 4px;
}

.refining-output-name {
    font-size: 0.75rem;
    color: #c8d6e5;
}

.refining-output-qty {
    font-size: 0.75rem;
    color: #34d399;
    font-weight: bold;
}

/* Refining jobs queue */
.refining-jobs-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refining-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refining-job-row {
    background: #0a0e17;
    border: 1px solid #1e2a3a;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.refining-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.refining-job-name {
    font-size: 0.75rem;
    color: #c8d6e5;
}

.refining-job-timer {
    font-size: 0.75rem;
    font-weight: bold;
    color: #00d4ff;
    font-variant-numeric: tabular-nums;
}

.refining-job-bar-track {
    height: 4px;
    background: #1e2a3a;
    border-radius: 2px;
    overflow: hidden;
}

.refining-job-bar-fill {
    height: 100%;
    background: #00d4ff;
    border-radius: 2px;
    transition: width 0.9s linear;
}

.refining-job-row.complete .refining-job-bar-fill {
    background: #34d399;
}

.refining-job-row.complete .refining-job-timer {
    color: #34d399;
}

.refining-collect-btn {
    padding: 4px 12px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    background: #34d399;
    color: #0a0e17;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.15s;
}

.refining-collect-btn:hover {
    background: #6ee7b7;
}

/* --- Trade Modal --- */
.trade-category-header {
    padding: 10px 16px;
    color: #00d4ff;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 1px solid #1e2a3a;
    background: #0a0e17;
}

.trade-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #0d1117;
}

.trade-row:last-child {
    border-bottom: none;
}

.trade-item-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.trade-item-name {
    flex: 1;
    color: #cdd6f4;
    font-size: 0.85rem;
}

.trade-item-price {
    color: #1dd1a1;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    min-width: 60px;
    text-align: right;
}

.trade-buy-btn {
    padding: 6px 18px;
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid #1dd1a1;
    color: #1dd1a1;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-buy-btn:hover {
    background: #1dd1a1;
    color: #0a0e17;
}

.trade-owned-count {
    font-size: 0.7rem;
    color: #576574;
    letter-spacing: 1px;
}

.trade-empty {
    padding: 32px;
    text-align: center;
    color: #576574;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Ship FAB --- */
/* HUD menu wrapper + button */
.hud-menu-wrap {
    flex-shrink: 0;
    position: relative;
}

.hud-ship-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #111827;
    border: 1px solid #1e2a3a;
    color: #00d4ff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hud-ship-btn:hover,
.hud-ship-btn.open {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.35);
}

/* Pop-out menu — appears above the button */
.hud-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: #111827;
    border: 1px solid #1e2a3a;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    z-index: 50;
}

.hud-menu.hidden { display: none; }

.hud-menu-item {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #1e2a3a;
    color: #c8d6e5;
    font-family: inherit;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.hud-menu-item:last-child { border-bottom: none; }

.hud-menu-item:hover {
    background: #1e2a3a;
    color: #00d4ff;
}

/* --- Hangar Panel (draggable) --- */
.hangar-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 260px;
    max-height: 360px;
    background: #111827;
    border: 1px solid #1e2a3a;
    z-index: 140;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hangar-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #1e2a3a;
    cursor: move;
    user-select: none;
}

.hangar-panel-header span {
    color: #00d4ff;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

.hangar-panel-close {
    font-size: 1.2rem;
}

.hangar-panel-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 300px;
}

.hangar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #1e2a3a;
    cursor: grab;
    transition: background 0.15s;
}

.hangar-item:active {
    cursor: grabbing;
}

.hangar-item:hover {
    background: #1e2a3a;
}

.hangar-item:last-child {
    border-bottom: none;
}

.hangar-item-name {
    color: #c8d6e5;
    font-size: 0.8rem;
    flex: 1;
}

.hangar-item-qty {
    color: #00d4ff;
    font-size: 0.75rem;
    font-weight: bold;
}

.hangar-empty {
    color: #576574;
    font-size: 0.75rem;
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Drag ghost --- */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: #111827;
    border: 1px solid #00d4ff;
    padding: 6px 12px;
    color: #00d4ff;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* Inventory drop highlight */
.inventory-drop-target {
    outline: 2px dashed #00d4ff;
    outline-offset: -2px;
}

/* ─── Ship Tree ──────────────────────────────────────────── */
.ship-tree-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ship-tree-overlay.hidden { display: none; }

.ship-tree-panel {
    background: linear-gradient(160deg, #0d1422 0%, #0a0e1a 100%);
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0, 180, 255, 0.1), 0 8px 40px rgba(0,0,0,0.7);
    width: min(1140px, 96vw);
    height: min(620px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ship-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #1a2f4a;
    flex-shrink: 0;
}

.ship-tree-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #00d4ff;
    text-transform: uppercase;
}

.ship-tree-close-btn {
    background: none;
    border: none;
    color: #557a9a;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.ship-tree-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.ship-tree-faction-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #060d18;
    border-bottom: 1px solid #1a2a3a;
    flex-wrap: wrap;
}

.faction-filter-btn {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #1a2a3a;
    background: #0a111e;
    color: #8899aa;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    letter-spacing: 0.03em;
}

.faction-filter-btn:hover {
    border-color: #00d4ff44;
    color: #cce4f0;
    background: #0d1828;
}

.faction-filter-btn.active {
    border-color: #00d4ff;
    color: #00d4ff;
    background: #00d4ff18;
}

.ship-tree-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left: ship grid */
.ship-tree-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    border-right: 1px solid #111d2e;
}

.ship-tree-type-header {
    width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2a6a9a;
    border-bottom: 1px solid #112030;
    padding-bottom: 5px;
    margin-bottom: 2px;
}

.ship-tree-type-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ship-tree-card {
    width: 110px;
    background: #0a111e;
    border: 1px solid #1a2a3a;
    border-radius: 8px;
    padding: 12px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: context-menu;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.ship-tree-card:hover {
    border-color: #00d4ff44;
    background: #0d1828;
}

.ship-tree-card.selected {
    border-color: #00d4ff;
    background: #0d1828;
    box-shadow: 0 0 0 1px #00d4ff44;
}

.ship-tree-card-img {
    width: 72px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.2));
}

.ship-tree-card-label {
    font-size: 0.7rem;
    color: #8ab0cc;
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* Right: info panel */
.ship-tree-info {
    width: 340px;
    flex-shrink: 0;
    padding: 20px 18px;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ship-tree-info-placeholder {
    margin-top: 60px;
    text-align: center;
    font-size: 0.78rem;
    color: #3a5a7a;
    line-height: 1.7;
}

.ship-tree-info-placeholder strong {
    color: #4a7a9a;
}

.ship-tree-info-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ship-tree-info-img {
    width: 100%;
    max-height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.3));
}

.ship-tree-info-img-missing {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a4a6a;
    font-size: 0.75rem;
}

.ship-tree-info-name {
    font-size: 1rem;
    font-weight: 700;
    color: #cde4f5;
    letter-spacing: 0.06em;
}

.ship-tree-info-type {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2a7aaa;
    margin-top: -6px;
}

.ship-tree-info-desc {
    font-size: 0.75rem;
    color: #5a8aaa;
    line-height: 1.65;
    border-left: 2px solid #1a3a5a;
    padding-left: 10px;
}

.ship-tree-info-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.ship-tree-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: #080d18;
    border: 1px solid #111d2e;
    border-radius: 4px;
}

.ship-tree-stat-label {
    font-size: 0.7rem;
    color: #4a7a9a;
    letter-spacing: 0.04em;
}

.ship-tree-stat-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: #00d4ff;
}

/* Inline right-click context menu for ship tree */
.ship-tree-ctx {
    position: fixed;
    z-index: 600;
    background: #0d1828;
    border: 1px solid #1e3a5f;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    padding: 4px 0;
    min-width: 130px;
}

.ship-tree-ctx.hidden { display: none; }

.ship-tree-ctx button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #9ac4e0;
    font-size: 0.82rem;
    text-align: left;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.ship-tree-ctx button:hover {
    background: #1a3a5a;
    color: #fff;
}

/* ─── Galaxy Map ─────────────────────────────────────────── */
.map-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-overlay.hidden {
    display: none;
}

.map-panel {
    background: linear-gradient(160deg, #0d1422 0%, #0a0e1a 100%);
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0, 180, 255, 0.12), 0 8px 40px rgba(0,0,0,0.7);
    width: min(780px, 92vw);
    height: min(520px, 85vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #1a2f4a;
    flex-shrink: 0;
}

.map-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #00d4ff;
    text-transform: uppercase;
}

.map-close-btn {
    background: none;
    border: none;
    color: #557a9a;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.map-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.map-legend {
    display: flex;
    gap: 20px;
    padding: 8px 20px;
    border-bottom: 1px solid #111d2e;
    flex-shrink: 0;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #8aa8c0;
    letter-spacing: 0.04em;
}

.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.map-legend-current {
    background: #00d4ff;
    box-shadow: 0 0 6px #00d4ff;
}

.map-svg {
    flex: 1;
    width: 100%;
    display: block;
}

/* SVG element styles (applied via setAttribute class) */
.map-connection {
    stroke: #1e4a7a;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.map-connection-glow {
    stroke: #0a80c4;
    stroke-width: 4;
    opacity: 0.15;
    filter: url(#line-glow);
}

.map-node {
    opacity: 0.9;
}

.map-node-current {
    opacity: 1;
}

@keyframes mapNodePulse {
    0%, 100% { opacity: 0.15; r: 22; }
    50%       { opacity: 0.30; r: 28; }
}

.map-node-pulse {
    animation: mapNodePulse 2.4s ease-in-out infinite;
    opacity: 0.2;
}

.map-system-name {
    fill: #cde4f5;
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
    font-family: inherit;
}

.map-system-sec {
    font-size: 10px;
    text-anchor: middle;
    font-family: inherit;
    opacity: 0.8;
    letter-spacing: 0.03em;
}

.map-system-here {
    fill: #00d4ff;
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    font-family: inherit;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

/* ─── Ship Tree — Bonus section ─────────────────────────────────────────── */
.ship-tree-bonus-header {
    margin-top: 14px;
    margin-bottom: 4px;
    color: #00d4ff;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-top: 1px solid #1e2a3a;
    padding-top: 10px;
}

.ship-tree-bonus-skill {
    color: #576574;
    font-size: 0.7rem;
    margin-top: 6px;
    margin-bottom: 2px;
}

.ship-tree-bonus-skill strong {
    color: #c8d6e5;
}

.ship-tree-bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.ship-tree-bonus-val {
    color: #34d399;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 60px;
}

.ship-tree-bonus-stat {
    color: #a0b4c8;
    font-size: 0.72rem;
}

/* ─── Fitting — Bonuses panel ────────────────────────────────────────────── */

.fitting-bonus-empty {
    color: #576574;
    font-size: 0.7rem;
    text-align: center;
    padding: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fitting-bonus-skill {
    padding: 8px 14px 4px;
    color: #576574;
    font-size: 0.68rem;
    border-bottom: 1px solid #0d1117;
}

.fitting-bonus-skill strong {
    color: #c8d6e5;
}

.fitting-bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px 2px;
}

.fitting-bonus-stat {
    color: #a0b4c8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fitting-bonus-val {
    color: #576574;
    font-size: 0.68rem;
}

.fitting-bonus-effective {
    padding: 0 14px 8px;
    font-size: 0.68rem;
    border-bottom: 1px solid #0d1117;
}

.fitting-bonus-effective.active {
    color: #34d399;
}

.fitting-bonus-effective.inactive {
    color: #576574;
}

.fitting-bonus-untrained {
    font-size: 0.62rem;
    opacity: 0.6;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Combat System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Combat Site panel (at-site view) ───────────────────────────────────── */
.combat-site-panel {
    padding: 16px 20px;
}
.combat-site-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff6b6b;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255,107,107,0.6);
    margin-bottom: 10px;
}
.combat-site-status {
    color: #576574;
    font-size: 0.72rem;
}
.combat-site-enemy {
    display: flex;
    align-items: center;
    gap: 8px;
}
.combat-site-enemy-name {
    color: #ff6b6b;
    font-size: 0.8rem;
    font-weight: 600;
}
.combat-site-enemy-type {
    color: #576574;
    font-size: 0.72rem;
}

/* ─── Overview "Attack" button ───────────────────────────────────────────── */
.btn-attack {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #ff6b6b;
}
.btn-attack:hover {
    background: rgba(220, 38, 38, 0.3);
    border-color: #ff6b6b;
    box-shadow: 0 0 8px rgba(255,107,107,0.4);
}

/* ─── Enemy overview item ─────────────────────────────────────────────────── */
.entity-enemy { color: #ff6b6b; }

/* ─── Battle overview item ────────────────────────────────────────────────── */
.entity-battle {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
    animation: pulse-battle-icon 1.5s ease-in-out infinite;
}
@keyframes pulse-battle-icon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2); }
}

/* ─── Combat overlay ─────────────────────────────────────────────────────── */
.combat-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
.combat-overlay.hidden { display: none; }

/* ─── Combat window ──────────────────────────────────────────────────────── */
.combat-window {
    position: relative;
    background: #0d1117;
    border: 1px solid rgba(255,107,107,0.35);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(255,107,107,0.15), 0 8px 32px rgba(0,0,0,0.8);
    width: min(640px, 96vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.combat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,107,107,0.2);
    background: rgba(255,107,107,0.05);
}
.combat-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff6b6b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(255,107,107,0.6);
}
.combat-flee-btn {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: #64748b;
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.combat-flee-btn:hover {
    background: rgba(100, 116, 139, 0.3);
    color: #94a3b8;
    border-color: #64748b;
}

/* ─── Shared bar colours (used in battle lists and HP bars) ─────────────── */
.ally-shield    { background: #00d4ff; }
.ally-armor     { background: #fbbf24; }
.ally-structure { background: #94a3b8; }

/* ─── HP bars ────────────────────────────────────────────────────────────── */
.combat-hp-bars { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.combat-tank-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.combat-tank-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}
.combat-shield-lbl { color: #00d4ff; }
.combat-armor-lbl  { color: #fbbf24; }
.combat-struct-lbl { color: #94a3b8; }
.combat-tank-bar-outer {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.combat-tank-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.25s ease;
}
.shield-bar { background: #00d4ff; box-shadow: 0 0 4px rgba(0,212,255,0.5); }
.armor-bar  { background: #fbbf24; box-shadow: 0 0 4px rgba(251,191,36,0.4); }
.struct-bar { background: #94a3b8; }
.energy-bar { background: #6366f1; box-shadow: 0 0 4px rgba(99,102,241,0.6); }
.combat-energy-lbl { color: #818cf8; }
.combat-energy-bar { width: 100%; margin-top: 4px; }
.combat-tank-val {
    font-size: 0.6rem;
    color: #576574;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ─── Module strip ───────────────────────────────────────────────────────── */
.combat-modules {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
    justify-content: center;
}
.combat-module-slot {
    position: relative;
    width: 210px;
    height: 58px;
    border-radius: 6px;
    border: 1px solid rgba(100,116,139,0.3);
    background: rgba(15,23,42,0.8);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.combat-module-slot.ready {
    border-color: rgba(255,107,107,0.5);
    box-shadow: 0 0 8px rgba(255,107,107,0.2);
}
.combat-module-slot.ready:hover {
    border-color: #ff6b6b;
    box-shadow: 0 0 12px rgba(255,107,107,0.4);
}
.combat-module-slot.reloading {
    opacity: 0.85;
}
/* Module active/inactive toggle states */
.combat-module-slot.module-active {
    border-color: rgba(255,107,107,0.5);
}
.combat-module-slot.module-active:hover {
    border-color: #ff6b6b;
    box-shadow: 0 0 12px rgba(255,107,107,0.35);
}
.combat-module-slot.module-inactive {
    border-color: rgba(100,116,139,0.25);
    background: rgba(15,23,42,0.4);
    opacity: 0.65;
    filter: grayscale(0.6) brightness(0.85);
}
.combat-module-slot.module-inactive .combat-module-name,
.combat-module-slot.module-inactive .combat-module-dps,
.combat-module-slot.module-inactive .combat-module-cooldown {
    color: #7f8c9a !important;
}
.combat-module-slot.module-inactive:hover {
    opacity: 0.85;
    filter: grayscale(0.3);
    border-color: rgba(255,107,107,0.35);
}
.combat-module-slot.repair.module-inactive:hover {
    border-color: rgba(34,197,94,0.35);
}
.combat-module-slot.empty {
    cursor: default;
    opacity: 0.4;
}
.combat-module-reload-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    background: #ff6b6b;
    box-shadow: 0 0 6px rgba(255,107,107,0.7);
    transition: width 0.4s linear;
}
/* Repair modules — green bar + border + label */
.combat-module-reload-bar.repair-reload-bar {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.7);
}
.combat-module-slot.repair.module-active {
    border-color: rgba(34,197,94,0.55);
}
.combat-module-slot.repair.module-active:hover {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34,197,94,0.35);
}
.combat-module-slot.repair.ready {
    border-color: rgba(34,197,94,0.55);
    box-shadow: 0 0 8px rgba(34,197,94,0.2);
}
.combat-module-dps.repair-label {
    color: #4ade80;
}
.combat-module-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 6px 12px 9px;
    gap: 2px;
    min-width: 0;
}
.combat-module-name {
    font-size: 0.72rem;
    color: #c8d6e5;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combat-module-dps {
    font-size: 0.62rem;
    color: #fb923c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combat-module-cooldown {
    font-size: 0.6rem;
    color: #576574;
    white-space: nowrap;
}
/* Enemy module (target column) — no click interaction, red reload bar */
.combat-module-slot.enemy-module {
    cursor: default;
    border-color: rgba(239, 68, 68, 0.2);
}
.combat-module-slot.enemy-module:hover {
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow: none;
}
.combat-module-slot.enemy-module-ready {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.18);
}
.enemy-reload-bar {
    background: rgba(239, 68, 68, 0.35);
}
.combat-module-cooldown.enemy-ready-text {
    color: #f87171;
    font-weight: 600;
}

.combat-module-cooldown.ready-text {
    color: #34d399;
    font-weight: 600;
}

/* ─── Outcome overlay ────────────────────────────────────────────────────── */
.combat-outcome {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 10;
}
.combat-outcome.hidden { display: none; }
.combat-outcome-text { text-align: center; line-height: 1.7; }
.outcome-victory {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #34d399;
    text-shadow: 0 0 20px rgba(52,211,153,0.8);
    letter-spacing: 2px;
}
.outcome-defeat {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 0 20px rgba(255,107,107,0.8);
    letter-spacing: 2px;
}
.outcome-fled {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 2px;
}
.outcome-reward {
    display: block;
    font-size: 0.9rem;
    color: #fbbf24;
    margin-top: 4px;
}
.outcome-msg {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}
.combat-outcome-close {
    margin-top: 8px;
    padding: 8px 28px;
}

/* ─── Lock overlay — pre-battle countdown ──────────────────────────────── */
.battle-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}
.battle-lock-overlay.hidden { display: none; }
.battle-lock-text {
    text-align: center;
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    letter-spacing: 0.5px;
}
.battle-lock-countdown {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 24px rgba(255, 68, 68, 0.7);
    margin: 6px 0;
    font-variant-numeric: tabular-nums;
}
.battle-lock-sub {
    display: block;
    color: #94a3b8;
    font-size: 1rem;
}

/* ─── Battle window (4-column layout) ─────────────────────────────────── */
.battle-window {
    width: min(1120px, 96vw);
    max-width: 1120px;
    min-height: min(560px, 85vh);
}
.battle-status {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251,191,36,0.4);
}
.battle-join-btn {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #4ade80;
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
    margin-left: 6px;
}
.battle-join-btn:hover { background: rgba(74, 222, 128, 0.28); }
.battle-join-btn.hidden { display: none; }
.battle-close-btn {
    background: transparent;
    border: 1px solid rgba(100,116,139,0.3);
    color: #94a3b8;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    margin-left: 6px;
}
.battle-close-btn:hover { background: rgba(100,116,139,0.2); }

.battle-body {
    display: grid;
    grid-template-columns: 1fr 1.3fr auto 1.3fr 1fr;
    gap: 10px;
    padding: 14px;
    flex: 1;
    min-height: 0;
}
.battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(255,107,107,0.8), 0 0 24px rgba(255,107,107,0.4);
    letter-spacing: 2px;
    padding: 0 2px;
    flex-shrink: 0;
}
.battle-col {
    position: relative;
    background: rgba(255,107,107,0.03);
    border: 1px solid rgba(255,107,107,0.12);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.battle-col-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    border-bottom: 1px solid rgba(100,116,139,0.2);
    padding-bottom: 4px;
}
.battle-ship-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}
.battle-list-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(13,17,23,0.6);
    border: 1px solid transparent;
}
.battle-list-row.clickable { cursor: pointer; }
.battle-list-row.clickable:hover { background: rgba(255,107,107,0.08); }
.battle-list-row.selected { border-color: rgba(251,191,36,0.6); box-shadow: 0 0 8px rgba(251,191,36,0.25); }
.battle-list-row.dead  { opacity: 0.38; filter: grayscale(1); }
.battle-list-row.fled  { opacity: 0.45; }
.battle-list-skull {
    display: inline-block;
    margin-right: 3px;
    font-size: 0.8rem;
    color: #6b7280;
    vertical-align: middle;
}
.battle-list-img {
    width: 36px;
    height: 24px;
    object-fit: contain;
}
.battle-list-info { flex: 1; min-width: 0; }
.battle-list-name {
    font-size: 0.72rem;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.battle-list-bars {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    height: 4px;
}
.battle-list-bar-outer {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.battle-list-bars .combat-ally-bar { height: 4px; border-radius: 2px; transition: width 0.25s ease; }
.battle-list-note {
    font-size: 0.6rem;
    color: #fbbf24;
    margin-top: 2px;
}
.battle-empty {
    text-align: center;
    color: #3d5068;
    font-size: 0.75rem;
    padding: 12px 0;
}

.battle-self-img,
.battle-target-img {
    width: 80%;
    max-width: 220px;
    align-self: center;
}
.battle-self-img   { filter: drop-shadow(0 0 12px rgba(74,222,128,0.35)); }
.battle-target-img { filter: drop-shadow(0 0 12px rgba(255,107,107,0.4)); transform: scaleX(-1); }

/* ── Ship damage shake ────────────────────────────────────────────────────── */
@keyframes ship-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}
/* Target image is already scaleX(-1) — keep that transform while shaking */
@keyframes ship-shake-flipped {
    0%, 100% { transform: scaleX(-1) translateX(0); }
    20%      { transform: scaleX(-1) translateX(-6px); }
    40%      { transform: scaleX(-1) translateX(6px); }
    60%      { transform: scaleX(-1) translateX(-4px); }
    80%      { transform: scaleX(-1) translateX(3px); }
}
.ship-shake               { animation: ship-shake         0.35s ease-out; }
.battle-target-img.ship-shake { animation: ship-shake-flipped 0.35s ease-out; }

/* ── Target lock-on flash ─────────────────────────────────────────────────── */
@keyframes target-lock-glow {
    0%   {
        box-shadow: inset 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0);
        border-color: rgba(255,107,107,0.12);
        background: rgba(255,107,107,0.03);
    }
    10%  {
        box-shadow: inset 0 0 60px 12px rgba(255,255,255,0.22), 0 0 28px 8px rgba(255,255,255,0.4);
        border-color: rgba(255,255,255,1);
        background: rgba(255,255,255,0.09);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0);
        border-color: rgba(255,107,107,0.12);
        background: rgba(255,107,107,0.03);
    }
}
.battle-col.target-lock-flash {
    animation: target-lock-glow 1.2s ease-out forwards;
}
/* "TARGET LOCKED" badge that appears centred over the target column */
.target-lock-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
    text-shadow: 0 0 10px #fff, 0 0 22px rgba(255,100,100,0.9);
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.65);
    padding: 5px 13px;
    border-radius: 3px;
    animation: target-lock-text 1.2s ease-out forwards;
}
@keyframes target-lock-text {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    68%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── Ship destruction explosion ───────────────────────────────────────────── */
.ship-explosion {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 60;
}
/* Expanding fireball */
.ship-explosion::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        #ffffff 0%,
        #ffe566 20%,
        #ff8800 55%,
        #cc2200 80%,
        transparent 100%
    );
    animation: explode-core 0.85s ease-out forwards;
}
/* Shockwave ring */
.ship-explosion::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 4px solid rgba(255, 140, 0, 0.85);
    box-shadow: 0 0 14px rgba(255, 100, 0, 0.5), inset 0 0 8px rgba(255, 200, 0, 0.3);
    animation: explode-ring 1s ease-out forwards;
}
@keyframes explode-core {
    0%   { width:   8px; height:   8px; opacity: 1; }
    35%  { width:  90px; height:  90px; opacity: 1; }
    100% { width: 140px; height: 140px; opacity: 0; }
}
@keyframes explode-ring {
    0%   { width:  24px; height:  24px; opacity: 0.9; }
    100% { width: 220px; height: 220px; opacity: 0;   }
}
.battle-self-name,
.battle-target-name {
    text-align: center;
    font-size: 0.8rem;
    color: #cbd5e1;
    font-weight: 600;
}

/* ─── Swords icon in action view ───────────────────────────────────── */
.battle-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 25;
    transition: left 0.4s linear, top 0.4s linear;
    pointer-events: auto;
}
.battle-icon-inner {
    font-size: 3.2rem;
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(255,107,107,0.7), 0 0 24px rgba(255,107,107,0.4);
    animation: battle-pulse 1.8s ease-in-out infinite;
}
@keyframes battle-pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.1); }
}
.battle-icon-label {
    margin-top: 2px;
    padding: 2px 8px;
    border: 1px solid rgba(255,107,107,0.4);
    border-radius: 3px;
    background: rgba(13,17,23,0.85);
    font-size: 0.65rem;
    color: #ff6b6b;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.battle-icon-count { color: #cbd5e1; font-weight: 600; }

.sidebar-battle { font-weight: 600; color: #ff6b6b; }

/* ─── Floating damage numbers ─────────────────────────────────────────────── */
.floating-damage {
    position: absolute;
    transform: translateX(-50%);
    color: #ff4d4d;
    font-size: 1.15rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(255, 77, 77, 0.8), 0 1px 3px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index: 50;
    animation: float-damage 1s ease-out forwards;
}
@keyframes float-damage {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0);     }
    30%  { opacity: 1; transform: translateX(-50%) translateY(-18px);  }
    100% { opacity: 0; transform: translateX(-50%) translateY(-52px);  }
}

/* ─── Join Battle Side Modal ──────────────────────────────────────────────── */
.join-battle-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-battle-modal.hidden { display: none; }
.join-battle-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
}
.join-battle-box {
    position: relative;
    z-index: 1;
    background: #0d1117;
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: 12px;
    padding: 28px 32px 22px;
    min-width: 340px;
    text-align: center;
    box-shadow: 0 0 48px rgba(255, 107, 107, 0.12), 0 8px 32px rgba(0, 0, 0, 0.6);
}
.join-battle-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff6b6b;
    margin-bottom: 6px;
}
.join-battle-subtitle {
    font-size: 0.72rem;
    color: #4b6076;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}
.join-battle-sides {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 18px;
}
.join-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 28px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    min-width: 120px;
    background: none;
    transition: transform 0.12s, box-shadow 0.18s;
}
.join-attackers-btn {
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}
.join-attackers-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.75);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
}
.join-defenders-btn {
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.08);
    color: #60a5fa;
}
.join-defenders-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.75);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.25);
}
.join-side-icon  { font-size: 1.6rem; }
.join-side-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.join-side-count {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0.7;
}
.join-cancel-btn {
    background: none;
    border: none;
    color: #3d5068;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 4px 16px;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: color 0.15s;
}
.join-cancel-btn:hover { color: #64748b; }

/* ─── Wave reinforcement message ──────────────────────────────────────────── */
.battle-reinforcement-msg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.6);
    box-shadow: 0 0 18px rgba(255, 60, 60, 0.5);
    z-index: 25;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
.battle-reinforcement-msg.hidden { display: none; }
@keyframes battle-msg-in {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    25%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}
.battle-msg-fade { animation: battle-msg-in 1s ease-out forwards; }


/* ─── Captains Feature ───────────────────────────────────────────── */

/* Captains Quarters Modal — styled like fitting-modal */
#captains-modal { z-index: 210; }
.captains-modal-content {
    max-width: 820px;
    width: 90vw;
}
.captains-body { display: flex; flex-direction: column; }
.captains-top { display: flex; flex-direction: row; min-height: 420px; }

.captains-left-panel {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1e2a3a;
}
.captains-list-v2 {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.captains-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}
.captain-portrait-wrap {
    flex: 0 0 auto;
    background: #000;
    border-bottom: 1px solid #1e2a3a;
    line-height: 0;
}
.captain-portrait-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.captain-portrait-empty { color: #6b7582; font-style: italic; padding: 40px; }
.captain-detail-body { padding: 14px 18px; }
.captain-detail-empty {
    color: #6b7582;
    text-align: center;
    padding: 40px 10px;
    font-style: italic;
}

.captain-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #1a2a3a;
    cursor: pointer;
}
.captain-list-row:hover { background: #0f1c2a; }
.captain-list-row.selected { background: #1a1408; border-left: 3px solid #d4a84a; }

.captain-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #0a0e17;
    border: 2px solid #d4a84a;
    object-fit: cover;
    flex-shrink: 0;
}
.captain-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.captain-name { color: #ffd780; font-size: 0.85rem; font-weight: 600; }
.captain-type {
    color: #8899aa; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.14em;
}
.captain-level-row { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #a7b5c5; }
.captain-level-badge {
    background: #4a3a16; color: #ffd780; padding: 2px 6px;
    border-radius: 3px; font-weight: 700; font-size: 0.64rem;
}
.captain-xp-bar-outer {
    flex: 1; height: 4px; background: #0a0e17; border: 1px solid #1e2a3a;
    border-radius: 2px; overflow: hidden;
}
.captain-xp-bar-detail { height: 8px; }
.captain-xp-bar-fill { height: 100%; background: linear-gradient(90deg,#d4a84a,#ffd780); transition: width 0.4s; }
.captain-xp-text { color: #8899aa; font-size: 0.62rem; }
.captain-assigned-note { color: #ffaa00; font-size: 0.62rem; font-style: italic; }

/* Detail panel */
.captain-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1e2a3a;
    margin-bottom: 12px;
}
.captain-detail-title { display: flex; flex-direction: column; gap: 4px; }
.captain-detail-name { margin: 0; color: #ffd780; font-size: 1.15rem; font-weight: 700; }
.captain-detail-type { color: #8899aa; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; }
.captain-detail-level { display: flex; align-items: center; gap: 8px; min-width: 200px; }

/* Captain bonus rows inside detail panel */
.captain-bonus-list { display: flex; flex-direction: column; gap: 4px; }
.captain-bonus-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 6px; font-size: 0.75rem;
    background: #0a0e17; border: 1px solid #1a2a3a; border-radius: 3px;
}
.captain-bonus-stat { color: #a7b5c5; }
.captain-bonus-val  { color: #ffd780; font-weight: 600; }
.captain-bonus-src  { color: #6b7582; font-size: 0.62rem; font-style: italic; margin-left: 4px; }
.captain-bonus-empty { color: #6b7582; font-style: italic; font-size: 0.75rem; padding: 6px; }

.captain-detail-section { margin-bottom: 16px; }
.captain-detail-section-header {
    color: #00d4ff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #1e2a3a;
}
.captain-detail-desc { color: #a7b5c5; font-size: 0.8rem; line-height: 1.5; }

.captain-assign-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.captain-assign-label { color: #a7b5c5; font-size: 0.75rem; }
.captain-assign-select {
    background: #0a0e17;
    color: #ffd780;
    border: 1px solid #4a3a16;
    padding: 5px 8px;
    font-size: 0.8rem;
    border-radius: 3px;
    flex: 1;
    min-width: 140px;
}
.captain-assign-current { color: #ffd780; font-size: 0.8rem; flex: 1; }
.captain-assign-hint { color: #6b7582; font-size: 0.75rem; font-style: italic; }
.captain-assign-btn, .captain-unassign-btn {
    background: #4a3a16;
    color: #ffd780;
    border: 1px solid #d4a84a;
    padding: 5px 14px;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 3px;
}
.captain-assign-btn:hover, .captain-unassign-btn:hover { background: #6a5420; }
.captain-unassign-btn { background: #3a1a1a; color: #ff8888; border-color: #8a4a4a; }
.captain-unassign-btn:hover { background: #5a2a2a; }

/* Captain section header — mirrors .fitting-panel-header with gold accent */
.fitting-captain-panel-header {
    color: #d4a84a !important;
    background: #1a1408 !important;
    border-bottom: 1px solid #4a3a16;
}

/* Captain slot in fitting window */
.fitting-slot.captain-slot { border-left: 3px solid #d4a84a; }
.fitting-slot.captain-slot .fitting-slot-icon { color: #d4a84a; }
.fitting-slot.captain-slot .fitting-slot-fitted { color: #ffd780; }
.fitting-slot-valid.captain-slot { border-color: #d4a84a; box-shadow: inset 0 0 0 1px #d4a84a; }

/* Captain bonuses section inside fitting-bonuses */
.fitting-captain-header { margin-top: 10px; }
.fitting-captain-bonus-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 6px; font-size: 0.72rem;
}
.fitting-captain-bonus-stat { color: #a7b5c5; }
.fitting-captain-bonus-val  { color: #ffd780; font-weight: 600; }
.fitting-captain-bonus-src  { color: #6b7582; font-size: 0.6rem; font-style: italic; margin-left: 4px; }