.stage { max-width: 560px; }
.info { display: flex; justify-content: space-between; color: var(--muted); font-size: .9rem; margin: 0 6px 12px; }
.info b { font-family: var(--mono); font-weight: 400; color: var(--gold-l); }
.ar-board {
  position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; direction: ltr; overflow: hidden;
  border-radius: 16px; background: #0f0c09; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 40px rgba(0,0,0,.5);
  background-image: linear-gradient(rgba(239,233,221,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(239,233,221,.07) 1px, transparent 1px);
  background-size: calc(100% / var(--n)) calc(100% / var(--n));
}
.ar {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--n)); height: calc(100% / var(--n)); padding: 0; border: 0; background: transparent; cursor: pointer;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); transition: transform .4s cubic-bezier(.4,0,1,1), opacity .35s;
  color: var(--c);
}
.ar::before { content: ""; position: absolute; inset: 9%; border-radius: 22%; background: color-mix(in srgb, var(--c) 18%, #1a1612); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); transition: background .2s; }
.ar:hover::before { background: color-mix(in srgb, var(--c) 30%, #1a1612); }
.ar svg { position: absolute; inset: 22%; width: 56%; height: 56%; transform: rotate(var(--rot)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ar.fly { transform: translate(calc(var(--x) * 100% + var(--tx)), calc(var(--y) * 100% + var(--ty))); opacity: 0; pointer-events: none; }
.ar.bump { animation: arbump .38s; }
@keyframes arbump { 40% { transform: translate(calc(var(--x) * 100% + var(--bx)), calc(var(--y) * 100% + var(--by))); } }
.ar.hit::before { background: #e0705c; box-shadow: 0 0 14px #e0705c; }
.ar.hint::before { animation: arhint .7s ease-in-out infinite alternate; }
@keyframes arhint { to { background: color-mix(in srgb, var(--c) 55%, #1a1612); box-shadow: 0 0 16px var(--c); } }
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.stars { font-size: 2.4rem; color: var(--gold-l); letter-spacing: .1em; margin: 6px 0; }
.stars span { color: rgba(239,233,221,.18); }