/* sitemap3d.css — labeled chip tiles (title always readable, like the
   original shoe-box) spread across a golden-angle sphere (like a cloud,
   not flat linear tiers). Billboarded to face the camera via pure CSS
   calc() against --sb3d-rx/--sb3d-rz, which sitemap3d.js updates on
   drag/tilt/zoom -- billboard stays in sync with zero extra JS work. */

:root {
  --swarna-gold: #C9A84C;
  --sb3d-rx: -14deg;
  --sb3d-rz: 0deg;
  --sb3d-zoom: 1;
}

.sb-outer {
  position: relative;
  z-index: 1;
  max-width: 100%;
  /* Still needs its own clipping context for the preserve-3d chain below
     (Safari flattens preserve-3d if overflow:hidden sits ON an ancestor
     inside the chain, but a wrapper OUTSIDE the chain is exactly where the
     spec says clipping belongs) -- no longer has its own background/border,
     since the page-wide .sb-void + .sb-rain in sitemap3d.php's inline
     styles now provide the backdrop for the whole page, not just this panel. */
  overflow: hidden;
  margin-top: 20px;
}

.sb-stage {
  perspective: 1900px;
  width: 100%;
  height: 1300px;          /* tall enough for the sphere (2 * radius) plus tile size + margin, so nothing clips */
  position: relative;
  touch-action: none;
  cursor: grab;
}
.sb-stage.sb-dragging { cursor: grabbing; }

.sb-world {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(var(--sb3d-rx)) rotateZ(var(--sb3d-rz)) scale(var(--sb3d-zoom));
  width: 1px; height: 1px;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .sb-world { transition: none !important; }
}

/* ---------- Chips: readable tiles, billboarded to face the camera ---------- */
.sb-chip {
  position: absolute;
  top: 0; left: 0;
  transform: translate3d(var(--sb-x), var(--sb-y), var(--sb-z))
             rotateZ(calc(-1 * var(--sb3d-rz)))
             rotateX(calc(-1 * var(--sb3d-rx)));
  transition: opacity .25s ease, filter .25s ease;
}
.sb-chip__face {
  position: relative;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
  width: 128px;
  min-height: 40px;
  padding: 7px 10px;
  background: rgba(3, 15, 9, .88);
  border: 1px solid color-mix(in srgb, var(--sb-accent) 45%, #0a3a20);
  border-left: 3px solid var(--sb-accent);
  border-radius: 8px;
  color: #D7FBE4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--sb-accent) 65%, transparent);
  cursor: pointer;
}
.sb-chip__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-chip--home .sb-chip__face {
  border-color: var(--swarna-gold);
  border-left-color: var(--swarna-gold);
  box-shadow: 0 0 16px -2px var(--swarna-gold);
  font-weight: 700;
}

.sb-chip__badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--swarna-gold); color: #06120A;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 99px;
  pointer-events: none;
}

/* Hover / focus / keyboard-tab -- leaf-element-only change (the face
   itself), never the .sb-chip transform wrapper, so nothing inside the
   preserve-3d chain gets touched. */
.sb-chip__face:hover,
.sb-chip__face:focus-visible {
  background: rgba(3, 28, 16, .97);
  box-shadow: 0 0 22px 0 var(--sb-accent);
  z-index: 5;
}
.sb-chip__face:focus-visible { outline: none; }

/* Search filter states, toggled by sitemap3d.js adding classes to .sb-chip */
.sb-chip.sb-dim { opacity: .1; filter: saturate(.3); }
.sb-chip.sb-match .sb-chip__face {
  background: rgba(4, 40, 20, .97);
  box-shadow: 0 0 26px 2px var(--sb-accent);
}

@media (max-width: 767px) {
  .sb-stage { height: 1300px; perspective: 1400px; }
}