@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap');

/* ─── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --parchment:    #f0e6c8;
  --parchment-dk: #e0d0a0;
  --parchment-lt: #f8f0d8;
  --ink:          #2c1810;
  --ink-faint:    #6b4c3b;
  --red:          #8b2020;
  --gold:         #c8a84b;
  --gold-dk:      #8b6914;
  --sea:          #b8d4e0;
  --green:        #4a7c59;
  --border:       #8b6914;
  --border-lt:    #c8a84b66;
  --panel-bg:     #ede0ba;
  --shadow:       0 2px 8px #2c181033;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'IM Fell English', Georgia, 'Times New Roman', serif;
  background: var(--parchment);
  background-image:
    radial-gradient(ellipse at 12% 20%, rgba(139,105,20,0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 88% 80%, rgba(44,24,16,0.05) 0%, transparent 42%);
  color: var(--ink);
  font-size: 14px;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
body {
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#map-section {
  flex: 0 0 auto;
  width: 100%;
  /* Height follows the procedural SVG viewBox ratio 880:300 ≈ 34.1% of width,
     capped at 52 vh so fleet/detail panels keep adequate space. */
  height: min(52vh, calc(100vw * 300 / 880));
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  background: var(--sea);
}

#map-container {
  width: 100%;
  height: 100%;
}

#map-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

#bottom-section {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

#fleet-panel {
  flex: 0 0 34%;
  border-right: 2px solid var(--border);
  background: var(--panel-bg);
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#detail-panel {
  flex: 1;
  background: var(--parchment-lt);
  overflow-y: auto;
  padding: 12px 16px;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
#header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  background: var(--ink);
  border-bottom: 3px solid var(--gold);
  box-shadow: var(--shadow);
}

#game-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 4px;
  text-shadow: 0 0 16px #c8a84b66, 0 1px 0 #00000044;
}

#resources {
  display: flex;
  gap: 20px;
}

.resource {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--parchment);
  font-size: 13px;
}

.res-icon { font-size: 14px; }

.res-label {
  color: var(--parchment-dk);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px;
  letter-spacing: 1.5px;
}

#resources span[id] {
  color: var(--gold);
  font-weight: bold;
  font-size: 15px;
  font-family: 'Courier New', monospace;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
#footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 14px;
  background: var(--ink);
  border-top: 2px solid var(--gold-dk);
  gap: 10px;
}

#footer-left, #footer-right {
  display: flex;
  gap: 6px;
  align-items: center;
}

#inventory-display {
  flex: 1;
  text-align: center;
  color: var(--parchment-dk);
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

.inv-label {
  color: var(--gold);
  font-variant: small-caps;
  letter-spacing: 1px;
  margin-right: 6px;
}

.cargo-item {
  margin: 0 8px;
  color: var(--parchment);
}

.cargo-item strong {
  color: var(--gold);
}

.btn-footer {
  background: transparent;
  border: 1px solid var(--gold-dk);
  color: var(--parchment-dk);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10.5px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
}

.btn-footer:hover {
  background: var(--gold-dk);
  color: var(--parchment);
}

.btn-danger { border-color: var(--red); color: #c06060; }
.btn-danger:hover { background: var(--red); color: var(--parchment); }

/* Hide file input inside label */
#import-file { display: none; }
#btn-import-label { cursor: pointer; }

/* ─── Fleet panel ─────────────────────────────────────────────────────────── */
.panel-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold-dk);
  border-bottom: 1px solid var(--border-lt);
  padding-bottom: 5px;
  margin-bottom: 2px;
}

.ship-card {
  background: var(--parchment);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
}

.ship-card.at-sea  { border-left: 3px solid #3a78b0; background: #eef4f8; }
.ship-card.damaged { border-left: 3px solid var(--red); background: #f8eeee; }

.ship-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ship-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--ink);
}

.ship-type-badge {
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 1px;
  color: var(--ink-faint);
  background: var(--parchment-dk);
  padding: 1px 5px;
  border-radius: 2px;
}

.ship-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: var(--ink-faint);
}

.ship-status {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.5px;
}

.ship-status.docked  { color: var(--green); }
.ship-status.at-sea  { color: #3a78b0; }
.ship-status.damaged { color: var(--red); }

.btn-repair {
  margin-top: 2px;
  background: var(--parchment-dk);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10.5px;
  font-family: 'Cinzel', Georgia, serif;
  transition: background 0.15s;
}

.btn-repair:hover { background: var(--red); color: var(--parchment); }

/* ─── Detail panel — shared ───────────────────────────────────────────────── */
.placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 13px;
  margin-top: 20px;
  text-align: center;
}

