.top{display:flex;justify-content:space-between;padding:8px 16px}.top a{color:var(--muted);text-decoration:none}

.log{margin:0;padding-left:22px;overflow:auto;font-family:ui-monospace,monospace;font-size:.8rem}
.sq .tag{position:absolute;right:2px;top:1px;font-size:10px;font-weight:700;color:#000a;line-height:1}
.sq.mine{box-shadow:inset 0 0 0 3px #3fc1ffcc}.sq.ally{box-shadow:inset 0 0 0 3px #59d68a88}.sq.foe{box-shadow:inset 0 0 0 3px #ff5d5d88}
.sq.active{box-shadow:inset 0 0 0 4px #f6d360}
.pc.rock{font-size:.8em}
.panel .row{display:flex;gap:6px;flex-wrap:wrap}.panel .row button{flex:1}
.small{font-size:.82rem;color:var(--muted);margin:0}


/* ---- Spectator Chaos animation layer (anim.js) ---- */
.sq.drop .pc.rock{display:inline-block;animation:ockFall .62s cubic-bezier(.5,0,.75,.2) var(--ock-dl,0ms) both;transform-origin:50% 90%}
@keyframes ockFall{0%{transform:translateY(-260%) rotate(-25deg);opacity:0}15%{opacity:1}60%{transform:translateY(0) rotate(0) scale(1)}
  72%{transform:translateY(0) scale(1.25,.78)}86%{transform:translateY(-6%) scale(.94,1.06)}100%{transform:none}}
@media (update:none){.sq.drop .pc.rock{animation:none}}