*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html,body,#app{height:100%;margin:0;padding:0;overflow:hidden}

/* General hidden class */
.hidden{display:none}

/* Start Screen */
#start-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0a0e1a 0%,#000000 100%);display:flex;align-items:center;justify-content:center;z-index:9999}
.start-screen-content{text-align:center;padding:20px;max-width:90vw}
.game-logo{max-width:280px;width:80vw;height:auto;margin:0 auto 20px auto;display:block;filter:drop-shadow(0 0 20px rgba(158,196,255,0.5))}
.game-title{font-size:clamp(28px,8vw,72px);font-weight:700;letter-spacing:0.3em;text-transform:uppercase;color:#9ec4ff;margin:0 0 30px 0;text-shadow:0 0 20px rgba(158,196,255,0.6),0 0 40px rgba(158,196,255,0.3),0 0 60px rgba(158,196,255,0.2)}
.start-menu{display:flex;flex-direction:row;gap:15px;align-items:center;justify-content:center;flex-wrap:wrap}
.menu-btn{background:linear-gradient(135deg,#1a2940,#0d1825);color:#9ec4ff;border:2px solid #2a4870;padding:12px 36px;font-size:clamp(14px,3.5vw,18px);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);min-width:200px}
.menu-btn:hover:not(:disabled){background:linear-gradient(135deg,#2a4870,#1a2940);border-color:#3a5880;box-shadow:0 6px 20px rgba(42,72,112,0.6),inset 0 1px 0 rgba(255,255,255,0.2);transform:translateY(-2px)}
.menu-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1)}
.menu-btn:disabled{opacity:0.4;cursor:not-allowed}
@media screen and (max-height:500px){.game-logo{max-width:150px;margin-bottom:10px}.game-title{font-size:clamp(20px,6vw,40px);margin-bottom:15px}.start-menu{gap:10px}.menu-btn{padding:10px 28px;font-size:clamp(12px,3vw,16px);min-width:160px}}
#app{display:flex;flex-direction:row;width:100%;height:100%}
#game-area{flex:5;background:#000;position:relative;overflow:hidden}
#game-canvas{width:100%;height:100%;display:block}
#sidebar{flex:0 0 250px;background:#111;color:#eee;padding:8px;display:flex;flex-direction:column;gap:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;transition:all 0.3s ease;position:relative}
#sidebar.hidden{flex:0 0 0;min-width:0;width:0;padding:0;overflow:hidden}
#sidebar::-webkit-scrollbar{width:0;height:0}
/* Minimap should always be square. Use aspect-ratio if available and a fallback height.
	 Ensure the sidebar becomes scrollable if content doesn't fit. */
#minimap{aspect-ratio:1/1; width:100%; max-width:320px; background:#050515;border:1px solid #333; display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:2px}
/* If aspect-ratio is not supported, keep a minimum height fallback */
@supports not (aspect-ratio: 1/1) {
	#minimap{height:150px}
}
#system-name-display{background:#0b0b12;padding:8px;border:1px solid #222;display:flex;flex-direction:column;gap:4px}
.system-name-label{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#7f96b8}
#current-system-name{font-size:14px;letter-spacing:0.16em;text-transform:uppercase;color:#e0ecff;font-weight:600}
#system-name-display{background:#0b0b12;padding:10px 12px;border:1px solid #222;margin-bottom:2px;text-align:center}
.system-name-label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:#6a7f9a;margin-bottom:4px}
#current-system-name{font-size:15px;letter-spacing:0.2em;text-transform:uppercase;color:#9ec4ff;font-weight:600}
#target-info,#weapons-panel{background:#0b0b12;padding:8px;border:1px solid #222;margin-bottom:2px}
#target-info{display:flex;flex-direction:column;gap:6px;position:relative}
#target-info h3{margin:0;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#9cb3d5}
#weapons-panel h3{margin:0;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#9cb3d5}
.target-distance{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;letter-spacing:0.04em;color:#4fe6b8;background:rgba(79,230,184,0.12);padding:3px 7px;border-radius:5px;border:1px solid rgba(79,230,184,0.25);pointer-events:none;z-index:10}
.target-summary{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.target-icon{width:58px;height:58px;border-radius:14px;border:1px solid #24354a;background:linear-gradient(140deg,#161e30,#0b111c);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 12px rgba(38,128,255,0.18) inset;flex-shrink:0}
.target-icon img{width:100%;height:100%;object-fit:contain;display:block}
.target-icon img.hidden{display:none}
.target-text{display:flex;flex-direction:column;gap:4px}
#target-name{font-size:16px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#f1f4ff}
#target-subtitle{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#9cb3d5}
#target-details{font-size:12px;line-height:1.5;color:#cbd6ea;min-height:48px}
#target-details em{display:inline-block;margin-top:6px;color:#75d4ff;font-style:normal;font-size:10px;letter-spacing:0.18em;text-transform:uppercase}
.target-stat-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.target-stat-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#ddd;flex-shrink:0}
.target-stat-bar{flex:1;height:10px;background:#0b0b0d;border:1px solid #222;border-radius:6px;overflow:hidden;min-width:80px}
.target-stat-fill{height:100%;transition:width 0.25s ease}
.target-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.target-actions button{flex:1 1 calc(50% - 4px);text-transform:uppercase;letter-spacing:0.14em;font-size:10px;border-radius:6px;padding:8px 10px;border:1px solid #243556;background:linear-gradient(135deg,#131c2f,#0b111d);color:#dce8ff;box-shadow:0 0 8px rgba(40,120,200,0.22) inset;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#hail-btn.full-width{flex-basis:100%}
#land-btn{display:none}
#land-btn.show-land{display:block}
#board-btn{display:none}
#board-btn.show-board{display:block}
.target-actions button:hover:not(:disabled){border-color:#3d78ff;box-shadow:0 0 12px rgba(61,120,255,0.28) inset;transform:translateY(-0.5px)}
.target-actions button.secondary{color:#b7cbff}
#land-btn.landing-ready{border-color:#4fe6b8;box-shadow:0 0 14px rgba(79,230,184,0.34) inset;background:linear-gradient(135deg,#142b26,#0d1f1a);color:#e9fff6}
#system-info{display:none}

#overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:11001}
#overlay.hidden{display:none}
/* Hide hyperjump panel when overlay is open */
body:has(#overlay:not(.hidden)) .hyperjump-panel{display:none !important}
#overlay-content{width:100%;height:100%;background:#0d0d14;color:#fff;padding:20px;overflow:auto}
.boarding-screen{max-width:720px;margin:auto;background:linear-gradient(160deg,rgba(12,16,28,0.95),rgba(6,8,16,0.98));border:1px solid rgba(90,140,220,0.45);box-shadow:0 28px 60px rgba(0,0,0,0.55);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:18px}
.boarding-hero{display:flex;gap:18px;align-items:flex-start}
.boarding-portrait{width:160px;height:160px;min-width:160px;border-radius:18px;border:1px solid rgba(90,140,220,0.4);background:radial-gradient(circle at 50% 30%,rgba(70,120,220,0.35),rgba(12,16,26,0.92));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 32px rgba(50,120,220,0.22) inset}
.boarding-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,0.55))}
.boarding-hero-text h2{margin:0;font-size:26px;letter-spacing:0.22em;text-transform:uppercase;color:#f1f6ff}
.boarding-hero-text p{margin:8px 0 0;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:#8fa4c6}
.boarding-briefing{font-size:14px;line-height:1.7;color:#dbe6ff;background:linear-gradient(150deg,rgba(22,28,44,0.85),rgba(16,22,34,0.82));border:1px solid rgba(80,120,200,0.28);padding:16px 18px;border-radius:14px;box-shadow:0 12px 24px rgba(0,0,0,0.28)}
.boarding-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;background:linear-gradient(140deg,rgba(18,24,40,0.92),rgba(12,16,28,0.9));border:1px solid rgba(70,110,190,0.28);padding:16px;border-radius:12px;color:#d4e4ff;font-size:14px}
.boarding-chance-list{margin:0;padding:0 0 0 18px;color:#a8c2ff;font-size:13px;letter-spacing:0.08em}
.boarding-chance-list li{margin:4px 0}
.boarding-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.boarding-actions button{background:linear-gradient(135deg,rgba(34,42,72,0.96),rgba(20,26,46,0.94));border:1px solid rgba(90,140,220,0.4);border-radius:10px;padding:12px 14px;color:#eef4ff;text-transform:uppercase;letter-spacing:0.18em;font-size:11px;cursor:pointer;box-shadow:0 0 16px rgba(60,110,210,0.24) inset;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.boarding-actions button:hover:not(:disabled){border-color:#a0c4ff;box-shadow:0 0 18px rgba(120,170,255,0.3) inset,0 0 12px rgba(0,0,0,0.35);transform:translateY(-2px)}
.boarding-result{min-height:56px;padding:12px 14px;border-radius:10px;background:linear-gradient(140deg,rgba(18,24,38,0.88),rgba(10,14,24,0.9));border:1px solid rgba(70,110,190,0.22);color:#bcd8ff;font-size:14px}
.boarding-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px}
.boarding-footer .boarding-choice-actions{order:1;flex:1 1 auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;min-width:260px}
.boarding-choice-actions{margin-top:0}
.boarding-choice{flex:0 1 auto;padding:12px 16px;border-radius:12px;text-transform:uppercase;letter-spacing:0.2em;font-size:11px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;color:#f8fbff;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.boarding-choice.take-player{background:linear-gradient(135deg,rgba(48,82,148,0.95),rgba(32,48,90,0.96));border-color:rgba(140,180,255,0.5);box-shadow:0 0 16px rgba(90,130,220,0.35) inset}
.boarding-choice.take-player:hover{box-shadow:0 0 20px rgba(140,180,255,0.42) inset,0 0 14px rgba(0,0,0,0.35);transform:translateY(-2px)}
.boarding-choice.add-escort{background:linear-gradient(135deg,rgba(36,128,108,0.95),rgba(20,84,72,0.96));border-color:rgba(120,216,188,0.45);box-shadow:0 0 16px rgba(80,200,160,0.28) inset}
.boarding-choice.add-escort:hover{box-shadow:0 0 20px rgba(120,216,188,0.38) inset,0 0 14px rgba(0,0,0,0.32);transform:translateY(-2px)}
.boarding-close{background:linear-gradient(135deg,rgba(90,40,50,0.92),rgba(60,20,30,0.95));border:1px solid rgba(200,80,110,0.5);color:#ffe5ed;padding:12px 18px;border-radius:999px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 16px rgba(150,40,70,0.28) inset;transition:transform .18s ease,box-shadow .18s ease;order:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.boarding-close:hover{box-shadow:0 0 20px rgba(210,70,110,0.35) inset,0 0 16px rgba(0,0,0,0.35);transform:translateY(-2px)}
.comms-screen{max-width:680px;margin:auto;background:linear-gradient(170deg,rgba(16,18,32,0.96),rgba(8,10,22,0.98));border:1px solid rgba(96,128,210,0.42);box-shadow:0 28px 60px rgba(0,0,0,0.55);border-radius:18px;padding:26px;color:#e5ecff;display:flex}
.comms-panel{display:flex;flex-direction:column;gap:18px;width:100%}
.comms-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comms-header-text h2{margin:0;font-size:24px;letter-spacing:0.24em;text-transform:uppercase;color:#f3f6ff}
.comms-header-text p{margin:6px 0 0;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#9fb4d8}
.comms-close{background:transparent;border:1px solid rgba(132,164,230,0.45);color:#dce7ff;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 0 14px rgba(80,120,200,0.28);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;min-width:44px}
.comms-close:hover{border-color:#a9c4ff;box-shadow:0 0 18px rgba(140,180,255,0.36);transform:scale(1.05)}
.comms-body{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.comms-dialogue{flex:1 1 320px;display:flex;flex-direction:column;gap:12px}
.comms-log{background:linear-gradient(160deg,rgba(14,18,32,0.92),rgba(10,12,24,0.94));border:1px solid rgba(72,108,192,0.42);border-radius:14px;padding:14px 16px;min-height:180px;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5}
.comms-line{padding:8px 10px;border-radius:10px;background:rgba(24,32,52,0.7);color:#dce6ff;box-shadow:0 0 12px rgba(20,32,60,0.45) inset}
.comms-line.player{align-self:flex-end;background:rgba(36,72,108,0.8);color:#9fe8ff;text-align:right}
.comms-line.remote{align-self:flex-start;background:rgba(84,36,44,0.82);color:#ffd8df}
.comms-line.system{align-self:center;background:rgba(30,36,56,0.6);color:#b5c5eb;font-style:italic;font-size:12px;text-align:center}
.comms-meta{background:linear-gradient(150deg,rgba(18,24,38,0.92),rgba(12,16,28,0.94));border:1px solid rgba(72,108,192,0.32);border-radius:12px;padding:12px 14px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#bcd4ff;display:flex;flex-direction:column;gap:4px}
.comms-meta p{margin:0}
.comms-meta span{color:#6fa0ff;margin-right:6px}
.comms-portrait{flex:0 0 200px;height:200px;border-radius:16px;border:1px solid rgba(90,140,220,0.42);background:radial-gradient(circle at 50% 35%,rgba(120,170,255,0.35),rgba(12,16,30,0.9));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 26px rgba(60,110,220,0.28) inset}
.comms-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,0.6))}
.comms-portrait-fallback{color:#9fb4d8;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;text-align:center;padding:12px}
.comms-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.comms-action{flex:1 1 160px;background:linear-gradient(135deg,rgba(110,32,44,0.94),rgba(74,18,28,0.96));border:1px solid rgba(220,88,120,0.52);border-radius:999px;padding:12px 18px;color:#ffe5ec;text-transform:uppercase;letter-spacing:0.2em;font-size:11px;cursor:pointer;box-shadow:0 0 16px rgba(200,70,110,0.26) inset,0 10px 16px rgba(0,0,0,0.28);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.comms-action:hover:not(:disabled){border-color:#ff9ab4;box-shadow:0 0 20px rgba(250,120,150,0.32) inset,0 12px 18px rgba(0,0,0,0.35);transform:translateY(-2px)}
.comms-action:disabled{opacity:0.5;cursor:not-allowed}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.78);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal.hidden{display:none}

/* Captain selection specific layout: center on desktop/tablet and make list scroll inside the modal */
.captain-selection{display:flex;align-items:center;justify-content:center;padding:36px}
.captain-selection .modal-content{max-width:760px;min-width:320px;width:min(760px,92vw);max-height:84vh;overflow:hidden;margin:0 auto}
.captain-selection .modal-body{overflow:auto;padding-right:6px}
.captain-selection .captain-list{max-height:56vh;overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:12px}
.captain-selection .escort-modal-empty{padding:28px 0}

/* Captain card visual polish when shown in the captain-selection modal */
.captain-selection .captain-card{
	background:linear-gradient(150deg,rgba(13,23,38,0.94),rgba(10,18,30,0.92));
	border:1px solid rgba(28,48,72,0.45);
	box-shadow:0 6px 18px rgba(0,0,0,0.5) inset,0 8px 24px rgba(0,0,0,0.4);
	display:grid;
	grid-template-columns:88px 1fr auto;
	gap:12px;
	align-items:center;
	padding:12px 14px;
	border-radius:12px;
	overflow:hidden;
}
.captain-selection .captain-card .escort-portrait{
	width:88px;min-width:88px;height:88px;border-radius:12px;border:1px solid rgba(60,110,170,0.45);
	background:radial-gradient(circle at 40% 30%,rgba(90,150,255,0.45),rgba(12,20,35,0.95));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 16px rgba(32,120,255,0.12) inset;flex-shrink:0}
.captain-selection .captain-card .escort-portrait img{width:100%;height:100%;object-fit:cover}
.captain-selection .captain-card .escort-info{min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.captain-selection .captain-card .escort-name{font-size:16px;font-weight:700;color:#f5f7ff;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.captain-selection .captain-card .captain-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 auto;min-width:0}
.captain-selection .captain-card .meta-item{display:inline-flex;align-items:center;gap:8px;background:rgba(10,18,28,0.55);padding:6px 8px;border-radius:8px;border:1px solid rgba(40,70,100,0.14);max-width:100%;box-sizing:border-box}
.captain-selection .captain-card .meta-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}
.captain-selection .captain-card .escort-controls{grid-column:3;display:flex;flex-direction:column;gap:8px;justify-content:center;margin-left:6px}
.captain-selection .captain-card .escort-controls button{width:48px;height:44px}

/* ensure the scrollbar stays inside the modal and is visible on dark background */
.captain-selection .captain-list::-webkit-scrollbar{width:12px}
.captain-selection .captain-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0f324f,#072036);border-radius:8px;border:3px solid rgba(0,0,0,0)}

/* Rotation Overlay */
.rotation-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;z-index:9000;backdrop-filter:blur(8px)}
.rotation-overlay.hidden{display:none}
.rotation-content{text-align:center;padding:40px;max-width:400px;color:#e5ecff}
.rotation-icon{font-size:80px;margin-bottom:20px;animation:rotate-pulse 2s ease-in-out infinite}
.rotation-content h2{font-size:28px;margin:0 0 16px 0;letter-spacing:0.1em;text-transform:uppercase;color:#f3f6ff}
.rotation-content p{font-size:16px;margin:0;color:#b8d0ff;line-height:1.6}
@keyframes rotate-pulse{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(90deg) scale(1.1)}}

.modal-content{background:#0c111d;border:1px solid #20334d;border-radius:12px;min-width:320px;max-width:520px;width:min(520px,90vw);max-height:80vh;padding:18px 18px 18px;display:flex;flex-direction:column;box-shadow:0 0 28px rgba(16,48,96,0.55)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-header h2{font-size:18px;margin:0;color:#d4e6ff;letter-spacing:0.18em;text-transform:uppercase}
#close-escort-modal{background:transparent;border:1px solid #3a557a;color:#d4e6ff;width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
#close-escort-modal:hover{border-color:#5b89ff;box-shadow:0 0 12px rgba(90,137,255,0.35);transform:scale(1.05)}
.modal-body{margin-top:12px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.modal-body::-webkit-scrollbar{width:6px}
.modal-body::-webkit-scrollbar-thumb{background:rgba(100,140,200,0.35);border-radius:6px}
.modal-body .escort-card{background:linear-gradient(150deg,rgba(13,23,38,0.94),rgba(10,18,30,0.92));border-color:#1f334a;box-shadow:0 0 16px rgba(32,120,255,0.24) inset,0 0 18px rgba(0,0,0,0.38);display:grid;grid-template-columns:74px 1fr;grid-template-rows:auto auto;gap:12px 16px;padding:14px 18px;border-radius:14px}
.modal-body .escort-card.has-controls{grid-template-columns:74px 1fr auto;grid-template-rows:auto auto;align-items:center}
.modal-body .escort-card:hover{box-shadow:0 0 22px rgba(70,150,255,0.32) inset,0 0 24px rgba(0,0,0,0.45)}
.escort-portrait{width:74px;min-width:74px;aspect-ratio:1/1;border-radius:10px;border:1px solid rgba(60,110,170,0.45);background:radial-gradient(circle at 40% 30%,rgba(90,150,255,0.45),rgba(12,20,35,0.95));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 16px rgba(32,120,255,0.24) inset}
.escort-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.55));transition:transform .25s ease}
.modal-body .escort-card:hover .escort-portrait img{transform:scale(1.05)}
.escort-info{display:flex;flex-direction:column;gap:8px;justify-content:center;align-self:stretch}
.escort-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.modal-body .escort-name{font-size:16px;font-weight:600;color:#f5f7ff;letter-spacing:0.16em;text-transform:uppercase;line-height:1.1}
.escort-health{display:flex;flex-direction:column;gap:6px}
.health-bar{height:8px;background:#222;border:1px solid #333;margin-top:6px;border-radius:999px;overflow:hidden}
.escort-mode{margin-top:1px;color:#94aac9;font-size:10px;letter-spacing:0.18em;text-transform:uppercase}
.escort-controls{grid-column:2 / span 2;display:flex;justify-content:flex-start;gap:8px;margin-top:2px}
.escort-controls button{width:48px;height:42px;border-radius:10px;padding:0;border:1px solid #243556;background:linear-gradient(145deg,rgba(20,33,56,0.95),rgba(10,18,30,0.92));box-shadow:0 0 8px rgba(48,128,255,0.25) inset;color:#d7e6ff;display:flex;align-items:center;justify-content:center}
.modal-body .escort-controls button:hover:not(:disabled){border-color:#4b88ff;box-shadow:0 0 14px rgba(75,136,255,0.35) inset}
.escort-modal-empty{color:#97acc8;font-size:13px;text-align:center;letter-spacing:0.08em;text-transform:uppercase;padding:18px 0}
button{background:#1a1a24;color:#fff;border:1px solid #333;padding:6px 8px;cursor:pointer}
button:disabled{opacity:0.4;cursor:not-allowed}
button.primary{background:linear-gradient(135deg,#1f324d,#15233a);border-color:#3560a6;color:#e6f2ff;box-shadow:0 0 10px rgba(44,100,200,0.22) inset}
button.primary:hover:not(:disabled){border-color:#4c82e6;box-shadow:0 0 14px rgba(76,130,230,0.3) inset}
button.secondary{background:linear-gradient(135deg,#171c2c,#0e121d);border-color:#293c5d;color:#cfe0ff}
button.secondary:hover:not(:disabled){border-color:#3a5c8a;box-shadow:0 0 10px rgba(58,92,138,0.26) inset}
#board-btn{display:none;margin-top:0}
#board-btn.show-board{display:block;background:linear-gradient(135deg,#31151f,#1d0d14);border-color:#6d2c3f;color:#ffd9e5;box-shadow:0 0 12px rgba(130,40,60,0.25) inset}
#board-btn.show-board:hover{border-color:#9e3d54;box-shadow:0 0 16px rgba(158,61,84,0.32) inset}

#fleet-section{display:flex;flex-direction:column;gap:2px;position:relative;margin-bottom:2px}
.fleet-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px}
.escort-manager-button{padding:3px 9px;border-radius:4px;border:1px solid #1f334a;background:linear-gradient(135deg,#121b2b,#0d1220);color:#b8d8ff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 8px rgba(32,120,255,0.2) inset;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.escort-manager-button:hover:not(:disabled){border-color:#3a7cff;box-shadow:0 0 12px rgba(58,124,255,0.3) inset;transform:translateY(-0.5px)}
.escort-manager-button:disabled{opacity:.45;cursor:not-allowed}
.escort-card{background:#0b0b12;padding:6px;border:1px solid #222;display:flex;flex-direction:column;border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,0.35)}
.escort-row{display:flex;align-items:center;justify-content:space-between}
.escort-name{font-size:12px}
.escort-mode{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8ea4c6}
.health-bar{height:8px;background:#222;border:1px solid #333;margin-top:6px;border-radius:999px;overflow:hidden}
.health-fill{height:100%;background:linear-gradient(90deg,#0ff,#0a8)}
.escort-controls{display:flex;gap:4px;margin-top:6px}
.fleet-command-card{background:linear-gradient(135deg,rgba(11,17,28,0.95),rgba(6,11,21,0.92));border:1px solid #1f334a;box-shadow:0 0 16px rgba(32,128,255,0.18);padding:8px;background:#0b0b12;border:1px solid #222}
.fleet-command-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fleet-command-header h3{margin:0;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#9cb3d5}
.fleet-command-controls{display:flex;gap:4px;margin-top:0}
.fleet-command-controls button{flex:1;min-width:0;text-transform:uppercase;letter-spacing:0.12em;font-size:11px;padding:8px 6px;border-radius:4px;border:1px solid #1f334a;background:linear-gradient(140deg,#152237,#0d1625);box-shadow:0 0 8px rgba(50,120,255,0.18) inset;color:#b8d8ff}
.fleet-command-controls button:hover:not(:disabled){border-color:#3a7cff;color:#e8f3ff;box-shadow:0 0 12px rgba(58,124,255,0.25) inset}
.fleet-command-controls button:disabled{opacity:0.5}

/* Active Missions Panel */
.active-missions-panel{background:#0b0b12;padding:8px;border:1px solid #222;margin-bottom:2px}
.active-missions-panel h3{margin:0 0 8px 0;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#9cb3d5}
#active-missions-list{display:flex;flex-direction:column;gap:6px}
.active-mission-compact{background:linear-gradient(135deg,rgba(18,26,42,0.9),rgba(12,18,32,0.85));border:1px solid #1f334a;border-radius:6px;padding:8px;box-shadow:0 0 8px rgba(32,120,255,0.15) inset}
.active-mission-compact:hover{border-color:#2d4a68;box-shadow:0 0 12px rgba(50,140,255,0.22) inset}
.mission-compact-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.mission-compact-icon{font-size:14px;line-height:1}
.mission-compact-type{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#7a90b0;font-weight:600}
.mission-compact-dest{font-size:11px;color:#b8d0ff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission-compact-pay{font-size:10px;color:#4fe6b8;font-weight:600;letter-spacing:0.08em}

/* map icon button positioned top-right inside minimap */
#minimap .map-icon{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:4px;border:1px solid #333;background:linear-gradient(#1b1b24,#0f0f14);display:flex;align-items:center;justify-content:center;color:#bfe;cursor:pointer}
#minimap .map-icon::after{content:'🗺️';font-size:16px}

/* status bars under minimap */
#map-status{display:flex;flex-direction:column;gap:6px;background:#0b0b12;padding:8px;border:1px solid #222;margin-bottom:2px}
.stat-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.stat-icon{width:22px;display:flex;align-items:center;justify-content:center;color:#ddd}
.stat-bar{flex:1;height:12px;background:#0b0b0d;border:1px solid #222;border-radius:6px;overflow:hidden;min-width:80px}
.stat-fill{height:100%;width:100%;transition:width 0.25s ease}
.stat-fill{background:linear-gradient(90deg,#3ad,#08f)}
/* specific stat colors */
#bar-shields{background:linear-gradient(90deg,#3ad,#08f)}
#bar-armor{background:linear-gradient(90deg,#d48,#a33)}
#bar-energy{background:linear-gradient(90deg,#ffd66b,#ffb347)}
.stat-row svg{display:block}

#player-economy{background:#0b0b12;padding:10px 12px;border:1px solid #222;margin-bottom:2px;text-align:center;display:flex;flex-direction:column;gap:4px}
.economy-label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:#6a7f9a;margin-bottom:0}
.economy-value{font-size:15px;letter-spacing:0.2em;text-transform:uppercase;color:#9ec4ff;font-weight:600}

/* Cargo card: match spacing/typography of Credits and Date cards so the sidebar looks consistent */
.cargo-card{background:#0b0b12;padding:10px 12px;border:1px solid #222;margin-bottom:2px;text-align:center;display:flex;flex-direction:column;gap:4px}
.cargo-card .cargo-label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:#6a7f9a;margin-bottom:5px}
.cargo-card .cargo-value{font-size:15px;letter-spacing:0.2em;text-transform:uppercase;color:#9ec4ff;font-weight:600}

.economy-value.negative{color:#ff7b92}

#weapons-panel{position:relative}
.weapons-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.weapon-system-controls{display:flex;align-items:center;gap:8px}
.weapon-status-dot{width:16px;height:16px;border-radius:50%;border:2px solid #24384f;box-shadow:0 0 10px rgba(0,0,0,0.45);background:#4a5568;transition:box-shadow .2s ease,background .2s ease,border-color .2s ease}
.weapon-status-dot.status-online{background:#ff4d65;border-color:#ff8b9b;box-shadow:0 0 12px rgba(255,77,101,.55)}
.weapon-status-dot.status-standby{background:#ffd35a;border-color:#ffe49c;box-shadow:0 0 12px rgba(255,211,90,.45)}
.weapon-status-dot.status-disabled{background:#5f6c7d;border-color:#8a98ac;box-shadow:0 0 10px rgba(130,144,162,.35)}
#weapon-systems-toggle{padding:3px 9px;text-transform:uppercase;letter-spacing:.12em;font-size:10px;border-radius:4px;border:1px solid #284060;background:linear-gradient(135deg,#162238,#101624);box-shadow:0 0 6px rgba(40,120,200,0.28) inset;color:#d8e7ff;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .2s ease}
#weapon-systems-toggle:hover:not(:disabled){border-color:#4b88ff;box-shadow:0 0 10px rgba(75,136,255,0.35) inset;transform:translateY(-0.5px)}
#weapon-systems-toggle:disabled{opacity:.45;cursor:not-allowed}
#weapons-panel.systems-offline #weapons-list button{opacity:.55}
#weapons-panel.systems-offline h3{color:#ffb7c3;text-shadow:0 0 6px rgba(255,120,140,.4)}
#weapons-list button.weapon-disabled{position:relative}
#weapons-list button.weapon-disabled::after{content:"SYS";position:absolute;right:6px;top:4px;font-size:9px;letter-spacing:.18em;color:rgba(255,190,205,.7)}
#weapons-list button.weapon-on-cooldown{filter:saturate(0.6)}
#weapons-list{display:flex;gap:6px;flex-wrap:wrap}
#weapons-list button{width:48px;height:48px;min-width:48px;padding:0;border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid rgba(80,120,190,0.35);box-shadow:0 0 8px rgba(40,120,200,0.22) inset;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#weapons-list button:hover:not(:disabled){border-color:#4b88ff;box-shadow:0 0 12px rgba(75,136,255,0.35) inset;transform:scale(1.05)}
#weapons-list button:disabled{opacity:0.5;cursor:not-allowed}
#weapons-list button.weapon-on-cooldown{filter:grayscale(0.7) brightness(0.7)}
#weapons-list button.out-of-ammo{opacity:0.35;cursor:not-allowed;border-color:#880000;filter:grayscale(1) brightness(0.5)}

/* Alpha welcome modal specific styling */
.alpha-modal{display:flex;align-items:center;justify-content:center;padding:40px}
.alpha-modal .modal-content{max-width:880px;padding:20px;border-radius:14px;border:1px solid rgba(110,160,230,0.18);box-shadow:0 30px 80px rgba(0,0,0,0.6);/* make modal scrollable on small viewports to avoid cutoff */max-height:calc(100vh - 80px);overflow:auto;margin:0 auto}
.alpha-modal .boarding-hero{align-items:center;gap:18px}
.alpha-modal .boarding-portrait{width:120px;height:120px;min-width:120px;border-radius:14px}
.alpha-modal .boarding-hero-text h2{font-size:20px;letter-spacing:0.12em;margin:0;color:#eaf6ff}
.alpha-modal .boarding-hero-text p{margin:6px 0 0 0;color:#a8cde9}
.alpha-modal .boarding-briefing{font-size:13px;color:#dcecff;padding:14px;border-radius:10px}
.alpha-modal .boarding-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.alpha-modal .boarding-summary strong{display:block;margin-bottom:6px;color:#cfe8ff}
.alpha-modal .boarding-chance-list{list-style:disc;margin:6px 0 0 18px;padding:0;color:#b8d9ff}
.alpha-modal .boarding-footer{justify-content:space-between;margin-top:14px}
.alpha-modal .menu-btn{min-width:160px}
@media screen and (max-width:720px){
    	/* Anchor modal to top, allow vertical page scroll but prevent horizontal overflow */
    	.alpha-modal{padding:18px;align-items:flex-start;overflow-x:hidden}
    	/* Don't create nested scrollbars; clamp modal width to viewport minus padding/safe-area
    	   so it can't cause horizontal scroll. Keep vertical flow (no inner scrollbar). */
    	.alpha-modal .modal-content{max-width:92vw;max-height:none;overflow:visible;width:min(92vw,calc(100vw - 36px));box-sizing:border-box;margin:0}
    	/* Ensure media inside modal can't overflow horizontally */
    	.alpha-modal .modal-content img, .alpha-modal .modal-content video, .alpha-modal .modal-content iframe{max-width:100%;height:auto}
    	.alpha-modal .boarding-summary{grid-template-columns:1fr;gap:10px}
    	.alpha-modal .boarding-portrait{width:88px;height:88px;min-width:88px}
}

/* small logo placed into alpha modal header */
.alpha-modal .alpha-logo{width:56px;height:auto;margin-right:12px;filter:drop-shadow(0 6px 18px rgba(80,140,220,0.18));align-self:center}

#weapon-status-banner{position:absolute;top:12%;left:50%;transform:translate(-50%,-20%);padding:14px 38px;border-radius:999px;border:1px solid #2ac4ff;background:linear-gradient(120deg,rgba(6,18,38,.72),rgba(14,30,54,.85));color:#bff;font-size:18px;letter-spacing:.32em;text-transform:uppercase;box-shadow:0 0 24px rgba(38,220,255,.35),0 0 12px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#weapon-status-banner.show{animation:weapon-banner-pop 1.4s ease forwards}
#weapon-status-banner.variant-online{border-color:#28e5ff;color:#d5ffff;box-shadow:0 0 32px rgba(40,229,255,.35)}
#weapon-status-banner.variant-offline{border-color:#ff5a78;color:#ffe3f0;box-shadow:0 0 26px rgba(255,80,120,.35)}
#weapon-status-banner.variant-warning{border-color:#ffd35a;color:#fff2c1;box-shadow:0 0 26px rgba(255,208,96,.35)}
#weapon-status-banner.variant-locked{border-color:#ffa94a;color:#ffe9c7;box-shadow:0 0 26px rgba(255,168,74,.35)}
#weapon-status-banner.variant-ready{border-color:#5fffbe;color:#dcfff0;box-shadow:0 0 26px rgba(80,255,200,.32)}
#weapon-status-banner.variant-info{border-color:#2ac4ff;color:#cbf5ff}

.landing{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,10,18,0.86);backdrop-filter:blur(10px);z-index:2500;padding:24px}
.landing.hidden{display:none}
.landing-content{width:min(900px,92vw);max-height:90vh;background:linear-gradient(180deg,rgba(10,16,26,0.97),rgba(6,10,18,0.98));border:1px solid rgba(64,120,200,0.35);border-radius:22px;box-shadow:0 28px 60px rgba(8,14,24,0.55);display:flex;flex-direction:column;overflow:hidden;position:relative}
.landing-visual{position:relative;height:260px;background:radial-gradient(circle at 50% 30%,rgba(42,72,120,0.65),rgba(10,16,28,0.95));overflow:hidden}
.landing-credits{position:absolute;top:18px;right:22px;font-size:18px;font-weight:600;color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,0.6),0 2px 4px rgba(0,0,0,0.8);letter-spacing:0.05em;z-index:10;background:rgba(4,8,16,0.7);padding:8px 14px;border-radius:8px;border:1px solid rgba(74,222,128,0.3)}
.landing-credits-amount{font-variant-numeric:tabular-nums}
#landing-image{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.92);opacity:0.88}
#landing-image.hidden{display:none}
.landing-header{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;background:linear-gradient(180deg,rgba(4,8,16,0),rgba(4,8,16,0.85))}
.landing-header h2{margin:0;font-size:24px;letter-spacing:0.28em;text-transform:uppercase;color:#f2f7ff;text-shadow:0 0 16px rgba(90,160,255,0.45)}
.landing-header p{margin:6px 0 0;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:#a8c0e8}
.landing-body{display:flex;gap:24px;padding:24px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(12,18,30,0.96),rgba(7,11,20,0.98));flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0}
.landing-controls{flex:0 0 220px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:10}
.landing-controls button{width:100%;text-align:left;justify-content:flex-start;gap:10px;padding:12px 16px;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;border-radius:10px;border:1px solid rgba(40,60,96,0.6);background:linear-gradient(140deg,rgba(14,20,32,0.97),rgba(10,16,28,0.9));color:#dbe7ff;box-shadow:0 0 10px rgba(40,120,200,0.22) inset;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;display:flex;align-items:center}
.landing-controls button:hover:not(:disabled){border-color:#4b88ff;box-shadow:0 0 16px rgba(75,136,255,0.32) inset,0 0 16px rgba(0,0,0,0.4);transform:translateX(3px)}
.landing-controls button.active{border-color:#4fe6b8;box-shadow:0 0 18px rgba(79,230,184,0.4) inset,0 0 14px rgba(64,200,164,0.28);background:linear-gradient(140deg,rgba(14,36,32,0.95),rgba(10,26,22,0.92));color:#f0fff8}
.landing-controls button[data-action="leave"]{margin-top:auto;background:linear-gradient(140deg,rgba(30,42,70,0.98),rgba(18,28,46,0.95));border-color:#4c6eff;color:#eff4ff}
.landing-controls button[data-action="leave"]:hover{border-color:#6e8eff;box-shadow:0 0 14px rgba(110,142,255,0.32) inset}
.landing-description{flex:1;min-width:260px;background:linear-gradient(160deg,rgba(16,24,40,0.96),rgba(12,20,34,0.92));border:1px solid rgba(32,56,96,0.55);border-radius:14px;padding:18px 20px;box-shadow:0 0 18px rgba(18,36,64,0.45) inset;color:#d9e6ff;display:flex;flex-direction:column;gap:12px;overflow:hidden;position:relative}
.landing-description p{margin:0;font-size:13px;line-height:1.6}
.landing-activity{color:#9bdce6;font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.landing-module{display:none;flex:1 1 auto;overflow:auto;margin-top:4px;min-height:0}
.landing-module.active{display:flex;flex-direction:column;min-height:0;overflow:auto}
.landing-services{display:flex;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(60,100,160,0.25)}
.service-btn{flex:1;padding:10px 16px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;border-radius:8px;border:1px solid rgba(79,230,184,0.4);background:linear-gradient(140deg,rgba(14,36,32,0.92),rgba(10,26,22,0.88));color:#d0fff0;box-shadow:0 0 12px rgba(79,230,184,0.25) inset;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;cursor:pointer}
.service-btn:hover:not(:disabled){border-color:#4fe6b8;box-shadow:0 0 18px rgba(79,230,184,0.35) inset,0 0 12px rgba(64,200,164,0.24);transform:translateY(-2px)}
.service-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Custom scrollbar styling for dark techy theme */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(10,16,28,0.8);border-radius:5px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(40,80,140,0.7),rgba(30,60,110,0.7));border-radius:5px;border:1px solid rgba(60,100,160,0.3)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(50,100,170,0.85),rgba(40,80,140,0.85));border-color:rgba(75,136,255,0.5)}
::-webkit-scrollbar-corner{background:rgba(10,16,28,0.8)}

.outfitter-panel{width:100%;display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;max-height:100%}
.outfitter-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;max-height:220px}
.outfitter-top-portrait{display:flex;align-items:center;justify-content:center;height:200px}
.outfitter-top-info{display:flex;flex-direction:column;gap:6px;height:200px;overflow:auto}
.outfitter-detail{background:linear-gradient(170deg,rgba(20,28,48,0.95),rgba(12,18,36,0.9));border:1px solid rgba(54,88,150,0.45);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;box-shadow:0 18px 28px rgba(4,8,16,0.35) inset}
.outfitter-detail::-webkit-scrollbar{display:none}

/* For the shipyard panel, allow a visible scrollbar for long ship descriptions */
.shipyard-grid-section .outfitter-detail{scrollbar-width:auto}
.shipyard-grid-section .outfitter-detail::-webkit-scrollbar{display:block;width:10px}
.shipyard-grid-section .outfitter-detail::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(60,100,160,0.4),rgba(40,80,140,0.4));border-radius:8px}
.outfitter-grid-section{flex:0 1 auto;min-height:0;background:linear-gradient(165deg,rgba(16,24,40,0.94),rgba(10,16,28,0.92));border:1px solid rgba(48,84,140,0.4);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden}
.shipyard-grid-section{flex:0 1 auto;min-height:0;background:linear-gradient(165deg,rgba(16,24,40,0.94),rgba(10,16,28,0.92));border:1px solid rgba(48,84,140,0.4);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden}
.outfitter-items-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible}
.outfitter-item-button{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;overflow:hidden;border:1px solid rgba(80,120,190,0.28);border-radius:12px;background:linear-gradient(180deg,rgba(18,26,46,0.94),rgba(10,14,24,0.92));transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;min-height:100px;aspect-ratio:1/1;padding:0;margin-bottom:10px;background-size:cover;background-position:center;background-repeat:no-repeat}
.outfitter-item-button:hover{border-color:rgba(130,200,255,0.7);box-shadow:0 0 14px rgba(90,150,255,0.3);transform:translateY(-1px)}
.outfitter-item-button.selected{border-color:rgba(110,220,185,0.85);box-shadow:0 0 16px rgba(110,220,185,0.28)}
.outfitter-item-icon{display:none}
.outfitter-item-icon img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.outfitter-item-meta{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 14px;gap:6px;background:linear-gradient(to bottom,rgba(8,12,22,0),rgba(8,12,22,0.65) 40%,rgba(8,12,22,0.75))}
.outfitter-item-name{font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#f1f5ff;margin:0;text-align:center;line-height:1.2}
.outfitter-item-stats{display:flex;flex-direction:column;gap:2px;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(190,210,255,0.8);text-align:center}
.outfitter-item-price{font-size:0.62rem;color:rgba(140,200,255,0.94)}
.outfitter-item-owned{font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(160,210,255,0.75)}
.outfitter-item-owned:empty{display:none}
.outfitter-portrait{background:radial-gradient(circle at 50% 30%,rgba(120,170,255,0.3),rgba(18,24,42,0.92));border:1px solid rgba(64,110,190,0.42);border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;width:100%;height:100%;aspect-ratio:1/1}
.outfitter-portrait::after{content:'';position:absolute;inset:0;box-shadow:0 0 34px rgba(90,150,255,0.24) inset}
.outfitter-portrait img{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 12px 22px rgba(0,0,0,0.55))}
.outfitter-portrait.fallback{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#9fb4d8;padding:16px;text-align:center}
.outfitter-portrait-placeholder{opacity:0.45;border:1px dashed rgba(120,170,255,0.35)}
.outfitter-meta{display:flex;flex-direction:column;gap:6px;overflow:hidden}
.outfitter-meta h3{margin:0;font-size:0.95rem;letter-spacing:0.18em;text-transform:uppercase;color:#f5f8ff}
.outfitter-meta p{margin:0;font-size:0.7rem;line-height:1.4;color:#c9d8ff}
.outfitter-stats{display:flex;flex-wrap:wrap;gap:6px;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:#9fb8ff}
.outfitter-stats span{color:#ffd782}
.outfitter-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.outfitter-buttons{display:flex;flex-direction:column;gap:4px}
.outfitter-buttons button{width:100%;padding:8px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:0.18em;font-size:0.68rem;border:1px solid rgba(80,120,190,0.42);background:linear-gradient(135deg,rgba(44,64,104,0.96),rgba(26,36,56,0.94));color:#f5f8ff;box-shadow:0 0 12px rgba(70,120,200,0.25) inset,0 0 10px rgba(0,0,0,0.28);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.outfitter-buttons button:hover:not(:disabled){border-color:#a7d6ff;box-shadow:0 0 16px rgba(160,210,255,0.3) inset,0 10px 14px rgba(0,0,0,0.3);transform:translateY(-1px)}
.outfitter-buttons button.sell{background:linear-gradient(135deg,rgba(72,44,64,0.96),rgba(36,22,32,0.94));border-color:rgba(160,96,130,0.45)}
.outfitter-buttons button.sell:hover:not(:disabled){border-color:#f39cca;box-shadow:0 0 16px rgba(243,156,202,0.3) inset,0 10px 14px rgba(0,0,0,0.3)}
.outfitter-status{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:#9fb8ff;text-align:center;padding:8px 10px;background:linear-gradient(140deg,rgba(20,28,48,0.76),rgba(12,18,34,0.78));border-radius:12px;border:1px solid rgba(50,84,140,0.3)}
.outfitter-status.variant-success{color:#8ff0b4}
.outfitter-status.variant-error{color:#ff95b0}
.outfitter-empty{font-size:0.8rem;letter-spacing:0.16em;text-transform:uppercase;color:#92aac0;padding:20px 16px;text-align:center;background:linear-gradient(140deg,rgba(20,28,48,0.94),rgba(12,18,34,0.9));border:1px solid rgba(50,84,140,0.28);border-radius:14px}
.outfitter-empty-compact{padding:12px 6px;background:transparent;border:none;color:#7f96b8;text-align:left}
body.landing-active{overflow:hidden}

/* DEBUG: Force landing overlay to very top and make it visually obvious while diagnosing
	Remove or comment out this block after debugging. */
#landing-screen{z-index:99999 !important;outline:4px solid rgba(255,0,0,0.45) !important}

/* Captain selection modal compact metadata styling */
#overlay-content.captain-selection .modal-content{max-width:640px;padding:12px}
#overlay-content.captain-selection .escort-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;margin-bottom:10px}
#overlay-content.captain-selection .escort-portrait{width:56px;height:56px;min-width:56px;border-radius:10px;font-size:20px;display:flex;align-items:center;justify-content:center}
#overlay-content.captain-selection .escort-info{flex:1;display:flex;flex-direction:column;gap:6px}
#overlay-content.captain-selection .escort-name{font-size:14px;font-weight:700;color:#eef6ff}
#overlay-content.captain-selection .captain-meta{display:flex;gap:8px;align-items:center;color:#9fb8ff;font-size:12px;margin-top:2px;flex:1 1 auto;min-width:0}
#overlay-content.captain-selection .meta-item{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,0.02);padding:2px 2px;border-radius:8px;max-width:100%;box-sizing:border-box}
#overlay-content.captain-selection .meta-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:#9fb8ff}
#overlay-content.captain-selection .meta-text{font-size:8px;color:#cfe8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}
#overlay-content.captain-selection .escort-controls{display:flex;flex-direction:row;gap:8px}
#overlay-content.captain-selection .escort-controls button{padding:8px 10px;font-size:12px;border-radius:8px}

/* Captain list and card styling */
#overlay-content.captain-selection .captain-list{
	display:flex;
	flex-direction:column;
	gap:10px;
	max-height:60vh;
	overflow:auto;
	padding-right:6px;
}

/* Sleeker, tighter captain card layout for mobile and desktop */
#overlay-content.captain-selection .captain-card{
	display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(120,160,220,0.10);
	background:linear-gradient(180deg,rgba(8,14,28,0.96),rgba(6,10,18,0.99));box-shadow:inset 0 -2px 6px rgba(0,0,0,0.35),0 2px 8px rgba(10,18,34,0.14);transition:transform .14s ease,box-shadow .14s ease;border-left:3px solid rgba(80,140,255,0.18);
	min-width:0;max-width:520px;width:100%;margin:0 auto 10px auto;min-height:86px;align-items:stretch;
}

#overlay-content.captain-selection .captain-card:hover{transform:translateY(-4px);box-shadow:inset 0 -2px 12px rgba(0,0,0,0.6),0 12px 30px rgba(40,80,160,0.22);border-left-color:rgba(80,200,255,0.85)}

#overlay-content.captain-selection .captain-card .escort-portrait{width:auto;height:auto;min-width:84px;border-radius:10px;background:linear-gradient(135deg,rgba(30,50,90,0.94),rgba(10,16,32,0.99));font-size:36px;color:#dff4ff;border:1px solid rgba(90,140,220,0.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}

#overlay-content.captain-selection .captain-card .escort-info{flex:1;display:flex;flex-direction:column;min-width:0;padding-top:6px}

#overlay-content.captain-selection .captain-card .escort-name{font-size:15px;font-weight:700;color:#eaf6ff;letter-spacing:0.05em;white-space:nowrap;overflow:visible;text-overflow:ellipsis}

#overlay-content.captain-selection .captain-card .captain-meta{margin-top:4px;display:flex;gap:2px;align-items:center;font-size:11px;flex-wrap:wrap;flex:1 1 auto;min-width:0}

#overlay-content.captain-selection .captain-card .escort-controls{display:flex;flex-direction:column;gap:8px;margin-left:auto;align-items:center;justify-content:center}

#overlay-content.captain-selection .captain-card .escort-controls button{width:44px;height:36px;padding:6px;border-radius:8px;background:linear-gradient(135deg,rgba(24,38,66,0.98),rgba(12,18,34,0.98));border:1px solid rgba(80,120,190,0.22);color:#eaf6ff;display:flex;align-items:center;justify-content:center}

#overlay-content.captain-selection .captain-card .escort-controls button svg{display:block}

#overlay-content.captain-selection .captain-card .escort-controls button.secondary{background:linear-gradient(135deg,rgba(44,20,30,0.98),rgba(22,12,18,0.98));border-color:rgba(160,80,110,0.22)}
#overlay-content.captain-selection .captain-list{padding:0 2vw;max-width:480px;margin:0 auto;}
@media (max-width: 600px){
 	#overlay-content.captain-selection .captain-card{padding:8px 8px;gap:10px;max-width:98vw;min-height:64px}
 	#overlay-content.captain-selection .captain-card .escort-portrait{width:64px;height:64px;min-width:64px;font-size:26px;border-radius:8px}
 	#overlay-content.captain-selection .captain-card .escort-name{font-size:14px}
 	#overlay-content.captain-selection .captain-card .captain-meta{font-size:12px}
 	#overlay-content.captain-selection .captain-card .escort-controls{flex-direction:column}
 	#overlay-content.captain-selection .captain-card .escort-controls button{width:40px;height:34px;padding:6px}

	/* Mobile: simplify captain list to only show name, date and credits plus play/delete */
	#overlay-content.captain-selection .captain-card .escort-portrait{display:none}
	#overlay-content.captain-selection .captain-card .captain-meta .meta-item{display:none}
	/* show only credits meta chip on small screens (hide date to reduce clutter) */
	#overlay-content.captain-selection .captain-card .captain-meta .meta-item.meta-credits{display:inline-flex}
	/* ensure controls remain visible and sized appropriately */
	#overlay-content.captain-selection .captain-card .escort-controls{display:flex;flex-direction:row;gap:8px;margin-left:auto;align-items:center}
	#overlay-content.captain-selection .captain-card .escort-controls button{width:44px;height:36px}
}

/* ensure the modal body scrollbars are visible but subtle */
#overlay-content.captain-selection .captain-list::-webkit-scrollbar{width:10px}
#overlay-content.captain-selection .captain-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(60,100,160,0.4),rgba(40,80,140,0.4));border-radius:8px}

@keyframes weapon-banner-pop{
	0%{opacity:0;transform:translate(-50%,-30%) scale(.94)}
	12%{opacity:1;transform:translate(-50%,-40%) scale(1)}
	55%{opacity:.86;transform:translate(-50%,-42%) scale(1.02)}
	100%{opacity:0;transform:translate(-50%,-20%) scale(.98)}
}

/* Galactic Map Button in Game Area */
#open-galaxy-btn{position:absolute;top:16px;right:16px;padding:10px 18px;background:linear-gradient(135deg,rgba(28,42,72,0.92),rgba(16,24,44,0.94));border:1px solid rgba(100,140,220,0.48);border-radius:8px;color:#e0ecff;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 16px rgba(60,110,210,0.26) inset,0 4px 14px rgba(0,0,0,0.35);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;z-index:110;pointer-events:auto;touch-action:manipulation}
#open-galaxy-btn:hover{border-color:#9ec4ff;box-shadow:0 0 20px rgba(120,170,255,0.32) inset,0 6px 16px rgba(0,0,0,0.4);transform:translateY(-2px)}

#toggle-sidebar-btn{position:absolute;top:60px;right:16px;padding:8px 14px;background:linear-gradient(135deg,rgba(28,42,72,0.92),rgba(16,24,44,0.94));border:1px solid rgba(100,140,220,0.48);border-radius:8px;color:#e0ecff;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 16px rgba(60,110,210,0.26) inset,0 4px 14px rgba(0,0,0,0.35);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;z-index:110;pointer-events:auto;touch-action:manipulation}
#toggle-sidebar-btn:hover{border-color:#9ec4ff;box-shadow:0 0 20px rgba(120,170,255,0.32) inset,0 6px 16px rgba(0,0,0,0.4);transform:translateY(-2px)}

/* Hyperjump Panel */
.hyperjump-panel{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:115;display:none;flex-direction:column;align-items:center;gap:8px;pointer-events:auto}
.hyperjump-info{background:linear-gradient(135deg,rgba(18,28,48,0.94),rgba(12,20,36,0.96));border:1px solid rgba(100,140,220,0.4);border-radius:8px;padding:8px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:220px;box-shadow:0 0 16px rgba(60,110,210,0.24) inset,0 4px 12px rgba(0,0,0,0.4);pointer-events:none}
.hyperjump-info .destination-label{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(150,190,255,0.7);font-weight:300}
.hyperjump-info .destination-name{font-size:16px;font-weight:500;letter-spacing:0.08em;color:#e9f4ff;text-shadow:0 0 8px rgba(120,180,255,0.4)}
.hyperjump-info .hyperjump-status{font-size:11px;letter-spacing:0.12em;color:rgba(120,216,188,0.85);font-weight:400}
.hyperjump-info .hyperjump-status.blocked{color:rgba(255,180,120,0.85)}
#engage-jump-btn{padding:14px 28px;background:linear-gradient(135deg,rgba(40,128,108,0.95),rgba(24,84,72,0.96));border:2px solid rgba(120,216,188,0.55);border-radius:10px;color:#e9fff6;font-size:15px;letter-spacing:0.24em;text-transform:uppercase;font-weight:600;cursor:pointer;box-shadow:0 0 20px rgba(80,200,160,0.32) inset,0 6px 16px rgba(0,0,0,0.4);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:engage-pulse 2s ease-in-out infinite;touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto;display:flex;align-items:center;gap:8px;min-width:180px;justify-content:center}
#engage-jump-btn .btn-icon{font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,255,100,0.6))}
#engage-jump-btn .btn-text{letter-spacing:0.24em}
#engage-jump-btn:hover:not(:disabled){border-color:#8ff0b4;box-shadow:0 0 28px rgba(140,230,200,0.42) inset,0 8px 20px rgba(0,0,0,0.45);transform:translateY(-3px) scale(1.02)}
#engage-jump-btn:active:not(:disabled){transform:translateY(-1px) scale(0.98)}
#engage-jump-btn:disabled{opacity:0.5;cursor:not-allowed;animation:none;background:linear-gradient(135deg,rgba(40,50,60,0.8),rgba(30,38,48,0.85));border-color:rgba(80,100,120,0.4);pointer-events:none}
#engage-jump-btn:disabled .btn-icon{filter:none}

@keyframes engage-pulse{
	0%,100%{box-shadow:0 0 20px rgba(80,200,160,0.32) inset,0 6px 16px rgba(0,0,0,0.4)}
	50%{box-shadow:0 0 30px rgba(120,230,200,0.46) inset,0 6px 16px rgba(0,0,0,0.4),0 0 24px rgba(79,230,184,0.35)}
}

/* Zoom Controls */
.zoom-controls{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:4px;z-index:110;display:none}
.zoom-btn{width:44px;height:44px;background:linear-gradient(135deg,rgba(28,42,72,0.92),rgba(16,24,44,0.94));border:1px solid rgba(100,140,220,0.48);border-radius:8px;color:#e0ecff;font-size:28px;font-weight:300;line-height:1;cursor:pointer;box-shadow:0 0 16px rgba(60,110,210,0.26) inset,0 4px 14px rgba(0,0,0,0.35);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;padding:0}
.zoom-btn:hover:not(:disabled){border-color:#9ec4ff;box-shadow:0 0 20px rgba(120,170,255,0.32) inset,0 6px 16px rgba(0,0,0,0.4);transform:scale(1.05)}
.zoom-btn:active{transform:scale(0.95)}

/* Fullscreen Button */
#fullscreen-btn{position:absolute;top:16px;left:68px;padding:8px 12px;background:linear-gradient(135deg,rgba(28,42,72,0.92),rgba(16,24,44,0.94));border:1px solid rgba(100,140,220,0.48);border-radius:8px;color:#e0ecff;font-size:18px;cursor:pointer;box-shadow:0 0 16px rgba(60,110,210,0.26) inset,0 4px 14px rgba(0,0,0,0.35);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .3s ease;z-index:110;line-height:1;pointer-events:auto;touch-action:manipulation;display:none}
#fullscreen-btn:hover:not(:disabled){border-color:#9ec4ff;box-shadow:0 0 20px rgba(120,170,255,0.32) inset,0 6px 16px rgba(0,0,0,0.4);transform:translateY(-2px)}
#fullscreen-btn.hidden{display:none}

/* Fullscreen Tooltip */
.fullscreen-tooltip{position:absolute;top:65px;left:68px;background:linear-gradient(135deg,rgba(120,170,255,0.95),rgba(80,130,220,0.98));border:2px solid rgba(150,190,255,0.8);border-radius:8px;padding:12px 16px;color:#fff;font-size:14px;font-weight:600;z-index:120;pointer-events:none;box-shadow:0 0 20px rgba(120,170,255,0.6),0 4px 16px rgba(0,0,0,0.4);animation:tooltip-flash 1.5s ease-in-out infinite}
.fullscreen-tooltip.hidden{display:none}
.tooltip-arrow{position:absolute;top:-8px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(120,170,255,0.95)}
.tooltip-text{white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,0.3)}
@keyframes tooltip-flash{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:0.7;transform:translateY(-3px)}}

/* Mobile Joystick */
.mobile-joystick{position:absolute;bottom:24px;left:24px;width:112px;height:112px;z-index:90;pointer-events:auto;touch-action:none;user-select:none;display:none}
.joystick-base{width:100%;height:100%;background:radial-gradient(circle,rgba(30,50,90,0.7),rgba(15,25,50,0.85));border:2px solid rgba(100,140,220,0.4);border-radius:50%;box-shadow:0 0 20px rgba(60,100,180,0.3) inset,0 4px 16px rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;position:relative}
.joystick-stick{width:50px;height:50px;background:radial-gradient(circle,rgba(120,170,255,0.9),rgba(80,130,220,0.95));border:2px solid rgba(150,190,255,0.6);border-radius:50%;box-shadow:0 0 12px rgba(120,170,255,0.4),0 2px 8px rgba(0,0,0,0.6);position:absolute;transition:all 0.05s ease;cursor:pointer;touch-action:none}
.joystick-stick::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:rgba(255,255,255,0.3);border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,0.4) inset}

/* Mobile Throttle */
.mobile-throttle{position:absolute;bottom:0px;right:24px;width:48px;height:160px;z-index:90;pointer-events:auto;touch-action:none;user-select:none;display:none;flex-direction:column;gap:8px;align-items:center}
.throttle-track{width:100%;height:144px;background:linear-gradient(180deg,rgba(30,50,90,0.7),rgba(15,25,50,0.85));border:2px solid rgba(100,140,220,0.4);border-radius:30px;box-shadow:0 0 20px rgba(60,100,180,0.3) inset,0 4px 16px rgba(0,0,0,0.5);position:relative;overflow:hidden}
.throttle-handle{width:calc(100% - 4px);height:50px;background:radial-gradient(circle,rgba(120,170,255,0.9),rgba(80,130,220,0.95));border:2px solid rgba(150,190,255,0.6);border-radius:25px;box-shadow:0 0 12px rgba(120,170,255,0.4),0 2px 8px rgba(0,0,0,0.6);position:absolute;bottom:0;left:2px;transition:bottom 0.05s ease;cursor:pointer;touch-action:none;pointer-events:none}
.throttle-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:8px;background:rgba(255,255,255,0.3);border-radius:4px;box-shadow:0 0 6px rgba(255,255,255,0.4) inset}
.throttle-labels{display:flex;flex-direction:column;justify-content:space-between;height:100%;font-size:18px;color:rgba(150,190,255,0.7);text-shadow:0 0 8px rgba(120,170,255,0.5)}

/* Mobile Scan Button */
.mobile-scan-btn{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:64px;height:64px;background:radial-gradient(circle,rgba(80,150,220,0.9),rgba(50,100,180,0.95));border:3px solid rgba(120,180,255,0.6);border-radius:50%;color:#fff;font-size:32px;font-weight:300;line-height:1;cursor:pointer;box-shadow:0 0 20px rgba(80,150,220,0.5),0 6px 16px rgba(0,0,0,0.6);transition:all 0.2s ease;z-index:90;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:none}
.mobile-scan-btn:hover{border-color:#e0f0ff;box-shadow:0 0 24px rgba(120,180,255,0.65),0 8px 20px rgba(0,0,0,0.7);transform:translateX(-50%) scale(1.08)}
.mobile-scan-btn:active{transform:translateX(-50%) scale(0.95);box-shadow:0 0 16px rgba(80,150,220,0.4),0 4px 12px rgba(0,0,0,0.65)}

/* Galactic Map Screen */
.galaxy-map-screen{max-width:none;width:100%;height:100%;background:linear-gradient(170deg,rgba(6,10,22,0.98),rgba(12,16,28,0.96));color:#e5ecff;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.galaxy-map-container{width:100%;height:100%;max-width:1800px;background:linear-gradient(160deg,rgba(16,20,36,0.96),rgba(10,14,26,0.98));border:1px solid rgba(90,140,220,0.45);box-shadow:0 28px 60px rgba(0,0,0,0.6);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.galaxy-map-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.galaxy-map-header h2{margin:0;font-size:26px;letter-spacing:0.24em;text-transform:uppercase;color:#f3f6ff}
.galaxy-close{background:transparent;border:1px solid rgba(132,164,230,0.45);color:#dce7ff;width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 0 14px rgba(80,120,200,0.28);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.galaxy-close:hover{border-color:#a9c4ff;box-shadow:0 0 18px rgba(140,180,255,0.36);transform:scale(1.08)}
.galaxy-map-body{display:flex;gap:20px;flex:1;min-height:0;overflow:hidden}
.galaxy-map-wrapper{flex:0 0 70%;min-height:0;background:linear-gradient(150deg,rgba(8,12,24,0.94),rgba(4,8,18,0.96));border:1px solid rgba(72,108,192,0.38);border-radius:14px;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.galaxy-zoom-controls{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;gap:8px;z-index:10}
.zoom-btn{width:40px;height:40px;background:linear-gradient(135deg,rgba(30,50,90,0.95),rgba(15,25,50,0.97));border:1px solid rgba(100,140,220,0.5);color:#eef4ff;font-size:20px;font-weight:600;border-radius:8px;cursor:pointer;box-shadow:0 0 12px rgba(60,100,180,0.25),0 4px 12px rgba(0,0,0,0.4);transition:all 0.18s ease;display:flex;align-items:center;justify-content:center;line-height:1}
.zoom-btn:hover{border-color:#a0c8ff;box-shadow:0 0 16px rgba(120,160,240,0.35),0 6px 14px rgba(0,0,0,0.45);transform:translateY(-2px);background:linear-gradient(135deg,rgba(40,65,110,0.96),rgba(25,40,70,0.98))}
.zoom-btn:active{transform:translateY(0);box-shadow:0 0 10px rgba(60,100,180,0.3),0 2px 8px rgba(0,0,0,0.5)}

/* Galaxy Pan Controls (Mobile/Tablet) */
.galaxy-pan-controls{position:absolute;bottom:16px;right:16px;display:none;flex-direction:column;gap:4px;z-index:10;width:120px}
.pan-row{display:flex;justify-content:center;gap:4px}
.pan-btn{width:36px;height:36px;background:linear-gradient(135deg,rgba(30,50,90,0.95),rgba(15,25,50,0.97));border:1px solid rgba(100,140,220,0.5);color:#eef4ff;font-size:16px;border-radius:6px;cursor:pointer;box-shadow:0 0 12px rgba(60,100,180,0.25),0 4px 12px rgba(0,0,0,0.4);transition:all 0.18s ease;display:flex;align-items:center;justify-content:center;line-height:1}
.pan-btn:hover{border-color:#a0c8ff;box-shadow:0 0 16px rgba(120,160,240,0.35),0 6px 14px rgba(0,0,0,0.45);transform:scale(1.05);background:linear-gradient(135deg,rgba(40,65,110,0.96),rgba(25,40,70,0.98))}
.pan-btn:active{transform:scale(0.95);box-shadow:0 0 10px rgba(60,100,180,0.3),0 2px 8px rgba(0,0,0,0.5)}
.pan-center{width:36px;height:36px;background:transparent;border:1px dashed rgba(100,140,220,0.3);border-radius:6px}
.galaxy-map-canvas{width:100%;height:100%;border-radius:10px;box-shadow:0 0 32px rgba(20,40,80,0.45) inset;cursor:grab;user-select:none}
.galaxy-map-canvas:active{cursor:grabbing}
.galaxy-info-panel{flex:0 0 30%;background:linear-gradient(145deg,rgba(14,20,38,0.94),rgba(10,16,30,0.92));border:1px solid rgba(70,110,190,0.36);border-radius:14px;padding:18px 22px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.galaxy-info-panel h3{margin:0;font-size:20px;letter-spacing:0.22em;text-transform:uppercase;color:#f1f6ff}
.galaxy-header-info{display:flex;flex-direction:column;gap:8px;padding-bottom:16px}
.galaxy-label{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:#7a9fd8;font-weight:600}
.galaxy-name{font-size:28px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#e8f2ff;text-shadow:0 0 12px rgba(140,190,255,0.4);margin:2px 0 8px 0}
.galaxy-description{font-size:12px;line-height:1.7;color:#b0c5e8;margin-bottom:4px}
.galaxy-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(90,140,220,0.4),transparent);margin:8px 0}
.galaxy-select-prompt{margin:0;font-size:13px;color:#9fb8ff;font-style:italic}
.galaxy-system-title{margin:0 0 14px 0 !important;font-size:22px;letter-spacing:0.24em;text-transform:uppercase;color:#f8fcff;text-shadow:0 0 14px rgba(160,200,255,0.5);border-bottom:1px solid rgba(100,150,220,0.3);padding-bottom:12px}
.galaxy-system-desc{margin:0 0 20px 0;font-size:13px;line-height:1.7;color:#c9d8ff;font-style:italic;padding-left:2px}
.galaxy-system-meta{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:14px;background:rgba(20,35,65,0.3);border-left:2px solid rgba(100,150,220,0.4);border-radius:4px}
.meta-row{display:flex;align-items:center;gap:12px;font-size:11px}
.meta-label{color:#ffd782;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;min-width:110px}
.meta-value{color:#e8f2ff;letter-spacing:0.08em;text-transform:uppercase}
.galaxy-system-services{margin-bottom:20px;padding:14px;background:rgba(20,50,45,0.25);border-left:2px solid rgba(120,220,190,0.45);border-radius:4px}
.services-label{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#8ff0b4;font-weight:600;margin-bottom:8px}
.services-list{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#b8e8d8;line-height:1.6}
.galaxy-route-info{margin-bottom:20px;padding:14px;background:rgba(30,45,80,0.3);border-left:2px solid rgba(100,150,220,0.5);border-radius:4px}
.route-info-header{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#9ec4ff;font-weight:600;margin-bottom:8px}
.route-jumps{font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#d8e8ff;font-weight:600;margin-bottom:12px}
.route-warning{display:flex;gap:12px;align-items:flex-start;padding:10px;background:rgba(80,30,30,0.4);border:1px solid rgba(200,80,80,0.4);border-radius:4px;margin-top:10px}
.warning-icon{font-size:18px;color:#ff9a6c;flex-shrink:0;line-height:1}
.warning-text{flex:1}
.warning-title{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#ffaa88;font-weight:600;margin-bottom:4px}
.warning-systems{font-size:11px;color:#ffd4c4;line-height:1.5}
.galaxy-system-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.galaxy-btn-primary,.galaxy-btn-secondary,.galaxy-btn-clear{padding:10px 18px;border-radius:999px;text-transform:uppercase;letter-spacing:0.18em;font-size:11px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.galaxy-btn-primary{background:linear-gradient(135deg,rgba(50,90,160,0.96),rgba(30,52,96,0.94));border:1px solid rgba(120,170,255,0.5);color:#eef4ff;box-shadow:0 0 16px rgba(80,140,240,0.3) inset,0 4px 14px rgba(0,0,0,0.32)}
.galaxy-btn-primary:hover{border-color:#a7d6ff;box-shadow:0 0 20px rgba(140,190,255,0.36) inset,0 6px 16px rgba(0,0,0,0.36);transform:translateY(-2px)}
.galaxy-btn-secondary{background:linear-gradient(135deg,rgba(40,128,108,0.95),rgba(24,84,72,0.96));border:1px solid rgba(120,216,188,0.48);color:#e9fff6;box-shadow:0 0 16px rgba(80,200,160,0.28) inset,0 4px 14px rgba(0,0,0,0.3)}
.galaxy-btn-secondary:hover{border-color:#8ff0b4;box-shadow:0 0 20px rgba(140,230,200,0.34) inset,0 6px 16px rgba(0,0,0,0.34);transform:translateY(-2px)}
.galaxy-btn-clear{background:linear-gradient(135deg,rgba(90,40,50,0.92),rgba(60,20,30,0.95));border:1px solid rgba(200,80,110,0.48);color:#ffe5ed;box-shadow:0 0 16px rgba(150,40,70,0.26) inset,0 4px 14px rgba(0,0,0,0.3)}
.galaxy-btn-clear:hover{border-color:#ff9ab4;box-shadow:0 0 20px rgba(210,70,110,0.32) inset,0 6px 16px rgba(0,0,0,0.34);transform:translateY(-2px)}
.galaxy-current-label{padding:10px 18px;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#4fe6b8;background:linear-gradient(135deg,rgba(20,60,56,0.8),rgba(12,40,36,0.85));border:1px solid rgba(79,230,184,0.42);border-radius:999px;text-align:center}

/* Mission BBS Panel */
.mission-panel{width:100%;display:flex;flex-direction:column;gap:20px;flex:1 1 auto;min-height:0}
.mission-section{display:flex;flex-direction:column;gap:12px}
.mission-section h3{font-size:16px;margin:0;color:#bdd7ff;text-transform:uppercase;letter-spacing:0.14em;font-weight:600;padding-bottom:8px;border-bottom:1px solid rgba(54,88,150,0.3)}
.mission-list{display:flex;flex-direction:column;gap:14px}
.mission-card{background:linear-gradient(165deg,rgba(16,24,44,0.95),rgba(10,16,32,0.92));border:1px solid rgba(54,88,150,0.4);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;gap:6px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.mission-card.available:hover{border-color:rgba(100,150,230,0.6);box-shadow:0 0 18px rgba(80,130,220,0.25);transform:translateY(-2px)}
.mission-card.active{border-color:rgba(79,230,184,0.5);box-shadow:0 0 16px rgba(79,230,184,0.15)}
.mission-header{display:flex;align-items:center;gap:10px}
.mission-icon{font-size:20px;line-height:1;flex-shrink:0}
.mission-title-group{flex:1;display:flex;flex-direction:column;gap:2px}
.mission-title{font-size:13px;font-weight:600;color:#e8f0ff;letter-spacing:0.04em}
.mission-type{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:#8fa8d8;opacity:0.85}
.mission-payment{font-size:14px;font-weight:700;color:#4fe6b8;letter-spacing:0.06em;flex-shrink:0}
.mission-body{display:flex;flex-direction:column;gap:6px}
.mission-description{margin:0;font-size:12px;line-height:1.45;color:#c5d8ff}
.mission-details{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:0.08em;color:#99b5e6}
.mission-detail{display:flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(30,50,90,0.4);border-radius:6px;border:1px solid rgba(60,90,150,0.3)}
.mission-progress{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:rgba(20,40,70,0.5);border-radius:8px;border:1px solid rgba(79,230,184,0.25)}
.mission-route{font-size:12px;color:#9fb8ff;letter-spacing:0.06em}
.mission-timer{font-size:12px;color:#ffd93d;font-weight:600;letter-spacing:0.08em}
.mission-footer{display:flex;justify-content:flex-end;padding-top:2px}
.mission-accept-btn{padding:5px 12px;background:linear-gradient(135deg,rgba(40,128,108,0.95),rgba(24,84,72,0.96));border:1px solid rgba(120,216,188,0.48);border-radius:6px;color:#e9fff6;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px rgba(80,200,160,0.28) inset;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;margin-left:auto}
.mission-accept-btn:hover{border-color:#8ff0b4;box-shadow:0 0 18px rgba(140,230,200,0.34) inset,0 4px 12px rgba(0,0,0,0.3);transform:translateY(-1px)}
.no-missions{margin:0;padding:20px;text-align:center;color:#8fa8d8;font-size:13px;letter-spacing:0.08em;background:rgba(20,30,50,0.4);border-radius:10px;border:1px solid rgba(60,90,140,0.25)}

/* Bar Panel */
.bar-panel{width:100%;display:flex;flex-direction:column;gap:20px;flex:1 1 auto;min-height:0}
.bar-options{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr;gap:16px;flex:1;min-height:0}
.bar-option{background:linear-gradient(150deg,rgba(18,26,46,0.94),rgba(12,18,34,0.92));border:1px solid rgba(60,90,150,0.38);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.bar-option:hover{border-color:rgba(100,150,230,0.6);box-shadow:0 0 18px rgba(80,130,220,0.25);transform:translateY(-2px)}
.bar-option-icon{font-size:32px;line-height:1;flex-shrink:0}
.bar-option-content{flex:1;display:flex;flex-direction:column;gap:6px}
.bar-option-title{font-size:15px;font-weight:600;color:#e8f0ff;letter-spacing:0.06em}
.bar-option-desc{font-size:12px;color:#9fb8ff;line-height:1.5;letter-spacing:0.04em}
.bar-activity{background:linear-gradient(160deg,rgba(16,24,44,0.96),rgba(10,16,32,0.94));border:1px solid rgba(60,90,150,0.4);border-radius:14px;padding:24px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.bar-result{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.bar-result-icon{font-size:48px;line-height:1}
.bar-result h4{margin:0;font-size:20px;color:#e8f0ff;letter-spacing:0.08em;text-transform:uppercase}
.bar-result p{margin:0;font-size:14px;color:#c5d8ff;line-height:1.6;max-width:500px}
.bar-result.win .bar-result-icon{animation:bar-bounce 0.6s ease}
.bar-result.jackpot .bar-result-icon{animation:bar-spin 1s ease}
.bar-result.lose{opacity:0.85}
.bar-credits-change{font-size:18px;font-weight:700;letter-spacing:0.1em;padding:8px 16px;border-radius:8px}
.bar-credits-change.positive{color:#4fe6b8;background:rgba(79,230,184,0.15);border:1px solid rgba(79,230,184,0.3)}
.bar-credits-change.negative{color:#ff9ab4;background:rgba(255,154,180,0.12);border:1px solid rgba(255,154,180,0.25)}
.bar-back-btn{margin-top:8px;padding:10px 24px;background:linear-gradient(135deg,rgba(50,90,160,0.9),rgba(30,52,96,0.92));border:1px solid rgba(120,170,255,0.45);border-radius:8px;color:#eef4ff;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 14px rgba(80,140,240,0.25) inset;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.bar-back-btn:hover{border-color:#a7d6ff;box-shadow:0 0 18px rgba(140,190,255,0.3) inset,0 4px 12px rgba(0,0,0,0.3);transform:translateY(-1px)}
.holovid-header{display:flex;justify-content:center;gap:12px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:8px}
.holovid-badge{color:#ffd93d;background:rgba(255,217,61,0.15);padding:4px 12px;border-radius:6px;border:1px solid rgba(255,217,61,0.3)}
.holovid-live{color:#ff6b6b;font-weight:700}
.bar-rumor{background:rgba(30,50,90,0.5);border:1px solid rgba(60,90,150,0.35);border-radius:10px;padding:16px 20px;display:flex;gap:14px;align-items:flex-start;text-align:left;max-width:600px}
.bar-rumor-icon{font-size:28px;line-height:1;flex-shrink:0}
.bar-rumor p{margin:0;font-size:13px;color:#d0e0ff;line-height:1.6}
.bar-atmosphere{font-style:italic;color:#99b5e6;margin-bottom:8px}
.escort-stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.escort-stat{background:rgba(30,50,90,0.4);border:1px solid rgba(60,90,150,0.3);border-radius:6px;padding:6px 14px;font-size:12px;color:#9fb8ff;letter-spacing:0.06em}

@keyframes bar-bounce{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-12px)}
}

@keyframes bar-spin{
	0%{transform:rotate(0deg) scale(1)}
	50%{transform:rotate(180deg) scale(1.2)}
	100%{transform:rotate(360deg) scale(1)}
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	/* Galaxy map - stack vertically on mobile */
	.galaxy-map-screen{padding:10px}
	.galaxy-map-container{padding:12px;gap:12px}
	.galaxy-map-header h2{font-size:18px}
	.galaxy-close{width:32px;height:32px;font-size:20px}
	
	.galaxy-map-body{flex-direction:column;gap:12px}
	.galaxy-map-wrapper{flex:0 0 60%;min-height:300px}
	.galaxy-info-panel{flex:0 0 auto;min-height:200px}
	
	/* Show pan controls on mobile/tablet */
	.galaxy-pan-controls{display:flex}
	.pan-btn{width:32px;height:32px;font-size:14px}
	.pan-center{width:32px;height:32px}
	
	/* Landing screen adjustments */
	.landing-content{width:100%;max-width:100vw;max-height:100vh;border-radius:0}
	.landing-visual{height:180px}
	.landing-credits{top:12px;right:12px;font-size:14px;padding:6px 10px}
	.landing-header h2{font-size:18px}
	.landing-header p{font-size:10px}
	
	/* Landing body - stack vertically */
	.landing-body{flex-direction:column;padding:16px;gap:16px}
	
	/* Landing controls - full width on mobile */
	.landing-controls{flex:0 0 auto;width:100%}
	.landing-controls button{padding:10px 14px;font-size:11px;min-height:44px}
	
	/* Target action buttons - ensure proper touch targets */
	.target-actions button{min-height:44px;padding:10px 12px;font-size:11px}
	
	/* Landing description - full width */
	.landing-description{min-width:auto;width:100%}
	
	/* Bar panel - stack vertically on mobile */
	.bar-options{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}
	.bar-option{padding:14px 16px;gap:12px}
	.bar-option-icon{font-size:28px}
	.bar-option-title{font-size:14px}
	.bar-option-desc{font-size:11px}
	
	/* Outfitter/Shipyard/Exchange - redesign for mobile */
	.outfitter-panel{gap:12px}
	
	/* Top section - stack vertically */
	.outfitter-top{grid-template-columns:1fr;gap:12px;max-height:none}
	.outfitter-top-portrait{height:auto;min-height:150px;max-height:200px}
	.outfitter-top-info{height:auto;min-height:auto}
	
	/* Grid section */
	.outfitter-grid-section,
	.shipyard-grid-section{padding:12px}
	
	/* Items grid - show 1-2 items per row on mobile */
	.outfitter-items-grid{grid-template-columns:repeat(2,1fr);gap:10px}
	
	/* Item cards - redesign for mobile: image on top, info below, actions at bottom */
	.outfitter-item-button{
		flex-direction:column;
		aspect-ratio:auto;
		min-height:auto;
		background-size:contain;
		background-position:top center;
		padding-top:80px;
	}
	
	.outfitter-item-meta{
		background:rgba(8,12,22,0.85);
		padding:10px 12px;
		gap:4px;
	}
	
	.outfitter-item-name{font-size:0.65rem}
	.outfitter-item-stats{font-size:0.58rem;gap:1px}
	.outfitter-item-price{font-size:0.6rem}
	.outfitter-item-owned{font-size:0.52rem}
	
	/* Detail panel */
	.outfitter-detail{padding:10px 12px;gap:4px;height:auto;max-height:none}
	
	/* Actions */
	.outfitter-actions{flex-direction:column;gap:8px}
	.outfitter-actions button{width:100%;padding:10px 14px;font-size:11px}
	
	/* Service buttons */
	.landing-services{flex-direction:column;gap:10px}
	.service-btn{padding:10px 14px;font-size:11px}
	
	/* Mobile joystick - ensure visibility */
	.mobile-joystick{bottom:16px !important;left:16px !important;width:120px !important;height:120px !important;display:block !important}
	.joystick-stick{width:45px;height:45px}
	
	/* Mobile throttle */
	.mobile-throttle{bottom:16px !important;right:16px !important;width:50px !important;height:180px !important;display:flex !important}
	.throttle-handle{height:45px}
}

/* Tablet and larger screens with touch */
@media (max-width: 1000px) {
	/* Show controls on tablets too */
	.mobile-joystick{display:block !important}
	.mobile-throttle{display:flex !important}
	.mobile-scan-btn{display:block !important}
	.galaxy-pan-controls{display:flex !important}
	
	/* Show zoom controls on mobile/tablet */
	.zoom-controls{display:flex !important}
	#fullscreen-btn{display:block !important}
	
	/* Map and sidebar toggle buttons - larger tap targets */
	#open-galaxy-btn{top:12px;right:12px;padding:10px 16px;font-size:12px;min-width:44px;min-height:44px}
	#toggle-sidebar-btn{top:60px;right:12px;padding:10px 14px;font-size:11px;min-width:44px;min-height:44px}
	
	/* Hyperjump panel - mobile responsive */
	.hyperjump-panel{top:12px}
	.hyperjump-info{min-width:180px;padding:6px 12px;gap:3px}
	.hyperjump-info .destination-name{font-size:14px}
	#engage-jump-btn{padding:12px 20px;font-size:13px;min-width:160px;min-height:44px}
	#engage-jump-btn .btn-icon{font-size:18px}
}

/* Extra small mobile devices */
@media (max-width: 480px) {
	/* Show only 1 item per row on very small screens */
	.outfitter-items-grid{grid-template-columns:1fr}
	
	/* Larger touch targets */
	.bar-option{padding:16px;min-height:80px}
	.landing-controls button{padding:12px 16px;font-size:12px}
	
	/* Adjust item card padding for single column */
	.outfitter-item-button{padding-top:100px}
	
	/* Smaller joystick and throttle for very small screens */
	.mobile-joystick{width:100px;height:100px}
	.joystick-stick{width:40px;height:40px}
	.mobile-throttle{width:45px;height:160px}
	.throttle-handle{height:40px}
}

/* Game Date Display */
#game-date{background:#0b0b12;padding:10px 12px;border:1px solid #222;margin-bottom:2px;text-align:center}
.date-label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:#6a7f9a;margin-bottom:4px}
.date-value{font-size:14px;letter-spacing:0.14em;text-transform:uppercase;color:#4fe6b8;font-weight:600}

/* Captain Creation Screen */
#captain-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#0a0e1a 0%,#000000 100%);display:flex;align-items:flex-start;justify-content:center;z-index:10000;overflow-y:auto;padding:20px 0}
.captain-creation-content{text-align:center;padding:20px;max-width:95vw;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.captain-creation-form{display:flex;flex-direction:column;gap:12px;max-width:min(400px, 90vw);margin:0 auto}
.captain-form-group{display:flex;flex-direction:column;gap:6px;text-align:left}
.captain-form-group label{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#9ec4ff;font-weight:600}
.captain-form-group input,.captain-form-group select{background:#0b0b12;border:2px solid #2a4870;padding:10px 14px;font-size:16px;color:#e0ecff;border-radius:8px;outline:none;transition:border-color 0.3s ease}
.captain-form-group input:focus,.captain-form-group select:focus{border-color:#3a5880;box-shadow:0 0 12px rgba(58,88,128,0.4)}
.captain-creation-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.captain-creation-buttons button{background:linear-gradient(135deg,#1a2940,#0d1825);color:#9ec4ff;border:2px solid #2a4870;padding:10px 28px;font-size:14px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);min-width:140px;border-radius:8px}
.captain-creation-buttons button:hover:not(:disabled){background:linear-gradient(135deg,#2a4870,#1a2940);border-color:#3a5880;box-shadow:0 6px 20px rgba(42,72,112,0.6),inset 0 1px 0 rgba(255,255,255,0.2);transform:translateY(-2px)}
.captain-creation-buttons button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1)}
.captain-creation-buttons button:disabled{opacity:0.4;cursor:not-allowed}
@media screen and (max-height:500px){.captain-creation-content{padding:10px}.captain-creation-form{gap:10px;max-width:min(350px, 85vw);margin:0 auto}.captain-form-group input,.captain-form-group select{padding:8px 12px;font-size:14px}.captain-creation-buttons{gap:8px}.captain-creation-buttons button{padding:8px 24px;font-size:12px;min-width:120px}}

/* Story Dialog Overlay */
.story-dialog{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9998;backdrop-filter:blur(4px);animation:fadeIn 0.4s ease}
.story-dialog.hidden{display:none}
.story-dialog-content{background:linear-gradient(145deg,#1a2940 0%,#0d1825 100%);border:2px solid #2a4870;border-radius:16px;padding:32px;max-width:min(640px, 90vw);box-shadow:0 12px 40px rgba(0,0,0,0.7),inset 0 2px 0 rgba(255,255,255,0.1);animation:slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)}
#story-dialog-text{color:#e0ecff;font-size:clamp(15px, 3.5vw, 18px);line-height:1.7;margin-bottom:24px;text-align:left;letter-spacing:0.02em}
.story-dialog-btn{background:linear-gradient(135deg,#2a4870,#1a2940);color:#9ec4ff;border:2px solid #3a5880;padding:14px 40px;font-size:16px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);width:100%;border-radius:10px}
.story-dialog-btn:hover{background:linear-gradient(135deg,#3a5880,#2a4870);border-color:#4a6890;box-shadow:0 6px 20px rgba(42,72,112,0.6),inset 0 1px 0 rgba(255,255,255,0.2);transform:translateY(-2px)}
.story-dialog-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@media screen and (max-width:480px){.story-dialog-content{padding:24px;max-width:min(500px, 92vw)}#story-dialog-text{font-size:clamp(14px, 4vw, 16px);line-height:1.6;margin-bottom:20px}.story-dialog-btn{padding:12px 32px;font-size:14px}}

/* Shipyard Stats Modal */
.shipyard-stats-modal{display:flex}
.shipyard-stats-modal.hidden{display:none}