/* Boathouse BOAT tab — boat (hull) + skin picker. Lives inside #screen-character beside the
   Character carousel; the two panes toggle via .is-active. Cards reuse the cards/boats/*.png art.
   Visual language matches the lobby/boathouse: dark glass, cyan accents, gold for the live action. */

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.bh-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 10px;
}
.bh-tab {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(13px, 1.9vh, 16px);
  color: var(--cream-warm, #cfe0ef);
  background: rgba(10, 22, 42, .6);
  border: 1px solid rgba(0, 229, 255, .18);
  padding: 8px 24px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  cursor: pointer;
  transition: color var(--engine-dur, .2s), background var(--engine-dur, .2s), box-shadow var(--engine-dur, .2s);
}
.bh-tab:hover { color: #fff; background: rgba(0, 229, 255, .12); }
.bh-tab.is-active {
  color: #04121f;
  background: linear-gradient(180deg, #5fe6ff, #00bcd4);
  box-shadow: 0 6px 18px rgba(0, 200, 255, .3);
}

/* ── Panes ────────────────────────────────────────────────────────────────── */
/* Must GROW inside #screen-character (a flex column) so the Character pane's .cs-carousel —
   which is `flex:1 1 auto; min-height:0` — can expand to its full height for the 3D card layout. */
.bh-pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; width: 100%; }
.bh-pane.is-active { display: flex; }

/* ── Boat hull row (2 base boats) ─────────────────────────────────────────── */
.bs-boats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bs-boat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 10px;
  background: rgba(8, 18, 36, .55);
  border: 1.5px solid rgba(0, 229, 255, .2);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--engine-dur, .2s), transform var(--engine-dur, .2s), box-shadow var(--engine-dur, .2s);
}
.bs-boat:hover { transform: translateY(-2px); border-color: rgba(0, 229, 255, .5); }
.bs-boat.is-active {
  border-color: var(--gold, #ffd400);
  box-shadow: 0 0 0 1px var(--gold, #ffd400), 0 10px 26px rgba(255, 212, 0, .22);
}
.bs-boat__art {
  width: clamp(86px, 12vh, 120px);
  aspect-ratio: 1414 / 2001;
  border-radius: 9px;
  overflow: hidden;
  background: #0a1730;
}
.bs-boat__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-boat__name {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(12px, 1.7vh, 15px);
  color: var(--cream, #f3f7ff);
}
.bs-boat__tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #04121f;
  background: var(--gold, #ffd400);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ── Skin row (3 skins of the focused boat) ───────────────────────────────── */
.bs-skins {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bs-skin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: clamp(96px, 14vh, 130px);
  padding: 8px;
  background: rgba(8, 18, 36, .5);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.bs-skin.is-equipped { border-color: #2fe07a; box-shadow: 0 0 0 1px rgba(47, 224, 122, .5), 0 8px 22px rgba(47, 224, 122, .18); }
.bs-skin.is-locked .bs-skin__art { filter: saturate(.85) brightness(.92); }
.bs-skin__art {
  width: 100%;
  aspect-ratio: 1414 / 2001;
  border-radius: 9px;
  overflow: hidden;
  background: #0a1730;
}
.bs-skin__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-skin__name {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(11px, 1.5vh, 13px);
  color: var(--cream, #f3f7ff);
}
.bs-skin__rarity {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 4px;
  margin-top: -2px;
}
.bs-skin__rarity[data-rarity="common"]    { color: #9fb6c9; background: rgba(159, 182, 201, .12); }
.bs-skin__rarity[data-rarity="rare"]      { color: #43d6ff; background: rgba(0, 200, 255, .14); }
.bs-skin__rarity[data-rarity="legendary"] { color: #ffd400; background: rgba(255, 212, 0, .14); }
.bs-skin__act { min-height: 30px; display: flex; align-items: center; }

/* action buttons / states */
.bs-btn {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  transition: filter var(--engine-dur, .2s), transform var(--engine-dur, .2s);
}
.bs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bs-btn--equip { color: #04121f; background: linear-gradient(180deg, #6fe6ff, #00bcd4); }
.bs-btn--buy {
  color: #1a1200;
  background: linear-gradient(180deg, #ffe53a, #ffc400);
  box-shadow: 0 6px 16px rgba(255, 200, 0, .3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bs-coin {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #e9a900 70%);
  box-shadow: inset 0 0 0 1px rgba(120, 80, 0, .5);
  display: inline-block;
}
.bs-equipped {
  font-family: var(--font-head); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 12px; letter-spacing: .03em; color: #2fe07a;
  display: inline-flex; align-items: center; gap: 4px;
}
.bs-signin {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--cream-warm, #9fb3c8);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ── Footer actions ───────────────────────────────────────────────────────── */
.bs-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 560px);
}
.bs-actions .lh-ghost { flex: 0 0 auto; }
.bs-foot {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.5vh, 12px);
  color: var(--cream-warm, #9fb3c8);
  opacity: .85;
}

@media (hover: none) {
  .bs-boat:hover, .bs-btn:hover { transform: none; }
}