:root {
  --suspect-width: min(10vw, 11vh);
  --suspect-height: min(10vw, 11vh);
}

.jmap {
  position: fixed;   /* or absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  display: flex;
  flex-direction: column;
}

.island1 {
  width: 20vw;
  height: 20vh;
  position: absolute;
  top: 5%;
  left: 5%;
  border-radius: 50%;
  background-color: red;
}

.suspects {
  flex: 0 0 auto;
  padding: 8px;
  display: flex;
  /* Keep suspects bar same size even when empty */
  min-height: calc(var(--suspect-height, 12vw) + 16px); /* includes vertical padding */
  align-items: center; /* vertically center when items exist */
  justify-content: flex-start;
}

img.suspect {
    width: var(--suspect-width);
    height: var(--suspect-height);
    border: 3px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 1vw;
}

#prison-map {
  flex: 1 1 auto;   /* fill remaining height */
  min-height: 0;    /* allow proper flexbox shrinking */
  overflow: auto;   /* scroll if content overflows */
  padding: 20px;
  background: #f0f0f0;
  position: relative;

  .prison {
    position: absolute;
    width: 42vw;
    height: 20vh;
    background: rgba(0,0,0,0.08);
    border: 2px solid rgba(0,0,0,0.2);

    display: flex;
    justify-content: space-around; 
    align-items: center; 
    .cell {
      background-color: darkgray;
      height: 68%;
      aspect-ratio: 1/1;
      display: flex;
      justify-content: center;
      align-items: center;
      img.suspect {
        margin: 0
      } 
    }
  }
}

#prison-map .prison.center {
  width: 50vw;
  height: 25vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#prison-map .prison.tl { top: 2vw; left: 2vw; }
#prison-map .prison.tr { top: 2vw; right: 2vw; }
#prison-map .prison.br { bottom: 2vw; right: 2vw; }
#prison-map .prison.bl { bottom: 2vw; left: 2vw; }

/* Drag & drop visuals */
#prison-map .prison.drop-target {
  outline: 3px dashed rgba(0,0,0,0.35);
  outline-offset: 4px;
}


/* Drop target styling for suspects bar */
.suspects.drop-target {
  outline: 3px dashed rgba(0,0,0,0.35);
  outline-offset: 4px;
}

/* Keep suspects circular styling during drag */
img.suspect.is-dragging,
#prison-map .prison img.is-dragging {
  opacity: 0.85; /* subtle feedback */
}