/* castle.html — per-guild castle picker + character grid editor */

/* Widen the shared .app-shell container just on this page — the picker
   panel + team rows need more room than index/home/teams do. Scoped here
   (castle.css only loads on castle.html) so other pages stay untouched. */
.app-shell {
  max-width: 1400px;
}

.castle-main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 16px 48px;
}

.home-status {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 80px 0;
}

#castleListView {
  width: 100%;
  max-width: 980px;
}

#castleGridView {
  width: 100%;
  max-width: 1360px;
}

.castle-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.castle-clear-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.btn-danger-outline {
  border: 1px solid #ef4444;
  color: #ef4444;
  background: transparent;
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.castle-page-title {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
}

.castle-guild-name {
  color: var(--accent);
}

/* Invisible twin of the back button, same text/padding, so the title
   sits truly centered between two equal-width flex items. */
.castle-head-spacer {
  visibility: hidden;
  pointer-events: none;
}

.castle-pick-group {
  margin-bottom: 30px;
  text-align: center;
}

.castle-pick-group-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.castle-pick-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.castle-pick-btn {
  position: relative;
  min-width: 128px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.castle-pick-btn:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.22);
}

/* Not every team in this castle is fully filled yet — flag it so admins
   know at a glance which castles still need work. */
.castle-pick-btn.incomplete {
  border-color: #ef4444;
  border-style: solid;
}

.castle-pick-btn.incomplete:hover {
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.22);
}

.castle-pick-btn.incomplete::after {
  content: "!";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}

.castle-pick-btn.incomplete .castle-pick-count {
  color: #ef4444;
  font-weight: 800;
}

.castle-pick-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.castle-pick-count {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Who/when this castle was last saved to the server — see js/castle.js's
   formatLastSavedHtml(). Deliberately quiet (smaller + dimmer than
   .castle-pick-count) since it's a secondary, "verify if you want to"
   detail, not something that needs to compete with the team-count. Name and
   time render as two <br>-separated lines (not "name · time" on one line)
   so a long display name doesn't force an ugly mid-word wrap inside the
   ~128px-wide button.  */
.castle-pick-lastsaved {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.75;
}

.castle-last-saved {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
  min-height: 16px;
}

.castle-save-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.castle-save-bar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.castle-save-status {
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

.castle-grid-save-status {
  text-align: center;
  margin-bottom: 12px;
}

/* Deliberately loud/dashed so it never reads as a normal, everyone-sees-it
   feature — this is a dev-only shortcut visible to the site owner alone. */
.castle-mock-btn {
  margin-top: 6px;
  border: 1px dashed #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  font-size: 12px;
}

.castle-mock-btn:hover {
  border-style: solid;
  background: rgba(245, 158, 11, 0.16);
}

/* Picker panel (left) + team rows (right), side by side. align-items:
   stretch (the default) makes both columns match the height of whichever
   is taller — usually the team rows, since row count varies by castle. */
.castle-grid-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

@media (max-width: 1050px) {
  .castle-grid-layout {
    flex-direction: column;
  }
}

.castle-picker-panel {
  /* The important, frequently-scanned area — gets whatever width is left
     over once the team rows (fixed-size, see .castle-rows) take theirs, so
     more hero chips fit per row and there's less scrolling/filtering. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 16px;
  /* Fixed at roughly the height of a 10-team castle (an outer castle, the
     smallest kind) regardless of which castle is actually open — .castle
     -picker-grid below scrolls internally once the hero list runs past it. */
  max-height: 820px;
}

@media (max-width: 1050px) {
  .castle-picker-panel {
    position: static;
    max-height: 60vh;
    width: 100%;
  }
}

.castle-picker-panel > b {
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 auto;
}

.castle-picker-panel .hero-picker-search {
  margin: 0;
  flex: 0 0 auto;
}

#heroPickerFilterRow {
  flex: 0 0 auto;
}

.castle-picker-grid {
  flex: 1;
  min-height: 0;
  max-height: none; /* override .hero-grid's 320px cap — bounded by the panel's max-height instead */
  overflow-y: auto;
  margin: 0;
}

.castle-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 500px;
  width: 500px;
  padding: 22px 26px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

@media (max-width: 1050px) {
  .castle-rows {
    flex: 1 1 auto;
    width: 100%;
  }
}

.castle-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.castle-row + .castle-row {
  border-top: 1px dashed var(--card-border);
  padding-top: 10px;
}

.castle-row-label {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

/* This team (row) isn't at the full 3 heroes yet. */
.castle-row-label.incomplete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.castle-row-slots {
  display: flex;
  gap: 12px;
  flex: 1;
}

/* Thin separator right before the pet slot, kept tight so the pet slot
   reads as "right next to" the 3 hero slots, not a 4th equal member. */
.castle-row-divider {
  width: 1px;
  align-self: stretch;
  background: var(--card-border);
  margin: 0 -4px 0 2px;
}

.castle-pet-slot {
  border-radius: 50%;
}

.castle-pet-slot.filled {
  border-color: var(--pink);
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.22);
}

.castle-slot {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 2px dashed var(--card-border);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.15s, transform 0.15s;
}

.castle-slot:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.castle-slot.filled {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.18);
}

/* The slot the picker panel is currently filling — same pulsing glow as
   the formation editor's .formation-slot.waiting on index.html. */
.castle-slot.waiting {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 8px 2px rgba(59, 130, 246, 0.35);
  animation: slot-pulse 1.2s ease-in-out infinite;
}

.castle-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.castle-slot .slot-plus {
  color: var(--muted);
  font-size: 18px;
}

.castle-slot .slot-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.castle-add-slot {
  opacity: 0.6;
}

.castle-add-slot:hover {
  opacity: 1;
}