/* Boss Ship Designer admin tab — styles are namespaced with .bd- so nothing
   here touches the rest of the admin console. */

.bd-designbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.bd-designbar select, .bd-designbar input, .bd-topbar input,
.bd-regionbar select, .bd-step select, .bd-step input {
  background: #0a1020; border: 1px solid var(--panel-edge); border-radius: 6px;
  color: var(--ink); padding: 7px 9px; font-size: 13px; font-family: inherit;
}
.bd-designbar select { min-width: 260px; }

.bd-topbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.bd-topbar label { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 13px; }
.bd-modes { display: flex; gap: 6px; margin-left: auto; }
.bd-mode.active { border-color: var(--gold); color: var(--gold-bright); }
#bd-save.attention { border-color: #ff9a8a; color: #ffb9ac; }

.bd-grid { display: grid; grid-template-columns: minmax(360px, 1fr) 340px; gap: 14px; }
@media (max-width: 1000px) { .bd-grid { grid-template-columns: 1fr; } }

.bd-board-wrap {
  background: #081020; border: 1px solid var(--panel-edge); border-radius: 10px; padding: 8px;
  position: relative;
}
.bd-board svg { width: 100%; max-height: 66vh; display: block; }
.bd-board { touch-action: none; }
.bd-view-reset { position: absolute; top: 12px; right: 12px; z-index: 3; }
.bd-view-reset.hidden { display: none; }
.bd-cell { cursor: pointer; }
.bd-cell:hover polygon:first-child { stroke: var(--gold-bright); stroke-width: 1.8; }
.bd-badge { font-size: 8px; font-weight: 700; pointer-events: none; font-family: "Space Grotesk", sans-serif; }
.bd-lane-num { font-size: 15px; font-family: "Pirata One", serif; }

.bd-side { display: flex; flex-direction: column; gap: 4px; }
.bd-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bd-tool.active { border-color: var(--gold); color: var(--gold-bright); }
#bd-tool-number-wrap, #bd-tool-stack-wrap {
  display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 13px; margin: 4px 0 8px;
}
#bd-tool-number-wrap.hidden, #bd-tool-stack-wrap.hidden { display: none; }
#bd-tool-number-wrap select, #bd-tool-stack-wrap select {
  background: #0a1020; border: 1px solid var(--panel-edge); border-radius: 6px;
  color: var(--ink); padding: 6px 8px;
}

.bd-regionbar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.bd-regionbar select { flex: 1; min-width: 0; }
.bd-shieldsubs { display: flex; gap: 6px; margin-bottom: 8px; }
.bd-shieldsub.active { border-color: var(--gold); color: var(--gold-bright); }
.bd-region-info { font-size: 13px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }
.bd-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  vertical-align: -1px; margin-right: 5px;
}

.bd-triggers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bd-trigger { color: var(--ink); font-size: 13px; display: flex; align-items: center; gap: 7px; }

