/**
 * P.E.T. kompakt elrendezés — közös a /equipment/ és a térképes hangár (map_embed) számára.
 * A térképen látható „minden kifér” kinézet; a map_embed továbbra is finomhangolhat !important-tal.
 */

.hangar-layout:has(.hangar-ship-equip-row.is-pet-mode),
.hangar-layout:has(.hangar-ship-equip-row.is-drone-mode) {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.hangar-layout:has(.hangar-ship-equip-row.is-pet-mode) .hangar-inventory,
.hangar-layout:has(.hangar-ship-equip-row.is-drone-mode) .hangar-inventory {
  max-width: 400px;
  min-width: 320px;
}

.hangar-ship-equip-row.is-pet-mode {
  --pet-slot-size: 36px;
  --pet-slot-gap: 3px;
  --pet-slot-cols-ref: 10;
  --pet-slot-band-width: calc(
    var(--pet-slot-cols-ref) * var(--pet-slot-size) +
    (var(--pet-slot-cols-ref) - 1) * var(--pet-slot-gap)
  );
}

.hangar-ship-equip-row.is-pet-mode .pet-shell-title {
  display: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-shell-top {
  margin-bottom: 2px;
  padding-bottom: 4px;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-tab {
  padding: 4px 8px;
  font-size: 10px;
}

.hangar-ship-equip-row.is-pet-mode .pet-toolbar {
  margin-bottom: 6px;
}

.hangar-ship-equip-row.is-pet-mode .pet-toolbar-grid {
  grid-template-columns: minmax(130px, 168px) minmax(0, 1fr);
  gap: 6px;
}

.hangar-ship-equip-row.is-pet-mode .pet-toolbar-card {
  padding: 6px 7px 7px;
  gap: 4px;
}

.hangar-ship-equip-row.is-pet-mode .pet-active-slot-select {
  height: 24px;
  font-size: 10px;
}

.hangar-ship-equip-row.is-pet-mode .pet-fuel-shop-grid {
  gap: 5px;
}

.hangar-ship-equip-row.is-pet-mode .pet-fuel-card {
  padding: 5px 5px 4px;
  gap: 4px;
}

.hangar-ship-equip-row.is-pet-mode .pet-fuel-card-liters {
  font-size: 11px;
}

.hangar-ship-equip-row.is-pet-mode .pet-fuel-card-price {
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-fuel-buy-btn {
  padding: 5px 4px;
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-eq {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-eq.is-active-slot {
  border: none;
  box-shadow: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-eq-inner {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.hangar-ship-equip-row.is-pet-mode .pet-preview-col {
  width: 156px;
  min-width: 156px;
  max-width: none;
  gap: 6px;
}

.hangar-ship-equip-row.is-pet-mode .pet-preview-frame--sm {
  max-width: 80px;
  height: 80px;
  min-height: 80px;
}

.hangar-ship-equip-row.is-pet-mode .pet-status-panel > .pet-xp-card {
  margin: 4px 4px 0;
}

.hangar-ship-equip-row.is-pet-mode .pet-vitals-panel {
  padding: 0 4px;
  gap: 2px;
}

.hangar-ship-equip-row.is-pet-mode .pet-stat-line {
  padding: 4px 6px;
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-actions-panel {
  padding: 4px;
}

.hangar-ship-equip-row.is-pet-mode .btn-pet-action-btn {
  padding: 5px 4px !important;
  font-size: 8px !important;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-panel {
  border-radius: 8px;
  flex-shrink: 0;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-panel::before {
  padding: 3px 8px 2px;
  font-size: 8px;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 4px 6px;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-field {
  padding: 3px 5px;
  gap: 3px;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-lbl {
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-input,
.hangar-ship-equip-row.is-pet-mode .pet-config-select {
  height: 24px;
  font-size: 10px;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-select {
  color-scheme: dark;
  color: #e8f4ff;
  background-color: #040c16;
  background-image: linear-gradient(180deg, rgba(4, 12, 22, 0.98), rgba(0, 6, 14, 0.99)),
    url("data:image/svg+xml;utf8,<svg fill='%2300d4ee' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 8px center;
  background-size: auto, 12px;
  border: 1px solid rgba(0, 200, 224, 0.32);
  appearance: none;
  -webkit-appearance: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-config-select option {
  background-color: #0a1420;
  color: #e8f4ff;
}

.hangar-ship-equip-row.is-pet-mode .btn-pet-config-save {
  min-width: 44px;
  height: 26px;
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-main {
  container-type: size;
  container-name: peteq;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(165deg, rgba(8, 14, 24, 0.95), rgba(4, 8, 14, 0.98));
  border: 1px solid rgba(0, 200, 224, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 238, 0.4) rgba(0, 0, 0, 0.35);
}

@container peteq (min-height: 220px) {
  .hangar-ship-equip-row.is-pet-mode .pet-slot-main {
    --pet-slot-size: 40px;
  }
}

@container peteq (min-height: 250px) {
  .hangar-ship-equip-row.is-pet-mode .pet-slot-main {
    --pet-slot-size: 42px;
  }
}

@container peteq (min-height: 280px) {
  .hangar-ship-equip-row.is-pet-mode .pet-slot-main {
    --pet-slot-size: 44px;
  }
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-main::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.hangar-ship-equip-row.is-pet-mode .pet-slot-main::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 238, 0.4);
  border-radius: 999px;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-panel--stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
  padding: 6px 8px 8px;
  overflow: visible;
  box-sizing: border-box;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .equip-block.pet-equip-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 4px 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .equip-block.pet-equip-block:last-child {
  border-bottom: none;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .equip-header {
  width: auto;
  max-width: var(--pet-slot-band-width);
  padding: 4px 8px;
  margin: 0 0 3px 0;
  font-size: 10px;
  line-height: 1.2;
  border-radius: 4px;
  align-self: flex-start;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-panel--stack > .pet-equip-block:nth-child(3) .equip-header {
  max-width: calc(6 * var(--pet-slot-size) + 5 * var(--pet-slot-gap));
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-panel--stack > .pet-equip-block:nth-child(4) .equip-header {
  max-width: calc(12 * var(--pet-slot-size) + 11 * var(--pet-slot-gap));
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .equip-header .pet-eq-lv {
  font-size: 10px;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .slot-grid {
  grid-template-columns: repeat(10, var(--pet-slot-size));
  width: var(--pet-slot-band-width);
  max-width: var(--pet-slot-band-width);
  gap: var(--pet-slot-gap);
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .slot-grid .slot {
  width: var(--pet-slot-size);
  height: var(--pet-slot-size);
  min-width: var(--pet-slot-size);
  min-height: var(--pet-slot-size);
  max-width: var(--pet-slot-size);
  max-height: var(--pet-slot-size);
  aspect-ratio: unset;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-slots {
  gap: var(--pet-slot-gap);
  justify-content: flex-start;
  align-content: start;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-6 {
  grid-template-columns: repeat(6, var(--pet-slot-size));
  width: calc(6 * var(--pet-slot-size) + 5 * var(--pet-slot-gap));
  max-width: var(--pet-slot-band-width);
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-12 {
  grid-template-columns: repeat(12, var(--pet-slot-size));
  width: calc(12 * var(--pet-slot-size) + 11 * var(--pet-slot-gap));
  max-width: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-6 .pet-eq-cell,
.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-12 .pet-eq-cell {
  width: var(--pet-slot-size);
  height: var(--pet-slot-size);
  min-width: var(--pet-slot-size);
  min-height: var(--pet-slot-size);
  max-width: var(--pet-slot-size);
  max-height: var(--pet-slot-size);
  aspect-ratio: unset;
  clip-path: none;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-cell .pet-lock {
  font-size: 14px;
  line-height: 1;
}

.hangar-ship-equip-row.is-pet-mode .pet-equip-main .slot-grid .slot-lvl,
.hangar-ship-equip-row.is-pet-mode .pet-eq-cell .slot-lvl {
  font-size: 9px;
}

.hangar-ship-equip-row.is-pet-mode .pet-eq-cell.slot img,
.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-6 .pet-eq-cell.slot img,
.hangar-ship-equip-row.is-pet-mode .pet-eq-grid-12 .pet-eq-cell.slot img {
  max-width: calc(var(--pet-slot-size) - 6px);
  max-height: calc(var(--pet-slot-size) - 6px);
  width: auto;
  height: auto;
}

.hangar-ship-equip-row.is-pet-mode .pet-shell,
.hangar-ship-equip-row.is-pet-mode .pet-slot-grid-eq,
.hangar-ship-equip-row.is-pet-mode .pet-slot-pane.is-active {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}