@font-face { font-family: "MegaMicro"; font-weight: 400; font-style: normal; src: url("assets/fonts/MegaMicro.woff2") format("woff2"); }

/* ═══════════════════════════════════════════════════════════════
   Theme — Maritime Ledger
   Warm parchment tones, navy depth, amber accents.
   CSS variables are on .content_center (always has .theme-modern).
   ═══════════════════════════════════════════════════════════════ */

body { margin: 0; padding: 0; background-color: #060e1a;
    font-size: 16px;
    font-family: "Lucida Console", Monaco, "Bitstream Vera Sans Mono", "Courier New", monospace;
}
a, a:active, a:visited { outline: none; }
img { border-style: none; }

.block80 { height: 80px; }
.block60 { height: 60px; }
.block40 { height: 40px; }
.block20 { height: 20px; }
.block18 { height: 18px; }
.block6 { height: 6px; }

.layout_center { margin: 20px auto; width: 800px; }
.screen { position: relative; width: 700px; height: 450px; margin: 0 auto; overflow: hidden; }
.banner { position: absolute; left: 0; top: 0; width: 420px; text-align: center; }
.headline { font-family: times new roman, times, serif; font-size: 48px; font-weight: bold; letter-spacing: 36px; }
.credits { position: absolute; left: 500px; top: 0; width: 200px; }

.center_text { text-align: center; }

.mega { font-family: MegaMicro, monospace; font-weight: 400; font-size: 20px; }

footer { margin-top: 100px; }
footer ul { font-family: arial, helvetica, verdana, geneva, sans-serif; font-size: 16px; list-style-type: none; text-align: center; }
footer ul li { display: inline-block; margin: 0 10px 20px 0; }
footer ul li a { margin-right: 10px; }

/* ── Game container ── */
table { border-collapse: collapse; width: 100%; }
td { padding: 0; vertical-align: middle; }
.content_center {
	--fg: #d4c5a9;
	--fg-dim: #8a7e6b;
	--bg: #0c1a2e;
	--bg-surface: #122240;
	--border: #2a4a6b;
	--border-accent: #c8a45c;
	--accent: #c8a45c;
	--accent-bright: #e8c86c;
	--inverse-bg: #c8a45c;
	--inverse-fg: #0c1a2e;
	--highlight: #e8c86c;
	--combat-flash: #c8a45c;
	--danger: #c75050;
	--link: #7aadcf;
	margin: 40px auto; width: 580px; text-align: left;
	font-family: "DM Mono", "Courier New", monospace;
	color: var(--fg);
	background-color: var(--bg);
}
.content_center a,
.content_center a:active,
.content_center a:visited {
	color: var(--link);
	text-decoration: none;
}
.content_center a:hover {
	text-decoration: underline;
}

/*562 x 386*/
.col-indent { width: 10%; }
.col-label { width: 30%; }
.col-label-right { width: 30%; text-align: right; }
.col-data { width: 40%; }
.col-half { width: 50%; }
.col-half-right { width: 50%; text-align: right; }
.valign-top { vertical-align: top; }

/* ── Sections ── */
#titleSection { width: 578px; height: 570px; position: relative; overflow: hidden;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px;
	background: linear-gradient(180deg, #0c1a2e 0%, #0f2238 30%, #132a44 60%, #183654 100%);
}
#firmNameSection { width: 578px; height: 530px; position: relative;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
	background-image:
		radial-gradient(ellipse at 20% 80%, rgba(200, 164, 92, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(122, 173, 207, 0.03) 0%, transparent 50%);
}
#startChoiceSection { width: 578px; height: 530px; position: relative; display: none;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
	background-image:
		radial-gradient(ellipse at 20% 80%, rgba(200, 164, 92, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(122, 173, 207, 0.03) 0%, transparent 50%);
}
#portSection { width: 578px; min-height: 530px; position: relative; display: none;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
}
#combatSection { width: 578px; height: 530px; position: relative; display: none; overflow: hidden;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background: linear-gradient(180deg, #0c1a2e 0%, #0f2238 30%, #132a44 60%, #183654 100%);
}
#settingsSection { width: 578px; height: 530px; position: relative; display: none;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
	background-image:
		radial-gradient(ellipse at 20% 80%, rgba(200, 164, 92, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(122, 173, 207, 0.03) 0%, transparent 50%);
}
#highScoresSection { width: 578px; height: 530px; position: relative; display: none;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
	background-image:
		radial-gradient(ellipse at 20% 80%, rgba(200, 164, 92, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(122, 173, 207, 0.03) 0%, transparent 50%);
}
#gameOverSection { width: 578px; height: 530px; position: relative; display: none;
	color: var(--fg); border: solid 1px var(--border); border-radius: 6px; padding: 10px;
	background-color: var(--bg-surface);
	background-image:
		radial-gradient(ellipse at 20% 80%, rgba(200, 164, 92, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(122, 173, 207, 0.03) 0%, transparent 50%);
}

