/* Keep Sanctuary traits aligned with the shared Playdates tag styles. */
.care-progression .sanctuary-badges{gap:4px}

@media(max-width:650px){
  /* Two fixed lines keep care feedback from moving the metrics. Center a
     single line in that space, with the same margin above and below. */
  .care-details .sanctuary-care-status{
    block-size:3em;
    margin-block:8px;
    align-items:center;
  }

  /* The owner's plots remain paired, including on smaller phones. */
  .garden-owner>.garden-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .garden-owner>.garden-grid>.garden-plot{padding:10px;gap:10px}
  .garden-owner>.garden-grid .garden-product{gap:6px}
  .garden-owner>.garden-grid .garden-product>.item-art{width:32px;height:32px}
  .garden-owner>.garden-grid .garden-product strong{overflow-wrap:anywhere}

  /* Each egg keeps its image, full name, count, rarity and Hatch action. */
  .egg-shelf>.egg-shelf-items{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .egg-shelf-items>.egg-shelf-item{
    width:auto;
    min-width:0;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 8px;
    text-align:center;
  }
  .egg-shelf-item>.item-art{width:44px;height:46px}
  .egg-shelf-item>span{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .egg-shelf-item small{font-size:11px}
  .egg-shelf-item>.egg-hatch-label{margin:0;margin-top:auto;justify-content:center}

  /* Five equipment slots use three rows, even on narrow phones. */
  .equipment-rack:not(.compact)>.equipment-slots{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .equipment-rack:not(.compact) .equipment-slot{padding:10px;align-items:flex-start}
  .equipment-rack:not(.compact) .equipment-slot>.item-art,
  .equipment-rack:not(.compact) .empty-slot-icon{width:32px;height:32px}
  .equipment-rack:not(.compact) .equipment-slot strong{font-size:13px}
}

@media(max-width:420px){
  /* Give long crop and equipment names the full card width. */
  .garden-owner>.garden-grid .garden-product,
  .equipment-rack:not(.compact) .equipment-slot{flex-direction:column;align-items:flex-start}
  .garden-owner>.garden-grid .garden-product>div,
  .equipment-rack:not(.compact) .equipment-slot>span:not(.empty-slot-icon){width:100%}
}