/* Part 4 (s10) and the latent map shared with Part 5 (js/latentmap.js). */

/* ================================================================ latent map */

.latent-map {
  position: relative;
  width: var(--map-size, 640px);
  aspect-ratio: 1;
  border-radius: 0;
  background: var(--bg-sunken);
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--line);
  overflow: hidden;
}
.latent-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.latent-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.latent-label {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* "here be monsters", old-map style: a parchment banner with an italic serif hand. */
.monster-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.9;
}
.monster-label .mascot {
  width: 46px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.monster-label span {
  padding: 2px 12px;
  border-radius: 3px;
  background: #ead9b0;
  color: #5b3a1a;
  border: 1px solid #b08a52;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  transform: rotate(-5deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}

/* Nearest training cat on hover. */
.map-tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 2px solid var(--accent);
  pointer-events: none;
}
.map-tip canvas {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  border-radius: 6px;
}
.map-tip span {
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ================================================================ s10 */

.s10-body {
  gap: calc(var(--gap) * 3);
}
.s10-map {
  --map-size: min(66vh, 720px);
  position: relative;
  flex: 0 0 auto;
}
.s10-side {
  flex: 0 1 420px;
  gap: calc(var(--gap) * 1.1);
}
.s10-out .cat-canvas {
  --cat-size: 280px;
}
.s10-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 84px;
}
.s10-verdict .verdict-chip {
  padding: 6px 22px;
}
.s10-verdict .verdict-chip[data-level="bad"] {
  background: var(--lilac);
}
.s10-dist {
  font-size: var(--fs-small);
  color: var(--text-soft);
  text-align: center;
}
.s10-tally {
  font-size: var(--fs-small);
}
.s10-caption {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--accent);
}

@media (max-height: 900px), (max-width: 1500px) {
  .s10-body {
    gap: calc(var(--gap) * 2);
  }
  .s10-map {
    --map-size: min(62vh, 560px);
  }
  .s10-out .cat-canvas {
    --cat-size: 200px;
  }
  .monster-label .mascot {
    width: 38px;
  }
  .monster-label span {
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  .s10-body {
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }
  .s10-map {
    --map-size: 168px;
  }
  .s10-side {
    flex: 1 1 auto;
    flex-basis: auto;
    width: auto;
    gap: 8px;
  }
  .s10-out .cat-canvas {
    --cat-size: 112px;
  }
  .s10-verdict {
    min-height: 0;
    gap: 4px;
  }
  .monster-label .mascot {
    width: 28px;
  }
  .monster-label span {
    font-size: 11px;
    padding: 1px 6px;
  }
}