.panel-route-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.panel-route-header h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink);
}

.danger-badge {
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 1px;
  border: 1px solid var(--dc, #4a7c59);
  color: var(--dc, #4a7c59);
  background: color-mix(in srgb, var(--dc, #4a7c59) 12%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
}

.route-desc {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 10px;
  border-left: 2px solid var(--border-lt);
  padding-left: 8px;
}

.missions-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--gold-dk);
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--border-lt);
  padding-bottom: 3px;
}

/* ─── Mission cards (route overview) ─────────────────────────────────────── */
.mission-card {
  background: var(--parchment);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mission-card.unaffordable { opacity: 0.55; }

.mission-name {
  font-weight: bold;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}

.mission-info {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: 'Courier New', monospace;
}

.btn-select-mission {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold-dk);
  padding: 4px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10.5px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}

.btn-select-mission:hover:not(:disabled) { background: var(--gold-dk); color: var(--parchment); }
.btn-select-mission:disabled { opacity: 0.45; cursor: default; }

/* ─── Mission detail (ship selection) ────────────────────────────────────── */
.mission-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mission-req {
  font-size: 12px;
  color: var(--ink-faint);
  font-family: 'Courier New', monospace;
  margin-bottom: 3px;
}

.ok  { color: var(--green); }
.err { color: var(--red); }

.battle-warning {
  background: #f8e8e8;
  border: 1px solid #d09090;
  border-left: 3px solid var(--red);
  border-radius: 3px;
  padding: 7px 10px;
  font-size: 12px;
  color: #5a1a1a;
  margin: 8px 0;
}

.ship-select-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--gold-dk);
  margin: 10px 0 5px;
  border-bottom: 1px solid var(--border-lt);
  padding-bottom: 3px;
}

.ship-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  cursor: pointer;
  background: var(--parchment);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.ship-select:hover { background: var(--parchment-dk); border-color: var(--gold); }
.ship-select.selected { background: #e8f0e8; border-color: var(--green); }

.ship-select input { cursor: pointer; accent-color: var(--green); }

.ship-mini-stats {
  margin-left: auto;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: var(--ink-faint);
  white-space: nowrap;
}

.ship-select.unavailable {
  opacity: 0.6;
  cursor: default;
  background: #f8eeee;
  border-color: #d09090;
}

.ship-select.unavailable input { cursor: default; }

.ship-unavail-reason {
  width: 100%;
  font-size: 11px;
  color: var(--red);
  font-style: italic;
  margin-top: 2px;
}

.no-ships {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
  margin: 8px 0;
}

/* ─── Battle odds ─────────────────────────────────────────────────────────── */
.odds-section {
  margin: 10px 0 8px;
  background: var(--parchment);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.odds-label {
  font-size: 12px;
  font-family: 'Courier New', monospace;
  color: var(--ink-faint);
}

.odds-bar-wrap {
  height: 8px;
  background: var(--parchment-dk);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-lt);
}

.odds-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
}

.odds-pct {
  font-weight: bold;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

/* ─── Unlock info (locked route panel) ───────────────────────────────────── */
.unlock-req-box {
  background: color-mix(in srgb, var(--parchment-dk) 60%, transparent);
  border: 1px solid var(--border-lt);
  border-left: 3px solid #5a6878;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0;
}
.unlock-req-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.unlock-req-desc {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
}
.unlock-progress-text {
  font-size: 11px;
  font-family: 'Courier New', monospace;
  margin-top: 4px;
}
.unlock-chain {
  margin-top: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 4px;
}
.unlock-chain-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-faint);
  margin-bottom: 5px;
  font-family: 'Cinzel', Georgia, serif;
}
.unlock-chain-item {
  display: inline-block;
  font-size: 11px;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 10px;
  padding: 2px 8px;
  margin: 2px 3px 2px 0;
}

/* ─── Unlock section (inside route overview) ─────────────────────────────── */
.route-unlocks-section {
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--parchment-dk) 50%, transparent);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
}
.route-unlocks-title {
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.route-unlock-item {
  margin-bottom: 6px;
}
.route-unlock-item.already-unlocked {
  opacity: 0.55;
}
.route-unlock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.route-unlock-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.route-unlock-req {
  font-size: 11px;
  font-family: 'Courier New', monospace;
  color: var(--ink-faint);
}

/* ─── Fire barrels ────────────────────────────────────────────────────────── */
.fire-barrel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.btn-fb {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold-dk);
  width: 22px;
  height: 22px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}

