/* geometry-orb.css — the nested-geometry orb in the Geometry room.
   Colours come from the page's tokens only; the canvas reads the same
   custom properties off its host. Phone first: 375×812 is the measure. */

.geo-orb { display: block; width: 100%; }
.geo-orb-stage {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.geo-orb-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  outline: none;
  cursor: crosshair;
}
.geo-orb-canvas:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.geo-orb-label {
  position: absolute;
  left: 0; top: 0;
  max-width: min(260px, 82%);
  padding: 7px 10px 8px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--kit-seal, var(--accent-2));
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  will-change: transform;
  font-size: 12px;
  line-height: 1.35;
}
.geo-orb-label b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; }
.geo-orb-label span { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.geo-orb-caption { text-align: center; margin: 12px auto 0; max-width: 520px; }

@media (max-width: 599.98px) {
  .geo-orb-stage { width: min(100%, calc(100vw - 32px)); }
  .geo-orb-label { max-width: 78%; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .geo-orb-canvas { cursor: default; }
}