/* Player Ship Designer styles. StarDock is its own screen (#screen-stardock,
   toggled by app.js showScreen like every other top-level screen) rather
   than a body-level overlay, so the StarMap can be torn down while it's
   open instead of animating underneath it. StarBreach (bossdesigner.js)
   still opens as a body-level overlay and keeps using .bd-player-overlay /
   .bd-player-shell from bossdesigner.css unchanged. */
#screen-stardock { background: rgba(5,8,16,.96); }
.sd-screen-shell { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; width: 100%; }
.bd-player-toprow { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bd-player-close { margin-bottom: 10px; }

/* note/status styles (duplicated from admin.css so the player-facing
   designer works on the main app, which does not load admin.css) */
#screen-stardock .admin-note { color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin: 6px 0 14px; }
#screen-stardock .admin-status { min-height: 22px; margin-top: 12px; font-size: 13px; }
#screen-stardock .admin-status.ok { color: #9fd8ae; }
#screen-stardock .admin-status.err { color: #ff9a8a; white-space: pre-wrap; }

.sd-wrap { display: flex; flex-direction: column; gap: 10px; }
/* Long presses on hex cells / the ship art / drag handles were triggering
   the mobile text-selection callout instead of the intended tap-and-hold or
   drag gesture. Blanket-disable selection across the editor, then opt the
   actual text fields (name, description) back in. */
.sd-wrap {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.sd-wrap input[type="text"], .sd-wrap textarea {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

.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-component-inventory {
  border: 1px solid rgba(255, 215, 94, .35); border-radius: 10px;
  background: rgba(255, 215, 94, .045); padding: 10px;
}
.sd-component-inventory .panel-sub { margin: 0 0 8px; }
.sd-component-table { display: flex; flex-direction: column; gap: 4px; }
.sd-component-row {
  display: grid; grid-template-columns: 52px minmax(130px, 1fr) minmax(100px, .7fr) 55px;
  align-items: center; gap: 8px; min-height: 42px; padding: 4px 8px;
  background: rgba(10, 15, 30, .5); border-radius: 6px; font-size: 13px;
}
.sd-component-head { min-height: auto; color: #aeb8d3; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.sd-component-art, .campaign-reward-art { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; vertical-align: middle; }
.sd-component-art canvas, .campaign-reward-art canvas { image-rendering: pixelated; max-width: 46px; max-height: 34px; }
/* Pinned heading/button, scrolling list in between — same recipe as
   .sd-tier-list below, but device-independent: the base .picker has no
   max-height of its own, so on any viewport a long enough list of newly
   acquired components pushed "Set course" off screen with no way to reach it. */
.sd-new-components-popup { max-width: 480px; max-height: 80dvh; display: flex; flex-direction: column; }
.sd-new-component-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; overflow-y: auto; min-height: 0; }
.sd-new-component { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(255, 215, 94, .3); border-radius: 7px; background: rgba(255, 215, 94, .08); }
.sd-new-texture-thumb { width: 28px; height: 28px; min-width: 28px; object-fit: cover; border-radius: 4px; image-rendering: pixelated; }
/* The one texture (if any) won on this exact StarDock visit, called out from
   whatever else was already pending — same gold-glow language the paint
   picker uses for "active" (.sd-paint-tex-tile.active). */
.sd-new-texture-fresh { border-color: #ffd75e; box-shadow: 0 0 0 1px #ffd75e inset; background: rgba(255, 215, 94, .16); }
.sd-new-texture-badge { margin-left: auto; font-size: 11px; color: #ffd75e; white-space: nowrap; }

@media (max-width: 560px) {
  .sd-component-row { grid-template-columns: 42px minmax(0, 1fr) 48px; }
  .sd-component-row > :nth-child(3) { display: none; }
}

.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;
}

/* Ships/Components/Textures tab bar. .side-tabs (pirate.css) defaults to a
   2-column grid for its other users (Fleet/Log, StarMap/Comms) — StarDock
   has three tabs, so it gets its own column count. */
.sd-lib-tabs { grid-template-columns: repeat(3, 1fr); }

/* Ships tab: a grid of pixel-art ship cards, 4 per row / 2 rows a page on
   desktop, 2 per row / 2 rows a page (4 total) on mobile — see shipPageSize()
   in shipdesigner.js, which the two column counts below must stay in sync
   with. */
.sd-ship-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.sd-ship-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(20, 26, 48, 0.75); border: 1px solid #2c3654;
  border-radius: 8px; padding: 10px;
}
.sd-ship-art {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 108px; cursor: pointer;
}
.sd-ship-art svg { max-width: 100%; max-height: 100%; }
.sd-ship-art-empty { font-size: 12px; opacity: 0.6; font-style: italic; }
.sd-ship-name { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.sd-ship-card .sd-lib-actions { justify-content: center; }

@media (max-width: 640px) {
  .sd-ship-grid { grid-template-columns: repeat(2, 1fr); }
}

.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-checklist { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.sd-counter .sd-checklist { margin-top: 6px; }
.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; }
/* Admin-only NPC ship toggle: flagged in warning colours because it turns the
   whole player rulebook off for this hull. */
.sd-npc-toggle {
  color: #ffb08a; border: 1px solid #6b3f2c; border-radius: 8px;
  padding: 4px 8px; margin-bottom: 6px; background: rgba(60, 26, 16, .35);
}

.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-current-ship { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 8px; background: rgba(212,167,72,.09); color: var(--ink); }
.sd-current-ship .sd-lib-meta { margin-left: 8px; }
.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; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.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; }

/* Pinned under the editor's head bar (name/save row) instead of buried at
   the bottom of the scrolling side panel, where it was easy to miss or
   fall off-screen entirely on tall layouts. */
.sd-status-top { margin: 0; min-height: 0; }
.sd-status-top:empty { display: none; }
.sd-status-top.err {
  padding: 8px 12px; border-radius: 7px;
  background: rgba(255, 138, 122, 0.12); border: 1px solid rgba(255, 138, 122, 0.4);
}
.sd-status-top.ok {
  padding: 8px 12px; border-radius: 7px;
  background: rgba(159, 216, 174, 0.12); border: 1px solid rgba(159, 216, 174, 0.4);
}

.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; position: relative; }
.sd-texture-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.sd-texture-collection-grid .sd-paint-tex-tile { padding: 4px; gap: 3px; min-width: 0; }
.sd-texture-collection-patch {
  width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 5px;
  background: rgba(4, 8, 18, .65);
}
.sd-texture-collection-patch img {
  width: 133.333%; height: 133.333%; max-width: none;
  margin: -16.666%; object-fit: cover; object-position: center;
}
.sd-texture-collection-grid .sd-paint-tex-tile span { font-size: 9.5px; }
/* Mobile-only swipe-page hint chevrons, overlaid on the gallery grid edges.
   Desktop keeps the text Prev/Next pager instead (see .sd-gallery-pager). */
.sd-swipe-btn { display: none; }
.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; }
/* Placeholder for an asset whose image is still streaming in behind the
   first page — keeps the grid from reflowing as chunks land. */
.sd-paint-tex-tile.loading {
  justify-content: center; min-height: 64px; cursor: default;
  border-style: dashed; opacity: 0.6; animation: sd-tile-pulse 1.4s ease-in-out infinite;
}
.sd-paint-tex-tile.loading:hover { border-color: #2c3654; }
@keyframes sd-tile-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
.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;
  flex-wrap: wrap; min-width: 0;
}
@media (max-width: 640px) {
  .sd-texture-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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; }
/* The magnitude a static-effect component grants, on its palette button. */
.sd-card-effect { color: #c9aef0; font-weight: 700; }
.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-starting-deck {
  width: 100%; margin-top: 14px; padding: 12px 14px;
  background: rgba(8, 12, 26, 0.6); border: 1px solid #2c3654; border-radius: 8px;
}
.sd-starting-deck-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.sd-starting-deck-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.sd-starting-deck-card { position: relative; }
.sd-starting-deck-count {
  position: absolute; top: -6px; right: -6px; background: #ffd75e; color: #1a1f33;
  font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 6px; line-height: 1.4;
}

.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-lane-arrangement {
  font-size: 11px; opacity: 0.7; align-self: center; letter-spacing: 0.02em;
}

.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; position: relative;
  touch-action: pan-y; /* zoom is via the slider now — leave vertical page scroll alone */
}
.sd-board-wrap svg {
  width: 100%; max-height: 74vh; display: block;
  transform-origin: center center; transition: transform .06s linear;
}
/* Vertical zoom slider docked to the right edge of the ship view — replaces
   pinch-zoom on mobile, sits alongside the still-working scroll-wheel zoom
   on desktop. The `writing-mode` trick renders a native range input
   vertically without a rotate-transform hack. */
.sd-board-zoom {
  position: absolute; top: 10%; right: 6px; height: 80%; width: 28px;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.sd-board-zoom input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;
  width: 20px; height: 100%; accent-color: #ffd75e; cursor: pointer;
}
/* Ship-view corner toggles: Components (hull-only) at bottom-left, Pan
   (texture drag) at bottom-right — same pill-slider look as .sd-art-toggle,
   just smaller and docked over the artwork instead of sitting in the
   sidebar. Pan's shown/hidden + checked state is synced by drawBoard(). */
.sd-board-toggle {
  position: absolute; bottom: 8px; z-index: 3; margin-top: 0;
  height: 26px; font-size: 12px; padding: 0 8px 0 10px; gap: 6px;
}
.sd-board-toggle .sd-toggle-slider { width: 32px; height: 18px; }
.sd-board-toggle .sd-toggle-slider::before { width: 14px; height: 14px; }
.sd-board-toggle input[type="checkbox"]:checked + .sd-toggle-slider::before { left: 16px; }
.sd-board-toggle-left { left: 8px; }
.sd-board-toggle-right { right: 8px; }
#sd-board-pan-toggle { display: none; }
.sd-cell { cursor: pointer; }

/* Lifetime tab: per-tile mean-hits-to-destroy heatmap + Max Lifetime button.
   Sibling of .sd-appearance in the side column, shown only in "lifetime"
   builder mode (see setBuilderMode). */
.sd-lifetime-panel { display: flex; flex-direction: column; gap: 8px; }
.sd-lifetime-ship { font-size: 13px; padding: 6px 0; }
.sd-lifetime-rows { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.sd-lifetime-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 4px 6px; border-radius: 6px; background: rgba(20, 28, 50, 0.5);
}
.sd-lifetime-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(255,255,255,0.25); }
.sd-lifetime-name { flex: 1; }
.sd-lifetime-value { opacity: 0.85; font-variant-numeric: tabular-nums; }

/* Spinner shown while the Lifetime tab waits on a /lifetime request — the
   heatmap simulation can take a moment at higher admin-configured trial
   counts, so a bare "Simulating…" line reads as stalled without it. */
.sd-lifetime-spinner-wrap {
  display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 13px; opacity: 0.9;
}
.sd-spinner { flex: none; color: #ffd75e; animation: sd-spin 0.9s linear infinite; }
#sd-max-lifetime .sd-spinner { color: inherit; width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sd-spinner { animation: none; }
}
.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; }

/* A ship is open: its own head (Return / Main / 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 row. Applies at
   all sizes, not just mobile, since the duplication exists on desktop too. */
#screen-stardock.sd-editing .bd-player-toprow { display: none; }

@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; }
  /* 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; }
  .sd-swipe-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; z-index: 2;
    background: rgba(12, 18, 32, 0.75); color: #ffd75e; border: 1px solid #52607f;
    font-size: 18px; line-height: 1; cursor: pointer;
  }
  .sd-swipe-btn:disabled { opacity: 0.35; cursor: default; }
  .sd-swipe-left { left: 2px; }
  .sd-swipe-right { right: 2px; }
}