/* 3D scene page (/scene) — from the design's scene.html. */
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; font-family: "DM Sans", "Noto Sans Telugu", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
#labels { position: absolute; inset: 0; pointer-events: none; }
.hs {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 8px;
  border: 0; background: rgba(255, 253, 246, 0.94); color: #173a2f; padding: 6px 12px 6px 6px; border-radius: 999px;
  font: 600 12.5px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(10, 30, 24, 0.6); transition: background 0.25s, color 0.25s, opacity 0.3s;
}
.hs:hover, .hs[aria-pressed="true"] { background: #173a2f; color: #f3dd8e; }
.hs:focus-visible { outline: 3px solid #e0b84a; outline-offset: 2px; }
.hs i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #e0b84a; flex: none; }
.hs i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #e0b84a; animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
#card {
  position: absolute; left: 16px; bottom: 16px; max-width: min(340px, calc(100% - 32px));
  background: rgba(255, 253, 246, 0.97); color: #1e3029; border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 30px 60px -30px rgba(10, 30, 24, 0.7);
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; pointer-events: none;
}
#card.on { opacity: 1; transform: none; pointer-events: auto; }
#card h3 { margin: 0 0 6px; font: 500 20px/1.2 Newsreader, "Noto Sans Telugu", serif; color: #173a2f; }
#card p { margin: 0; font-size: 14px; line-height: 1.55; color: #43534c; }
#hint {
  position: absolute; right: 16px; top: 14px; padding: 8px 12px; border-radius: 999px; pointer-events: none;
  font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 253, 246, 0.8); background: rgba(10, 30, 24, 0.4); transition: opacity 0.6s;
}
body.light #hint { color: #2c5a48; background: rgba(255, 255, 255, 0.7); }
@media (prefers-reduced-motion: reduce) { .hs i::after { animation: none; } }