/* Cleanup pass: party-status shell/layout contract ownership */
#party-status-panel > .panel-header {
  position: relative;
  min-width: 0;
}

#party-status-panel > .panel-header > .panel-header-controls {
  flex: 0 0 auto;
}

#party-status-panel > .panel-header .panel-title {
  min-width: 0;
}

#party-status-panel > .panel-body.party-status-panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}


#party-status-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Section headers */
#party-status-panel h4 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #CFE0F0;
  text-align: center;
}

/* Left: Available Chao */
#party-status-available {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(112, 151, 193, 0.18);
  background: linear-gradient(180deg, rgba(18, 28, 43, 0.9), rgba(10, 16, 26, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Match Party Hub grid exactly */
#party-status-chaolist {
  display: grid;
  grid-template-columns: repeat(3, 94px);
  justify-content: center;
  align-content: start;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(8, 13, 21, 0.52), rgba(7, 12, 18, 0.74));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  max-height: 320px;
  overflow-y: auto;
  width: 100%;
}

/* Individual Chao box */
#party-status-chaolist .chao-slot {
  width: 90px;
  height: 88px;
  padding: 4px;
  border: 1px solid rgba(117, 156, 198, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 38, 58, 0.94), rgba(12, 20, 31, 0.96));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#party-status-chaolist .chao-slot:hover {
  background: rgba(91, 99, 255, 0.25);
  border-color: #5b63ff;
}

/* ✅ Green highlight for selected Chao */
#party-status-chaolist .chao-slot.selected {
  border: 1px solid rgba(111, 219, 171, 0.8);
  box-shadow: 0 0 0 1px rgba(111, 219, 171, 0.25), 0 10px 20px rgba(0,0,0,0.16);
  background: linear-gradient(180deg, rgba(27, 67, 59, 0.96), rgba(11, 29, 25, 0.98));
}

/* Sprite + Name */
#party-status-chaolist .sprite-wrap {
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
}
#party-status-chaolist .sprite-wrap img {
  width: 100%;
  height: auto;
  object-fit: none;          /* ✅ */
  object-position: 0 0;      /* ✅ */
  image-rendering: pixelated;
}

#party-status-chaolist .chao-name {
  font-size: 11px;
  color: #fff;
  margin-top: 2px;
  text-align: center;
  width: 100%;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Right: Selected Chao grid */
#party-status-selected {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(112, 151, 193, 0.18);
  background: linear-gradient(180deg, rgba(18, 28, 43, 0.9), rgba(10, 16, 26, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#party-status-slots {
  display: grid;
  grid-template-columns: repeat(3, 94px);
  grid-template-rows: repeat(2, 94px);
  justify-content: start;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  background: linear-gradient(180deg, rgba(8, 13, 21, 0.52), rgba(7, 12, 18, 0.74));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  width: 310px;
  max-width: 100%;
  height: auto;
  margin-bottom: 6px;
}

#party-status-slots .slot {
  width: 90px;
  height: 88px;
  border: 1px solid rgba(117, 156, 198, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24, 38, 58, 0.94), rgba(12, 20, 31, 0.96));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border 0.2s;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#party-status-slots .slot:hover {
  background: rgba(91, 99, 255, 0.25);
  border-color: #5b63ff;
}

#party-status-slots .sprite-wrap {
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
}
#party-status-slots .sprite-wrap img {
  width: 100%;
  height: auto;
  object-fit: none;          /* ✅ */
  object-position: 0 0;      /* ✅ */
  image-rendering: pixelated;
}

#party-status-slots .chao-name {
  font-size: 11px;
  color: #fff;
  margin-top: 2px;
  text-align: center;
  width: 100%;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* Action buttons */
#party-status-selected .party-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}

#party-status-send-btn {
  display: block;
  margin-top: 0;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(182, 214, 247, 0.42);
  background: linear-gradient(180deg, rgba(88, 131, 179, 0.98), rgba(33, 55, 84, 0.98));
  color: #f7fbff;
  font-weight: bold;
  transition: background 0.2s;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
#party-status-send-btn:hover {
  background: linear-gradient(180deg, rgba(103, 149, 201, 0.98), rgba(40, 66, 98, 0.98));
}

/* Scrollbar */
#party-status-chaolist::-webkit-scrollbar {
  width: 6px;
}
#party-status-chaolist::-webkit-scrollbar-thumb {
  background: #415a77;
  border-radius: 6px;
}

/* ============================
   Entity Containers
   ============================ */
#chao-container,
#egg-container,
#item-container,
#darkchao-container,
#darkegg-container,
#darkitem-container,
#herochao-container,
#heroegg-container,
#heroitem-container {
  pointer-events: auto; /* ✅ entities clickable */
}




@media (max-width: 1500px) {
  .party-builder-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  #party-status-minigames {
    max-height: 220px;
  }

  #party-status-wrapper {
    flex-wrap: wrap;
  }

  #party-status-available,
  #party-status-selected {
    flex: 1 1 100%;
  }

  #party-status-selected {
    align-items: stretch;
  }

  #party-status-slots {
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 1220px), (max-height: 760px) {
  .party-builder-grid {
    grid-template-columns: 1fr;
  }
}


/* pass12: responsive ownership migrated from 19-panel-fit-helpers.css */
@media (max-width: 1360px), (max-height: 860px) {
  #party-mode-panel .party-body {
    flex-direction: column;
  }

  #party-mode-panel .party-right {
    width: auto;
    max-height: 260px;
  }

  #party-mode-panel .party-player-grid,
  #party-mode-panel .party-vote-grid,
  #party-mode-panel .party-vote-grid2 {
    grid-template-columns: 1fr;
  }
}