.btn-fb:hover { background: var(--gold-dk); }

.fb-val {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  min-width: 16px;
  text-align: center;
}

.fb-stock { color: var(--ink-faint); font-size: 11px; }
.fb-bonus { color: var(--green); font-size: 11px; font-weight: bold; }

/* ─── Time estimate & launch ──────────────────────────────────────────────── */
.time-estimate {
  font-size: 12px;
  color: var(--ink-faint);
  font-family: 'Courier New', monospace;
  margin: 6px 0;
}

.btn-launch {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 0;
  background: var(--ink);
  color: var(--gold);
  border: 2px solid var(--gold-dk);
  border-radius: 3px;
  font-size: 13px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-launch:hover:not(:disabled) {
  background: var(--gold-dk);
  color: var(--parchment);
}

.btn-launch:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: var(--border-lt);
  color: var(--ink-faint);
}

.btn-back {
  background: transparent;
  border: 1px solid var(--border-lt);
  color: var(--ink-faint);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-family: Georgia, serif;
  flex-shrink: 0;
  transition: background 0.1s;
}

.btn-back:hover { background: var(--parchment-dk); }

/* ─── Active mission cards ────────────────────────────────────────────────── */
.active-missions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.active-mission-card {
  background: #eef4f8;
  border: 1px solid #a0c0d8;
  border-left: 3px solid #3a78b0;
  border-radius: 3px;
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.active-mission-card.ready {
  background: #eef8ee;
  border-color: #80b880;
  border-left-color: var(--green);
  animation: readyPulse 1.5s ease-in-out infinite;
}

@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 0 0 #4a7c5930; }
  50%       { box-shadow: 0 0 0 4px #4a7c5930; }
}

.am-name  { font-weight: bold; font-size: 13px; }
.am-route { font-size: 11px; color: var(--ink-faint); }
.am-time  { font-family: 'Courier New', monospace; font-size: 12px; }
.am-reward { font-size: 11px; color: var(--ink-faint); font-family: 'Courier New', monospace; }

.countdown   { color: #3a78b0; }
.ready-text  { color: var(--green); font-weight: bold; }

.btn-collect {
  margin-top: 5px;
  align-self: flex-start;
  background: var(--green);
  color: var(--parchment);
  border: none;
  padding: 4px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10.5px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}

.btn-collect:hover { background: #3a6648; }

/* ─── Battle result screen ───────────────────────────────────────────────── */
.battle-result {
  border-radius: 4px;
  border: 2px solid;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.battle-result.victory {
  background: #e8f4ee;
  border-color: var(--green);
}

.battle-result.defeat {
  background: #f8eaea;
  border-color: var(--red);
}

.battle-result-header {
  font-size: 12px;
  font-variant: small-caps;
  letter-spacing: 1px;
}

.battle-result.victory .battle-result-header { color: #2a5c3a; }
.battle-result.defeat  .battle-result-header { color: #5a1a1a; }

.battle-result-outcome {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
}

.battle-result.victory .battle-result-outcome { color: var(--green); }
.battle-result.defeat  .battle-result-outcome { color: var(--red); }

.battle-result-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}

.btn-battle-continue {
  align-self: flex-start;
  margin-top: 6px;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold-dk);
  padding: 7px 22px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 1.5px;
  transition: background 0.15s;
}

.btn-battle-continue:hover { background: var(--gold-dk); color: var(--parchment); }

/* ─── SVG map animation ───────────────────────────────────────────────────── */
.mission-pulse {
  animation: pulseShip 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulseShip {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ─── Log overlay ─────────────────────────────────────────────────────────── */
#log-panel {
  position: fixed;
  top: 50px;
  right: 0;
  width: 340px;
  height: calc(100vh - 92px);
  background: var(--ink);
  border-left: 2px solid var(--gold-dk);
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: -4px 0 16px #00000044;
  transition: transform 0.2s;
}

#log-panel.hidden { display: none; }

#log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gold-dk);
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 3px;
  font-size: 11px;
}

#btn-close-log {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.1s;
}

#btn-close-log:hover { color: var(--parchment); }

#log-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#log-content::-webkit-scrollbar { width: 4px; }
#log-content::-webkit-scrollbar-track { background: transparent; }
#log-content::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 2px; }

.log-entry {
  font-size: 11px;
  color: var(--parchment-dk);
  font-family: 'Courier New', monospace;
  border-bottom: 1px solid #ffffff0a;
  padding-bottom: 4px;
  line-height: 1.5;
}

/* ─── Header controls (lang toggle + help) ───────────────────────────────── */
#header-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-header-ctrl {
  background: transparent;
  border: 1px solid var(--gold-dk);
  color: var(--parchment-dk);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-header-ctrl:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: #ffffff0a;
}

/* ─── Help / Manual overlay ──────────────────────────────────────────────── */
#help-panel {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 94vw);
  max-height: calc(100vh - 100px);
  background: var(--ink);
  border: 2px solid var(--gold-dk);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: 0 8px 32px #00000066;
}

#help-panel.hidden { display: none; }

#help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gold-dk);
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 2px;
  font-size: 12px;
  flex-shrink: 0;
}

