.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}.sq.drop{animation:drop .6s}
.pc.rock{font-size:.8em}
@keyframes drop{from{filter:brightness(2)}}
.panel .row{display:flex;gap:6px;flex-wrap:wrap}.panel .row button{flex:1}
.small{font-size:.82rem;color:var(--muted);margin:0}


/* ---- Secret Traitor animation layer (anim.js) ---- */
.sq.ock-turn::after{content:'';position:absolute;inset:6%;border-radius:22%;border:4px solid #1cb0f6;box-shadow:0 3px 0 #1899d6;pointer-events:none;opacity:0;
  animation:ockTurn .8s cubic-bezier(.34,1.56,.64,1) var(--ock-dl,0ms) both}
@keyframes ockTurn{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media (update:none){.sq.ock-turn::after{animation:none}}