/* Shared styles for the isometric player and editor. */

.iso-frame {
  position: relative;
  flex: none;
}

.iso-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.iso-callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.iso-callouts__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.iso-callout__line {
  stroke: var(--iso-callout-line, rgba(40, 34, 30, 0.75));
  stroke-width: 1.5;
}

.iso-callout__dot {
  fill: var(--iso-callout-dot, #fffaf0);
  stroke: var(--iso-callout-line, rgba(40, 34, 30, 0.85));
  stroke-width: 1.5;
}

.iso-callout__label {
  position: absolute;
  max-width: 220px;
  width: max-content;
  padding: 6px 10px;
  font: 500 14px/1.35 var(--iso-font, system-ui, sans-serif);
  color: var(--iso-callout-ink, #2b2420);
  background: var(--iso-callout-bg, #fffaf0);
  border: 1.5px solid var(--iso-callout-line, rgba(40, 34, 30, 0.85));
  border-radius: 4px;
  white-space: pre-line;
  pointer-events: auto;
}

.iso-callout__label.is-editable {
  cursor: grab;
}

.iso-callout__label.is-selected {
  outline: 2px solid #e2a33a;
  outline-offset: 2px;
}

.iso-info {
  position: absolute;
  z-index: 2;
  max-width: 240px;
  padding: 10px 12px;
  transform: translate(12px, 12px);
  font: 14px/1.4 var(--iso-font, system-ui, sans-serif);
  color: var(--iso-callout-ink, #2b2420);
  background: var(--iso-callout-bg, #fffaf0);
  border: 1.5px solid var(--iso-callout-line, rgba(40, 34, 30, 0.85));
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  white-space: pre-line;
}