/* Player Ship Designer styles. Reuses the boss designer's overlay shell
   (.bd-player-overlay / .bd-player-shell from bossdesigner.css). */

.sd-wrap { display: flex; flex-direction: column; gap: 10px; }

.sd-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sd-head .panel-title { margin: 0; }
.sd-head input[type="text"],
.sd-head select {
  padding: 7px 10px;
  background: rgba(10, 15, 30, 0.7); color: #e8e0cc;
  border: 1px solid #39435f; border-radius: 6px;
  font-family: "Space Grotesk", sans-serif; font-size: 15px;
}
.sd-head input[type="text"] {
  flex: 1 1 200px; min-width: 140px;
}
.sd-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-limit { font-size: 12px; opacity: 0.75; margin-left: 8px; }

.sd-blurb {
  font-size: 13px; line-height: 1.45; opacity: 0.9;
  background: rgba(94, 200, 255, 0.07); border: 1px solid rgba(94, 200, 255, 0.25);
  border-radius: 8px; padding: 8px 12px;
}

.sd-lib { display: flex; flex-direction: column; gap: 6px; }
.sd-lib-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 8px 12px; flex-wrap: wrap;
}
.sd-lib-name { display: flex; flex-direction: column; gap: 2px; }
.sd-lib-meta { font-size: 12px; opacity: 0.8; display: flex; gap: 8px; flex-wrap: wrap; }
.sd-lib-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-ok { color: #8aff9d; }
.sd-bad { color: #ff8d7a; }
.sd-danger { color: #ff8d7a; }
.sd-empty { opacity: 0.7; font-style: italic; padding: 10px 4px; }

.sd-lib-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.sd-lib-toolbar input[type="text"] {
  flex: 1 1 220px; min-width: 160px; padding: 7px 10px;
  background: rgba(10, 15, 30, 0.7); color: #e8e0cc;
  border: 1px solid #39435f; border-radius: 6px;
  font-family: "Space Grotesk", sans-serif; font-size: 14px;
}
.sd-lib-select { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.85; cursor: pointer; }
.sd-lib-row-head { background: transparent; border: none; padding: 2px 12px; }
.sd-lib-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px;
}

.sd-editor {
  display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: start;
}
.sd-side { display: flex; flex-direction: column; gap: 10px; }

.sd-stats { display: flex; flex-direction: column; gap: 6px; }
.sd-stat {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 6px 10px; font-size: 14px;
}
.sd-ticker { display: flex; align-items: center; gap: 10px; }
.sd-ticker b { min-width: 18px; text-align: center; font-size: 16px; }

.sd-points {
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 8px 10px;
}
.sd-points-total { font-family: "Pirata One", cursive; font-size: 22px; color: #ffd75e; }
.sd-points-total.over { color: #ff5d5d; }
.sd-points-rows { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; opacity: 0.85; margin-top: 4px; }

.sd-checklist { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.sd-check { opacity: 0.75; color: #ffb08a; }
.sd-check.ok { color: #8aff9d; opacity: 0.9; }

.sd-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sd-palette-title {
  color: #ffd75e; font-size: 11px; font-weight: 700; grid-column: 1 / -1;
  letter-spacing: .07em; margin: 2px 2px 1px; text-transform: uppercase;
}
.sd-tool {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  background: rgba(20, 26, 48, 0.8); color: #e8e0cc;
  border: 1px solid #2c3654; border-radius: 7px; cursor: pointer;
  font-family: "Space Grotesk", sans-serif; font-size: 12.5px; text-align: left;
}
.sd-tool:hover { border-color: #5ec8ff; }
.sd-tool.exhausted { cursor: not-allowed; opacity: .52; }
.sd-tool.exhausted[data-tool="core"] { cursor: pointer; }
.sd-card-tool.exhausted { cursor: pointer; opacity: .68; }
.sd-tool.active {
  border-color: var(--tool-color, #ffd75e);
  box-shadow: 0 0 0 1px var(--tool-color, #ffd75e) inset;
}
.sd-tool-icon { font-size: 16px; }
.sd-tool-label {
  flex: 1 1 auto;
  line-height: 1.12;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sd-tool-remaining {
  align-items: center; background: rgba(4, 8, 18, .75); border: 1px solid #52607f;
  border-radius: 999px; color: #fff0ad; display: inline-flex; font-size: 11px;
  font-weight: 700; height: 20px; justify-content: center; margin-left: auto; min-width: 20px;
  padding: 0 5px;
}
.sd-tool-note { font-size: 12px; opacity: 0.8; min-height: 30px; }

.sd-lane-toggle { font-size: 13px; display: flex; gap: 6px; align-items: center; }

.sd-art-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  height: 32px;
  padding: 0 8px;
  background: rgba(20, 26, 48, 0.75);
  border: 1px solid #2c3654;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.sd-art-toggle:hover {
  border-color: #5ec8ff;
}
.sd-art-toggle input[type="checkbox"] {
  display: none;
}
.sd-toggle-slider {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  background: rgba(10, 15, 30, 0.7);
  border: 1px solid #39435f;
  border-radius: 12px;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sd-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #bfc8dc;
  border-radius: 10px;
  transition: left 0.2s ease;
}
.sd-art-toggle input[type="checkbox"]:checked + .sd-toggle-slider {
  background: rgba(94, 200, 255, 0.2);
  border-color: #5ec8ff;
}
.sd-art-toggle input[type="checkbox"]:checked + .sd-toggle-slider::before {
  left: 22px;
  background: #5ec8ff;
}
.sd-art-toggle-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.sd-art-toggle-disabled:hover {
  border-color: #2c3654;
}

/* StarDock: deck preview, secondary-lane placement, upgrade picker */
.sd-deck, .sd-lanes-panel, .sd-upgrade {
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.sd-lanes-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.sd-deck-row { font-size: 13px; }
.sd-empty-deck { opacity: 0.7; font-style: italic; }

.sd-lane-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.sd-lane-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; font-size: 13px;
  background: rgba(10, 15, 30, 0.7); border: 1px solid #39435f; color: #e8e0cc;
}
.sd-lane-chip.clickable { cursor: pointer; }
.sd-lane-chip.clickable:hover { border-color: #5ec8ff; }
.sd-lane-chip.ok { border-color: #3f9e5f; color: #8aff9d; }
.sd-lane-chip.bad { border-color: #b0503f; color: #ffb08a; }
.sd-lane-chip.picking { border-color: #8fd7ff; box-shadow: 0 0 0 1px #8fd7ff inset; color: #8fd7ff; }
.sd-lane-clear {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 11px; padding: 0 0 0 2px; opacity: 0.7;
}
.sd-lane-clear:hover { opacity: 1; }
.sd-lane-actions { display: flex; gap: 6px; }
.sd-lane-hint { font-size: 12px; opacity: 0.75; line-height: 1.4; }

.sd-upgrade-row {
  display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer;
}

.sd-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sd-mode-tabs { margin-top: 6px; margin-bottom: 4px; }
#sd-functional-group { display: flex; flex-direction: column; gap: 10px; }
#sd-edit-controls { display: flex; flex-direction: column; gap: 10px; }

.sd-builder-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(20, 26, 48, 0.75);
  border: 1px solid #2c3654;
  border-radius: 8px;
  padding: 4px;
}
.sd-mode-btn {
  padding: 10px 12px;
  background: rgba(10, 15, 30, 0.7);
  color: #bfc8dc;
  border: 1px solid #39435f;
  border-radius: 6px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sd-mode-btn:hover {
  border-color: #5d63ff;
  color: #e8e0cc;
}
.sd-mode-btn.sd-mode-active {
  background: rgba(93, 99, 255, 0.2);
  color: #5d63ff;
  border-color: #5d63ff;
}

.sd-parts-hider {
  margin-top: 6px;
}
.sd-parts-hider.hidden {
  display: none;
}

.sd-print {
  min-height: 66vh;
  max-height: 74vh;
  overflow: auto;
  padding: 10px;
  background: #060b15;
  border: 1px solid #2c3654;
  border-radius: 10px;
}
.sd-print-preview {
  width: min(100%, 920px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.sd-print-preview svg {
  width: 100%;
  height: auto;
  display: block;
}
.sd-print-controls {
  background: rgba(20, 26, 48, 0.75);
  border: 1px solid #2c3654;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #bfc8dc;
  font-size: 13px;
}
.sd-print-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sd-print-controls select {
  background: #0a1020;
  border: 1px solid #39435f;
  border-radius: 6px;
  color: #e8e0cc;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}
#sd-print-zoom { flex: 1; min-width: 90px; accent-color: var(--gold); }
#sd-print-zoom-value { color: #e8e0cc; min-width: 42px; text-align: right; }
.sd-print-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sd-side textarea {
  width: 100%; resize: vertical; padding: 7px 10px;
  background: rgba(10, 15, 30, 0.7); color: #e8e0cc;
  border: 1px solid #39435f; border-radius: 6px;
  font-family: "Space Grotesk", sans-serif; font-size: 13px;
}

.sd-problems { font-size: 12.5px; color: #ffb08a; display: flex; flex-direction: column; gap: 2px; }

.sd-bonus-palette {
  margin: 10px 0; padding: 10px; border: 1px solid rgba(94, 200, 255, .38);
  border-radius: 8px; background: rgba(38, 91, 110, .16);
}
.sd-bonus-palette .sd-tool { margin: 3px; }

/* ── Rework: class selector, component counter, card palette ───────────── */
.sd-class { display: flex; flex-direction: column; gap: 6px; }
.sd-class-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-class-btn {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: rgba(20, 26, 48, 0.8); color: #e8e0cc;
  border: 1px solid #2c3654; border-radius: 8px; padding: 7px 9px; cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
}
.sd-class-btn b { font-size: 13.5px; }
.sd-class-btn span { font-size: 11px; opacity: 0.72; }
.sd-class-btn:hover:not(.disabled) { border-color: #5ec8ff; }
.sd-class-btn.active { border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e inset; }
.sd-class-btn.disabled { opacity: 0.42; cursor: not-allowed; }

/* ── appearance (ship paint) ──────────────────────────────────────────── */
.sd-appearance { display: flex; flex-direction: column; gap: 6px; }
.sd-paint-preview-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 8px; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(40, 52, 84, 0.55), rgba(8, 12, 24, 0.9));
  border: 1px solid #2c3654;
}
.sd-paint-preview { image-rendering: pixelated; max-width: 100%; height: auto; }
.sd-paint-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; margin-top: 2px; }
.sd-paint-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-paint-theme {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: rgba(20, 26, 48, 0.8); color: #e8e0cc;
  border: 1px solid #2c3654; border-radius: 8px; padding: 7px 9px; cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
}
.sd-paint-theme b { font-size: 13px; }
.sd-paint-theme span { font-size: 10.5px; opacity: 0.7; }
.sd-paint-theme:hover { border-color: #5ec8ff; }
.sd-paint-theme.active { border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e inset; }
.sd-paint-ways { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-paint-way {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(20, 26, 48, 0.8); color: #e8e0cc;
  border: 1px solid #2c3654; border-radius: 999px; padding: 3px 9px 3px 4px;
  font-family: "Space Grotesk", sans-serif; font-size: 11.5px;
}
.sd-paint-way:hover { border-color: #5ec8ff; }
.sd-paint-way.active { border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e inset; }
.sd-paint-theme.locked, .sd-paint-way.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.sd-paint-theme.locked:hover, .sd-paint-way.locked:hover { border-color: #2c3654; }
.sd-paint-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  background:
    radial-gradient(circle at 68% 68%, var(--sw-glow) 0 30%, transparent 32%),
    linear-gradient(135deg, var(--sw-accent) 0 45%, var(--sw-hull) 46% 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.sd-paint-mode-pill {
  display: flex; background: rgba(20, 26, 48, 0.8); border: 1px solid #2c3654;
  border-radius: 999px; padding: 3px; gap: 2px;
}
.sd-paint-mode-btn {
  flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; border: none;
  background: transparent; color: #a9b4d0; font-family: "Space Grotesk", sans-serif;
  font-size: 12px; cursor: pointer;
}
.sd-paint-mode-btn:hover { color: #e8e0cc; }
.sd-paint-mode-btn.active { background: #2c3654; color: #ffd75e; }
.sd-paint-tex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-paint-tex-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: rgba(20, 26, 48, 0.8); color: #e8e0cc;
  border: 1px solid #2c3654; border-radius: 8px; padding: 6px; cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
}
.sd-paint-tex-tile img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px;
  image-rendering: pixelated;
}
.sd-paint-tex-tile span {
  font-size: 11px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%;
}
.sd-paint-tex-tile:hover { border-color: #5ec8ff; }
.sd-paint-tex-tile.active { border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e inset; }
.sd-paint-tex-tile.custom-empty { justify-content: center; min-height: 64px; }
.sd-gallery-pager {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 12px; color: #a9b4d0; margin-top: 2px;
}
.sd-hue-wheel-row { display: flex; flex-wrap: wrap; gap: 20px; }
.sd-hue-wheel-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sd-hue-wheel-wrap { position: relative; width: 96px; height: 96px; flex: none; }
.sd-hue-wheel {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%),
    hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%));
  border: 2px solid #2c3654; cursor: crosshair; touch-action: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  -webkit-mask: radial-gradient(circle, transparent 0 24px, #000 25px 100%);
  mask: radial-gradient(circle, transparent 0 24px, #000 25px 100%);
}
.sd-hue-wheel-dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #10141f; box-shadow: 0 0 0 1px #ffd75e;
  top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
/* Sibling of .sd-hue-wheel, not a child — the wheel's donut-hole mask
   clips its own descendants too, which would erase anything placed inside it. */
.sd-hue-wheel-auto {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20, 26, 48, 0.9); border: 1px solid #2c3654;
  font-size: 11px; font-weight: 700; color: #a9b4d0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sd-hue-wheel-auto:hover { color: #e8e0cc; border-color: #5ec8ff; }

.sd-counter {
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 8px 12px;
}
.sd-counter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-counter-items { display: flex; gap: 12px; font-size: 14px; font-weight: 600; }
.sd-counter-items span:first-child { color: #ffb08a; }
.sd-counter-items span:first-child.ok { color: #8aff9d; }
.sd-counter-items span:last-child { color: #ffb08a; }
.sd-counter-items span:last-child.ok { color: #8aff9d; }
.sd-battle-ready-check {
  width: 20px;
  height: 20px;
  cursor: not-allowed;
  accent-color: #8aff9d;
}

.sd-palette-done { color: #8aff9d; font-size: 10px; font-weight: 700; }

.sd-card-palette { display: flex; flex-direction: column; gap: 8px; }
.sd-card-count {
  float: right; font-size: 10px; font-weight: 700; color: #ffb08a;
  background: rgba(4, 8, 18, .6); border-radius: 999px; padding: 1px 7px;
}
.sd-card-count.ok { color: #8aff9d; }
.sd-card-tier-group {
  border: 1px solid #2c3654; border-left: 3px solid var(--family-color, #62bba1);
  border-radius: 8px; padding: 7px 9px; background: rgba(20, 26, 48, 0.55);
  display: flex; flex-direction: column; gap: 6px;
}
.sd-card-tier-head { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.sd-tier-summary { display: inline-flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.sd-card-tier-head .sd-tier-pill { margin-left: auto; }
.sd-tier-pill {
  font-size: 10.5px; font-weight: 700; color: var(--tier-color, #6fae7f);
  background: rgba(4, 8, 18, .6); border: 1px solid var(--tier-color, #6fae7f);
  border-radius: 999px; padding: 1px 8px; cursor: pointer;
}
.sd-tier-pill:hover { filter: brightness(1.25); }
.sd-card-tier-empty { padding: 8px 4px; }
.sd-card-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sd-card-tool {
  align-items: center;
  background:
    linear-gradient(90deg, var(--tool-color, #2c3654) 0 4px, transparent 4px),
    linear-gradient(135deg, var(--card-bg, rgba(20, 26, 48, 0.8)), rgba(20, 26, 48, 0.86));
  border-color: color-mix(in srgb, var(--tool-color, #2c3654) 72%, #2c3654);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  min-height: 50px;
  padding-left: 10px;
}
.sd-card-tool:hover { border-color: var(--tool-color, #5ec8ff); }
.sd-card-tool.active { box-shadow: 0 0 0 2px var(--tool-color, #ffd75e) inset; }
.sd-card-tool .sd-tool-icon {
  color: var(--tool-color, #e8e0cc);
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  line-height: 1;
}
.sd-card-tool .sd-tool-label {
  align-self: center;
  font-size: 12px;
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-right: 6px;
  white-space: normal;
}
.sd-card-tool .sd-tool-remaining {
  color: #eef3ff;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin-left: 0;
}
.sd-card-legacy { border-left-color: #8a93a5; opacity: 0.85; }

.sd-card-preview {
  display: flex; justify-content: center; align-items: center; min-height: 40px;
  background: rgba(8, 12, 26, 0.6); border: 1px solid #2c3654; border-radius: 8px; padding: 8px;
}
.sd-card-preview.empty { min-height: 0; padding: 6px 10px; }
.sd-card-preview-hint { font-size: 12px; opacity: 0.7; font-style: italic; text-align: center; }
.sd-card-preview .card { transform: scale(0.92); }

.sd-check-head { font-size: 12px; font-weight: 700; color: #ffd75e; opacity: 0.9; }
.sd-lane-status { font-size: 11.5px; opacity: 0.85; align-self: center; }
.sd-lane-status.ok { color: #8aff9d; }
.sd-lane-status.bad { color: #ffb08a; }

.sd-adv-lanes { margin-top: 2px; border-top: 1px dashed #2c3654; padding-top: 5px; }
.sd-adv-lanes > summary {
  cursor: pointer; font-size: 12px; opacity: 0.8; list-style: none;
  color: #bfc8dc; user-select: none;
}
.sd-adv-lanes > summary::before { content: "▸ "; }
.sd-adv-lanes[open] > summary::before { content: "▾ "; }
.sd-adv-lanes-body { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* Tier progress popup */
.sd-tier-progress { font-size: 13px; opacity: 0.9; }
.sd-tier-list { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow: auto; margin: 8px 0; }
.sd-tier-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: rgba(20, 26, 48, 0.7); border: 1px solid #2c3654; border-radius: 7px; padding: 6px 9px;
}
.sd-tier-row.locked { opacity: 0.5; }
.sd-tier-row-meta { font-size: 11.5px; opacity: 0.75; margin-left: auto; text-align: right; }

.sd-longpress-tip {
  position: fixed; z-index: 999; max-width: 220px; font-size: 12px; line-height: 1.3;
  background: #0c1220; color: #eef3ff; border: 1px solid #52607f; border-radius: 6px;
  padding: 6px 9px; box-shadow: 0 6px 18px rgba(0,0,0,.5); pointer-events: none;
}

.sd-board-wrap {
  background: radial-gradient(circle at 50% 40%, rgba(40, 52, 90, 0.55), rgba(8, 12, 26, 0.9));
  border: 1px solid #2c3654; border-radius: 10px; padding: 8px;
  overflow: hidden; touch-action: none; /* pinch-zoom is handled ourselves */
}
.sd-board-wrap svg {
  width: 100%; max-height: 74vh; display: block;
  transform-origin: center center; transition: transform .06s linear;
}
.sd-cell { cursor: pointer; }
.sd-cell:hover { stroke: #5ec8ff; stroke-width: 2.6; }
.sd-cell.blocked { cursor: not-allowed; }
.sd-cell.blocked:hover { stroke: #667085; }
.sd-lane-block line {
  opacity: .42;
  stroke: #7b8496;
  stroke-linecap: round;
  stroke-width: 3.2;
}

/* Lobby: "Your Ship" picker row */
.ship-pick-label select { max-width: 220px; }

/* Build New Content hub popup */
.bd-hub-actions { display: flex; gap: 12px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.bd-hub-actions .btn { display: flex; flex-direction: column; align-items: center; padding: 14px 22px; }

@media (max-width: 860px) {
  .sd-editor { grid-template-columns: 1fr; }
  .sd-board-wrap svg { max-height: 52vh; }
  .sd-tools { grid-template-columns: 1fr 1fr 1fr; }
  /* A ship is open: its own head (Return / name / Info / Save) covers
     navigation, so the overlay's outer Back-to-Port + Info row would just
     be a second, redundant header — collapse to the one 4-button row. */
  .bd-player-overlay.sd-editing .bd-player-toprow { display: none; }
  /* Return/Info collapse to icon-only (Save keeps its label) so the name
     field has room and all four controls fit on one line. Scoped to the
     editor's own head (.sd-head-editor) — the library head reuses .sd-head
     too, but has more/wider controls (name + class picker + 2 buttons) that
     need to wrap to multiple rows instead of forcing horizontal scroll. */
  .sd-head-editor { flex-wrap: nowrap; }
  .sd-head-editor .sd-head-text { display: none; }
  .sd-head-editor input[type="text"] { flex: 1 1 auto; min-width: 0; }
  .sd-head-editor .sd-head-actions { flex-wrap: nowrap; }
}