.bd-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bd-step-header {
  display: grid; grid-template-columns: 18px 26px minmax(120px, auto) 1fr 100px; gap: 6px;
  align-items: center; color: var(--ink-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 0 8px;
}
.bd-step {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: #0d1426; border: 1px solid var(--panel-edge); border-radius: 8px; padding: 6px 8px;
}
.bd-step-index { color: var(--gold-bright); font-family: "Pirata One", serif; width: 20px; text-align: right; }
.bd-step-fields { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; }
.bd-step-fields label { display: flex; align-items: center; gap: 4px; color: var(--ink-dim); font-size: 12px; }
.bd-step input[type="number"] { width: 58px; }
.bd-step-actions { display: flex; gap: 4px; }

.bd-field { display: flex; flex-direction: column; gap: 4px; color: var(--ink-dim); font-size: 13px; margin-bottom: 10px; }
.bd-field select, .bd-fleet-row input, .bd-fleet-row select {
  background: #0a1020; border: 1px solid var(--panel-edge); border-radius: 6px;
  color: var(--ink); padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.bd-fleet-row { display: flex; gap: 14px; margin-bottom: 8px; }
.bd-fleet-row label { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 13px; }
.bd-fleet-row input[type="number"] { width: 58px; }
.bd-fleet-actions { border-collapse: collapse; font-size: 13px; color: var(--ink); }
.bd-fleet-actions th, .bd-fleet-actions td {
  border: 1px solid var(--panel-edge); padding: 5px 12px; text-align: center;
}
.bd-fleet-actions th { color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.bd-charges-row { display: flex; gap: 14px; }

.bd-supers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.bd-super-when label { display: flex; align-items: center; gap: 4px; color: var(--ink-dim); font-size: 12px; }
.bd-item-super { border-left: 3px solid #dea0ff; }
.bd-super-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px;
  border: 1px solid var(--panel-edge); border-radius: 8px; background: #0a1020; }
.bd-super-row select, .bd-super-row input {
  background: #0a1020; border: 1px solid var(--panel-edge); border-radius: 6px;
  color: var(--ink); padding: 4px 6px; font-size: 12px; font-family: inherit;
}
.bd-super-row select[data-f="effect"] { width: 100%; }
.bd-super-when { display: flex; gap: 6px; align-items: center; }
.bd-super-when input[type="number"] { width: 56px; }
#bd-goal-count-wrap.hidden { display: none; }
.bd-charges-row label { display: flex; align-items: center; gap: 6px; }
.bd-charges-row input {
  width: 52px; background: #0a1020; border: 1px solid var(--panel-edge); border-radius: 6px;
  color: var(--ink); padding: 5px 7px;
}
#bd-import-file { max-width: 190px; color: var(--ink-dim); font-size: 12px; }

.bd-lane-tools {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px; color: var(--ink-dim); font-size: 13px;
}
.bd-lane-tools.hidden { display: none; }
.bd-lane-tools label { display: flex; align-items: center; gap: 6px; }

.bd-step-drag { cursor: grab; color: var(--ink-dim); user-select: none; }
.bd-step-drag:active { cursor: grabbing; }

.bd-stacks { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.bd-strip-label { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* Progression track: two balanced columns read top-to-bottom, left first;
   the dashed arrow wraps from the bottom of column 1 to the top of column 2. */
.bd-prog-track {
  border: 1px solid var(--panel-edge); border-radius: 8px; padding: 8px 10px; background: #0d1426;
  display: flex; flex-direction: column; gap: 8px;
}
.bd-prog-cols { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 4px; align-items: stretch; }
.bd-prog-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bd-prog-wrap-arrow { color: var(--gold); opacity: .75; display: flex; }
.bd-prog-wrap-arrow svg { width: 100%; height: 100%; min-height: 60px; }
.bd-prog-chip {
  border: 1px solid var(--panel-edge); border-radius: 6px; padding: 4px 8px;
  font-size: 12px; color: var(--ink); background: #0a1020; cursor: grab; user-select: none;
}
.bd-prog-chip b { color: var(--gold-bright); font-family: "Pirata One", serif; margin-right: 3px; }
.bd-prog-chip.bd-kind-action_link { border-color: #ff9d6b; }
.bd-prog-chip.bd-kind-breacher_link { border-color: #d9a6ff; }
.bd-prog-chip.bd-kind-ability_trigger { border-color: #9dff8a; }

/* Stretch: every stack bar matches the tallest, so empty bars stay easy drop
   targets when dragging from a full one. */
.bd-stack-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: stretch; }
@media (max-width: 900px) { .bd-stack-cols { grid-template-columns: repeat(2, 1fr); } }
.bd-stack-col {
  border: 1px solid var(--panel-edge); border-radius: 8px; background: #0d1426;
  padding: 8px; min-height: 180px; display: flex; flex-direction: column; gap: 6px;
}
.bd-stack-col.drop-hover { border-color: var(--gold); background: #131c33; }
.bd-stack-head {
  color: var(--gold-bright); font-family: "Pirata One", serif; font-size: 16px;
  border-bottom: 1px solid var(--panel-edge); padding-bottom: 4px; margin-bottom: 2px;
}
.bd-stack-head { cursor: default; }
.bd-stack-item {
  border: 1px solid var(--panel-edge); border-left-width: 3px; border-radius: 6px;
  padding: 6px 8px; font-size: 12.5px; color: var(--ink); background: #0a1020;
  transition: box-shadow .1s ease, border-color .1s ease;
}
.bd-stack-item.bd-stack-hot {
  border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,.55); background: #131c33;
}
.bd-stack-item[draggable="true"] { cursor: grab; }
.bd-stack-item[draggable="true"]:active { cursor: grabbing; }
.bd-item-attack { border-left-color: #ff8d7a; }
.bd-item-move { border-left-color: #ffd75e; }
.bd-item-breacher { border-left-color: #d9a6ff; opacity: .9; }
.bd-item-spawn { border-left-color: #ff7ad0; opacity: .9; }
.bd-item-fleet { border-left-color: #59c8ff; opacity: .85; }
.bd-stack-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bd-stack-symbol, .bd-stack-symbols { color: var(--gold-bright); font-size: 14px; letter-spacing: 0; }
.bd-item-sub { color: var(--ink-dim); font-size: 10.5px; margin-top: 2px; }

.bd-problems { margin-top: 12px; font-size: 13px; }
.bd-problems .ok-note { color: #9fd8ae; }
.bd-problem { color: #ffcf9a; margin-top: 3px; }

/* spawn-fleet progression chips */
.bd-prog-chip.bd-kind-spawn_fleet { border-color: #ff7ad0; }

/* mini ship view beside the action-stack organizer */
.bd-mini-ship {
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: #0d1426; padding: 8px 10px; text-align: center;
}
.bd-mini-ship-label { color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bd-mini-svg { max-height: 180px; width: 100%; }
.bd-mini-side .bd-mini-svg { max-height: 46vh; }
.bd-mini-svg polygon { transition: filter .1s ease; }
.bd-mini-svg .bd-mini-hot {
  stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}

/* printable boss-sheet export */
.bd-print {
  min-height: 66vh;
  max-height: 72vh;
  overflow: auto;
  padding: 10px;
  background: #060b15;
}
.bd-print-preview {
  width: min(100%, 920px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.bd-print-preview svg {
  width: 100%;
  height: auto;
  display: block;
}
.bd-print-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-dim);
  font-size: 13px;
}
.bd-print-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.bd-print-controls select {
  background: #0a1020;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--ink);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}
.bd-print-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* admin: player-design library bar */
.bd-player-library { margin-top: 6px; }
.bd-player-library select { max-width: 420px; }

/* player-facing designer overlay (main app) */
.bd-player-overlay {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: rgba(5,8,16,.96);
}
.bd-player-overlay.hidden { display: none; }
.bd-player-shell { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
.bd-player-toprow { display: flex; gap: 8px; margin-bottom: 10px; }
.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) */
.bd-player-overlay .admin-note { color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin: 6px 0 14px; }
.bd-player-overlay .admin-status { min-height: 22px; margin-top: 12px; font-size: 13px; }
.bd-player-overlay .admin-status.ok { color: #9fd8ae; }
.bd-player-overlay .admin-status.err { color: #ff9a8a; white-space: pre-wrap; }

/* lobby "Build New Content" button: twinkles until first clicked */
#btn-build-content { position: relative; }
#btn-build-content.bd-twinkle { animation: bd-twinkle 1.3s ease-in-out; }
#btn-build-content.bd-twinkle::after {
  content: "✦"; position: absolute; top: -9px; right: -5px; color: #ffe9a8;
  font-size: 13px; animation: bd-twinkle-star 1.3s ease-in-out;
}
@keyframes bd-twinkle {
  0%, 100% { box-shadow: none; transform: none; }
  35% { box-shadow: 0 0 14px rgba(255, 215, 94, .85), 0 0 26px rgba(255, 215, 94, .35); transform: scale(1.05); }
  65% { box-shadow: 0 0 8px rgba(255, 215, 94, .5); transform: scale(1.01); }
}
@keyframes bd-twinkle-star {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.25) rotate(35deg); }
  70% { opacity: .7; transform: scale(.9) rotate(60deg); }
}

/* first-time builder how-to sits above the designer overlay (z-index 60) */
.bd-howto-overlay { z-index: 70; }
.bd-howto-overlay .picker, .bd-intro-actions + .picker { max-width: 620px; }
.bd-intro-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* print controls: ship scale slider */
#bd-print-zoom { flex: 1; min-width: 90px; accent-color: var(--gold); }
#bd-print-zoom-value { color: var(--ink); min-width: 42px; text-align: right; }