#btn-close-help {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 2px;
  transition: color 0.1s;
}

#btn-close-help:hover { color: var(--parchment); }

#help-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#help-content::-webkit-scrollbar { width: 4px; }
#help-content::-webkit-scrollbar-track { background: transparent; }
#help-content::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 2px; }

.help-section {
  border-bottom: 1px solid #ffffff0f;
  padding-bottom: 12px;
}

.help-section:last-child { border-bottom: none; }

.help-section h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.help-section p, .help-section li {
  font-size: 12px;
  color: var(--parchment-dk);
  line-height: 1.6;
  margin-bottom: 4px;
}

.help-section ul {
  list-style: none;
  padding-left: 4px;
}

.help-section ul li::before {
  content: '· ';
  color: var(--gold);
}

/* ─── Map zoom / pan ─────────────────────────────────────────────────────── */
#map-container { cursor: grab; user-select: none; }
#map-container.dragging { cursor: grabbing; }

/* ─── Market panel ────────────────────────────────────────────────────────── */
.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-lt);
}
.market-header h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  color: var(--gold-dk);
}
.market-close { /* reuses .btn-back */ }
.market-section-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 12px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-lt);
}
.market-buy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 6px;
}
.market-ship-card {
  background: var(--parchment-lt);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.market-ship-card.unaffordable { opacity: 0.55; }
.market-ship-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.market-price {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-dk);
  font-family: 'Courier New', monospace;
}
.btn-buy-ship, .btn-sell-ship, .btn-buy-barrels {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
}
.btn-buy-ship:disabled, .btn-sell-ship:disabled, .btn-buy-barrels:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.btn-buy-ship:hover:not(:disabled),
.btn-sell-ship:hover:not(:disabled),
.btn-buy-barrels:hover:not(:disabled) { background: var(--gold-dk); color: var(--parchment-lt); }
.market-sell-list { display: flex; flex-direction: column; gap: 5px; }
.market-sell-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--parchment-lt);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
  flex-wrap: wrap;
}
.market-sell-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  min-width: 80px;
}
.market-barrels-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 6px 8px;
  background: var(--parchment-lt);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
}

/* ─── Ship upgrade panel ──────────────────────────────────────────────────── */
.upgrade-ship-badge { margin-bottom: 10px; }
.upgrade-grid { display: flex; flex-direction: column; gap: 6px; }
.upgrade-row {
  display: grid;
  grid-template-columns: 1fr 90px 60px auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--parchment-lt);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
}
.upgrade-stat-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.upgrade-stat-val   { font-size: 11.5px; color: var(--ink-faint); font-family: 'Courier New', monospace; }
.upgrade-stars      { font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.btn-do-upgrade {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  white-space: nowrap;
}
.btn-do-upgrade:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-do-upgrade:hover:not(:disabled) { background: var(--gold-dk); color: var(--parchment-lt); }
.upgrade-reales {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: right;
}
.btn-upgrade-ship {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--gold-dk);
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  margin-top: 3px;
}
.btn-upgrade-ship:hover { background: var(--gold); color: var(--ink); }

/* ─── Scrollbar styling for panels ───────────────────────────────────────── */
#fleet-panel::-webkit-scrollbar,
#detail-panel::-webkit-scrollbar { width: 4px; }
#fleet-panel::-webkit-scrollbar-track,
#detail-panel::-webkit-scrollbar-track { background: var(--parchment-dk); }
#fleet-panel::-webkit-scrollbar-thumb,
#detail-panel::-webkit-scrollbar-thumb { background: var(--gold-dk); border-radius: 2px; }