/* ── Title screen scene ── */
.title-sky {
	position: absolute;
	top: 0; left: 0; right: 0; height: 220px;
	background: linear-gradient(180deg, #1a3a5c 0%, #2a5a8a 45%, #4a8ab8 75%, #7ab8d8 92%, #a8d8e8 100%);
	pointer-events: none;
	z-index: 0;
}
.title-horizon {
	position: absolute;
	top: 210px; left: 0; right: 0; height: 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(180,210,240,0.10) 40%, rgba(200,225,245,0.14) 55%, rgba(160,200,230,0.06) 75%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}
.title-ocean {
	position: absolute;
	top: 220px; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	z-index: 2;
}
.title-ocean svg {
	position: absolute;
	width: 200%; height: 530px;
	left: 0; top: 0;
	will-change: transform;
	opacity: 0.75;
}
.title-ocean.ol-a svg { animation: ocean-drift 18s linear infinite; }
.title-ocean.ol-b svg { animation: ocean-drift 25s linear infinite; }
.title-ship {
	position: absolute;
	width: 196px; height: 168px;
	right: 60px; top: 88px;
	background-image: url('assets/ship1-spritesheet.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	image-rendering: pixelated;
	z-index: 5;
	animation: title-ship-bob 3s ease-in-out infinite;
}
@keyframes title-ship-bob {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(4px); }
	100% { transform: translateY(0); }
}

/* ── Title screen text ── */
.title-screen {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10;
}
.title-name-block {
	display: inline-flex;
	align-items: flex-end;
	position: absolute;
	top: 62px;
	left: 30px;
}
.title-words {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.title-taipan {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 700;
	font-size: 48px;
	letter-spacing: 8px;
	color: var(--accent-bright);
	text-shadow: 0 0 30px rgba(200, 164, 92, 0.3), 0 2px 8px rgba(0,0,0,0.4);
	line-height: 1;
}
.title-redux {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	font-size: 48px;
	letter-spacing: 13px;
	color: #15304a;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 12px rgba(200,164,92,0.08);
	line-height: 1.1;
	margin-top: 4px;
}
.title-bang {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 700;
	font-size: 150px;
	line-height: 1;
	color: var(--accent-bright);
	text-shadow: 0 0 30px rgba(200, 164, 92, 0.3), 0 2px 8px rgba(0,0,0,0.4);
	margin-left: 0px;
	margin-bottom: -16px;
	align-self: flex-end;
	margin-top: -50px;
}
.title-bottom {
	position: absolute;
	bottom: 140px;
	left: 0; right: 0;
	text-align: center;
}
.title-subtitle {
	color: rgba(200,220,240,0.6);
	font-style: italic;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	margin-bottom: 12px;
	margin-top: 0;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.title-credits {
	line-height: 1.4; margin-bottom: 22px;
	color: rgba(200,220,240,0.32);
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.title-credits a { color: rgba(200,220,240,0.40); }
.title-resume {
	margin-top: 28px;
	color: rgba(200,220,240,0.6);
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.title-prompt {
	position: absolute;
	bottom: 40px;
	left: 0; right: 0;
	text-align: center;
	color: rgba(200,220,240,0.6);
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Firm name / start choice ── */
.firm-name-box {
	margin: 172px 20px; padding: 20px; position: relative;
	border: solid 1px var(--border-accent);
	background-color: rgba(200, 164, 92, 0.04);
}
#firmNameInput { letter-spacing: 3px; }
#firmDisplay { font-size: 20px; }
.firm-name-underline { position: relative; top: -8px; font-size: 24px; color: var(--border); }
.start-choice-box { padding: 100px 20px; }

/* ── Settings / Tips ── */
.settings-box { padding: 60px 20px; }
.settings-option { cursor: pointer; }
.settings-option:hover { color: var(--accent-bright); text-decoration: underline; }

/* ── Game over ── */
.game-over-box { padding: 30px 20px; }

/* ── High scores ── */
.high-scores-box { padding: 60px 20px; }
.high-scores-table { width: 100%; }
.high-scores-table td { padding: 6px 0; white-space: nowrap; border-bottom: 1px solid rgba(42, 74, 107, 0.3); }
.hs-rank { width: 6%; }
.hs-firm { width: 30%; }
.hs-score { width: 22%; text-align: right; padding-right: 10px !important; }
.hs-time { width: 14%; text-align: right; padding-right: 10px !important; }
.hs-date { width: 28%; text-align: right; }

/* ── Port ── */
.port-header { width: 562px; margin: 4px 8px; text-align: center; }
.port-panel {
	width: 380px; margin: 4px 8px; padding: 5px;
	border: solid 1px var(--border);
	background-color: rgba(10, 20, 40, 0.5);
}
.port-sidebar { width: 150px; text-align: center; margin-top: 10px; line-height: 1.4; }
.port-footer { width: 562px; margin: 4px 8px; }

/* ── Lines ── */
.solidline { width: 100%; height: 1px; line-height: 1px; font-size: 1px; border-bottom: solid 1px var(--border); }
.solidline2 { width: 100%; height: 1px; line-height: 1px; font-size: 1px; border-bottom: solid 2px var(--border); margin: 2px 0; }
.dashedline2 { width: 100%; height: 1px; line-height: 1px; font-size: 1px; border-bottom: dashed 4px var(--border); margin-bottom: 8px; }

/* ── Typography ── */
/* Interactive menu-key letters get accent color */
.key {
	color: var(--accent-bright);
	font-weight: 600;
}

/* ── Inverse / highlight spans ── */
.inverse { background-color: var(--inverse-bg); color: var(--inverse-fg); font-weight: 600; }
.afford { position: absolute; right: 15px; bottom: 2px; padding: 0 15px; text-align: center; line-height: 1.2; background-color: var(--accent); color: var(--inverse-fg); font-weight: 600; }
.millionaire { background-color: var(--accent); color: var(--inverse-fg); width: 280px; padding: 20px; }
.scorecard { width: 400px; border: solid 1px var(--border-accent); padding: 5px 10px; background-color: rgba(200, 164, 92, 0.05); }

/* Port sidebar — no inverse backgrounds */
.port-sidebar .inverse {
	background-color: transparent;
	color: var(--accent-bright);
	font-weight: 600;
}
#debt { font-weight: normal; }

/* ── Combat ── */
.combat-header { width: 578px; height: 120px; position: relative; z-index: 10; padding-top: 1.2em; }
.combat-header > div:not(.guns) { max-width: 440px; }
#combatOrders:not(:empty) { margin-top: 0.6em; }
.guns {
	position: absolute; text-align: right; line-height: 1.2;
	border: solid 1px rgba(120, 160, 200, 0.35);
	border-radius: 4px;
	background: rgba(10, 20, 40, 0.5);
	color: var(--fg);
	right: 4px; top: 4px;
	padding: 4px 8px 5px 12px;
}
.ship-slot { position: absolute; width: 98px; height: 84px; }
#shipSlot0 { left: 16px; top: 226px; }
#shipSlot1 { left: 128px; top: 226px; }
#shipSlot2 { left: 240px; top: 226px; }
#shipSlot3 { left: 352px; top: 226px; }
#shipSlot4 { left: 464px; top: 226px; }
#shipSlot5 { left: 16px; top: 340px; }
#shipSlot6 { left: 128px; top: 340px; }
#shipSlot7 { left: 240px; top: 340px; }
#shipSlot8 { left: 352px; top: 340px; }
#shipSlot9 { left: 464px; top: 340px; }
.ship { background-color: var(--accent-bright); }
#moreShips { position: absolute; left: 560px; top: 320px; font-size: 22px; font-weight: bold; z-index: 2; }
#enemyFire { position: absolute; width: 578px; height: 530px; left: 0; top: 0; z-index: 500; visibility: hidden; background-color: var(--combat-flash); opacity: 0.6; }
.ship-flash { position: absolute; width: 98px; height: 84px; left: 0; top: 0; z-index: 1; visibility: hidden; background-color: var(--combat-flash); opacity: 0.7; }

/* Sprite controller: outer mover handles sail-in/flee translation */
.ship-mover {
	position: absolute;
	width: 98px; height: 84px;
	left: 0; top: 0;
}
/* Sprite controller: inner slot handles bob (always active) */
.ship-mover .ship-slot {
	width: 98px; height: 84px;
	animation: ship-bob 3s infinite ease-in-out alternate;
}
.ship-mover .ship-slot canvas {
	width: 98px; height: 84px;
	display: block;
}
@keyframes ship-bob {
	0% { transform: rotate(-3.5deg); }
	100% { transform: rotate(3.5deg); }
}
.ship-sail { position: absolute; width: 98px; height: 84px; left: 0; top: 0; }
.sailing .ship::after,
.docking .ship::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 5px;
	right: 5px;
	height: 6px;
	background: linear-gradient(90deg,
		transparent 0%, rgba(180,225,245,0.3) 10%,
		transparent 20%, rgba(160,215,240,0.25) 35%,
		transparent 45%, rgba(170,220,240,0.3) 60%,
		transparent 70%, rgba(150,210,235,0.2) 85%,
		transparent 100%);
	animation: waterline-shimmer var(--shimmer-dur, 300ms) ease-in-out infinite alternate;
}
@keyframes waterline-shimmer {
	0% { opacity: 0.6; transform: translateX(-3px); }
	100% { opacity: 1; transform: translateX(3px); }
}
.ship-sail.sailing::before,
.ship-sail.docking::before {
	content: '';
	position: absolute;
	left: -4px;
	bottom: 2px;
	width: 12px;
	height: 10px;
	background: radial-gradient(ellipse at 60% 30%, rgba(200,230,245,0.5) 0%, rgba(160,210,235,0.2) 50%, transparent 80%);
	z-index: 1;
	animation: bow-splash var(--splash-dur, 200ms) ease-in-out infinite;
}
@keyframes bow-splash {
	0% { opacity: 0.4; transform: scale(1) translateY(0); }
	30% { opacity: 1; transform: scale(1.3) translateY(-2px); }
	60% { opacity: 0.3; transform: scale(0.7) translateY(1px); }
	100% { opacity: 0.4; transform: scale(1) translateY(0); }
}
/* Fade out all water effects when ship arrives */
.ship-sail.docking::before,
.ship-sail.docking::after,
.docking .ship::after {
	animation: splash-fade 500ms ease-out forwards;
}
@keyframes splash-fade {
	to { opacity: 0; }
}
.ship-sail.sailing::after,
.ship-sail.docking::after {
	content: '';
	position: absolute;
	right: -20px;
	bottom: 4px;
	width: 30px;
	height: 6px;
	background: linear-gradient(to right, rgba(160,210,235,0.25), transparent);
	z-index: -1;
	animation: wake-churn var(--wake-dur, 350ms) ease-in-out infinite alternate;
}
@keyframes wake-churn {
	0% { opacity: 0.5; width: 25px; transform: translateY(0); }
	100% { opacity: 1; width: 35px; transform: translateY(-1px); }
}
@keyframes ship-arrive {
	from { transform: translateX(var(--sail-offset)); }
	to { transform: translateX(0); }
}
@keyframes ship-flee {
	from { transform: translateX(0); }
	to { transform: translateX(var(--sail-offset)); }
}

/* ── Sky and horizon ── */
.sky-gradient, .horizon-haze, .horizon-cloud { display: none; }
.theme-modern .sky-gradient {
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0; height: 190px;
	background: linear-gradient(180deg, #1a3a5c 0%, #2a5a8a 45%, #4a8ab8 75%, #7ab8d8 92%, #a8d8e8 100%);
	pointer-events: none;
	z-index: 0;
}
.theme-modern .horizon-haze {
	display: block;
	position: absolute;
	top: 180px; left: 0; right: 0; height: 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(180,210,240,0.10) 40%, rgba(200,225,245,0.14) 55%, rgba(160,200,230,0.06) 75%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}
.theme-modern .horizon-cloud {
	display: block;
	position: absolute;
	background: radial-gradient(ellipse, rgba(210,225,245,0.35) 0%, rgba(200,220,240,0.15) 50%, transparent 85%);
	pointer-events: none;
	z-index: 1;
	animation: cloud-drift 30s linear infinite;
}
@keyframes cloud-drift {
	0% { transform: translateX(20px); }
	100% { transform: translateX(-40px); }
}

/* ── Combat water background (toggled via JS) ── */
.ocean-layer { display: none; }
.theme-modern .ocean-layer {
	display: block;
	position: absolute;
	top: 190px;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	contain: strict;
	z-index: 2;
}
.theme-modern .ocean-layer svg {
	position: absolute;
	width: 200%;
	height: 100%;
	left: 0;
	top: 0;
	will-change: transform;
}
.theme-modern .ocean-layer.ol-a svg { animation: ocean-drift 18s linear infinite; }
.theme-modern .ocean-layer.ol-b svg { animation: ocean-drift 25s linear infinite; }
@keyframes ocean-drift {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ── Message area ── */
#message { width: 100%; padding: 4px 8px 24px; margin: 0; box-sizing: border-box; position: relative; }
#input { font-family: inherit; font-size: inherit; }
.dim { opacity: 0.4; }

#mobilehelper,#mobilehelper:focus { height: 0; width: 0; border: none; opacity: 0; outline: none; position: relative; top: -100px; }
@media all and (max-width: 800px) {
.content_center { margin: 0 auto; }
.port-footer { line-height: 1.2; }
}

/* ── Enhanced combat effects ── */

/* Flash overlays — radial gradients, hidden by default */
#playerFlashGlow,
#playerFlashSpark,
#enemyFlashGlow {
	position: absolute;
	left: 0; top: 0; width: 578px; height: 530px;
	opacity: 0;
	pointer-events: none;
}
#playerFlashGlow {
	z-index: 500;
	background: radial-gradient(ellipse 90% 80% at 50% 60%,
		rgba(200, 164, 92, 0.7) 0%,
		rgba(200, 164, 92, 0.4) 30%,
		rgba(200, 164, 92, 0.12) 55%,
		transparent 80%);
}
#playerFlashSpark {
	z-index: 501;
	background: radial-gradient(ellipse 35% 30% at 50% 65%,
		rgba(240, 100, 40, 0.7) 0%,
		rgba(220, 130, 50, 0.3) 40%,
		transparent 70%);
}
#enemyFlashGlow {
	z-index: 500;
	background: radial-gradient(ellipse 80% 50% at 50% 65%,
		rgba(210, 90, 70, 0.6) 0%,
		rgba(200, 100, 80, 0.25) 35%,
		transparent 60%);
}

/* Smoke containers */
#playerSmoke {
	position: absolute;
	left: -60px; right: -60px; top: -40px; bottom: -20px;
	z-index: 450;
	pointer-events: none;
	opacity: 0;
}
#enemySmoke {
	position: absolute;
	left: -20px; right: -20px; top: -40px; bottom: 0;
	z-index: 450;
	pointer-events: none;
	opacity: 0;
}

/* Smoke particles — base styles, positions set per-particle via nth-child */
.smoke-particle {
	position: absolute;
	border-radius: 50%;
	background-color: rgba(200, 190, 170, 1);
}

/* Player smoke — knots (dense, irregular, blur 14-16px)
   All particles start in bottom 50-80% of scene (cannon level). */
#playerSmoke .smoke-particle:nth-child(1)  { width: 180px; height: 130px; left: -2%;  top: 78%; filter: blur(14px); border-radius: 60% 40% 55% 45%; }
#playerSmoke .smoke-particle:nth-child(2)  { width: 160px; height: 120px; left: 20%;  top: 82%; filter: blur(15px); border-radius: 45% 55% 40% 60%; }
#playerSmoke .smoke-particle:nth-child(3)  { width: 190px; height: 140px; left: 42%;  top: 80%; filter: blur(14px); border-radius: 50% 60% 45% 55%; }
#playerSmoke .smoke-particle:nth-child(4)  { width: 170px; height: 125px; left: 66%;  top: 84%; filter: blur(15px); border-radius: 55% 45% 60% 40%; }
#playerSmoke .smoke-particle:nth-child(5)  { width: 150px; height: 115px; left: 84%;  top: 79%; filter: blur(14px); border-radius: 40% 60% 50% 50%; }
#playerSmoke .smoke-particle:nth-child(6)  { width: 200px; height: 145px; left: 5%;   top: 66%; filter: blur(15px); border-radius: 55% 45% 50% 50%; }
#playerSmoke .smoke-particle:nth-child(7)  { width: 175px; height: 130px; left: 32%;  top: 70%; filter: blur(14px); border-radius: 45% 55% 55% 45%; }
#playerSmoke .smoke-particle:nth-child(8)  { width: 185px; height: 135px; left: 55%;  top: 64%; filter: blur(15px); border-radius: 60% 40% 45% 55%; }
#playerSmoke .smoke-particle:nth-child(9)  { width: 165px; height: 125px; left: 76%;  top: 68%; filter: blur(14px); border-radius: 50% 50% 60% 40%; }
#playerSmoke .smoke-particle:nth-child(10) { width: 150px; height: 110px; left: 8%;   top: 56%; filter: blur(16px); border-radius: 45% 55% 50% 50%; }
#playerSmoke .smoke-particle:nth-child(11) { width: 140px; height: 105px; left: 38%;  top: 54%; filter: blur(16px); border-radius: 55% 45% 45% 55%; }
#playerSmoke .smoke-particle:nth-child(12) { width: 155px; height: 115px; left: 65%;  top: 58%; filter: blur(16px); border-radius: 50% 50% 55% 45%; }
#playerSmoke .smoke-particle:nth-child(13) { width: 240px; height: 180px; left: 25%;  top: 72%; filter: blur(16px); border-radius: 55% 45% 50% 50%; }
#playerSmoke .smoke-particle:nth-child(14) { width: 220px; height: 160px; left: 45%;  top: 74%; filter: blur(16px); border-radius: 45% 55% 55% 45%; }

/* Player smoke — connective fill (large, soft, low opacity) */
#playerSmoke .smoke-particle:nth-child(15) { width: 350px; height: 200px; left: -3%;  top: 74%; filter: blur(28px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(16) { width: 380px; height: 220px; left: 25%;  top: 72%; filter: blur(30px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(17) { width: 340px; height: 200px; left: 55%;  top: 74%; filter: blur(28px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(18) { width: 320px; height: 190px; left: 10%;  top: 60%; filter: blur(28px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(19) { width: 350px; height: 200px; left: 45%;  top: 58%; filter: blur(30px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(20) { width: 280px; height: 160px; left: 5%;   top: 50%; filter: blur(26px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(21) { width: 300px; height: 170px; left: 40%;  top: 52%; filter: blur(28px); border-radius: 50%; }
#playerSmoke .smoke-particle:nth-child(22) { width: 400px; height: 250px; left: 18%;  top: 64%; filter: blur(32px); border-radius: 50%; }

/* Enemy smoke — particle sizes and blur only.
   Positions are set dynamically by JS based on actual ship locations. */
#enemySmoke .smoke-particle:nth-child(1)  { width: 90px;  height: 70px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(2)  { width: 110px; height: 80px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(3)  { width: 70px;  height: 55px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(4)  { width: 100px; height: 75px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(5)  { width: 80px;  height: 60px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(6)  { width: 120px; height: 85px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(7)  { width: 75px;  height: 60px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(8)  { width: 95px;  height: 70px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(9)  { width: 65px;  height: 50px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(10) { width: 80px;  height: 65px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(11) { width: 60px;  height: 50px;  filter: blur(10px); }
#enemySmoke .smoke-particle:nth-child(12) { width: 90px;  height: 65px;  filter: blur(10px); }