:root { --bg: #0d1626; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg);
  touch-action: none; -ms-touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}
#stage { position: fixed; inset: 0; touch-action: none; }
#frame { position: absolute; overflow: hidden; touch-action: none; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cell { position: absolute; }
.fill {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
}
.icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1; font-weight: 400; letter-spacing: 0; font-style: normal;
}
.num { margin-top: 0.35em; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.name { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-top: 0.5em; }
svg.arc { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.arc path { fill: none; stroke-linecap: round; }
#depth {
  position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
  font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #eaeaea; opacity: 0.35; pointer-events: none; font-variant-numeric: tabular-nums;
}
svg.arc path.hint {
  stroke-width: 3.5; stroke-dasharray: 0.01 16; stroke-linecap: round; opacity: 0;
  transition: opacity 600ms ease; animation: phi-dots 1.1s linear infinite;
}
@keyframes phi-dots { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { svg.arc path.hint { animation: none; transition: none; } }