/* Perfect Circle (public/arcade/circle.js). A black CRT drawn on like a vector display: the stroke is phosphor (a
   wide faint pass under a bright core, no blur), warm white where round, pink to red where it strays. The live score
   is the bold thing: big Jersey numbers riding the middle of the circle, lit neon once it's 90% or better. */
.ag-stage[data-kind="circle"] .pc { position: absolute; inset: 0; color: var(--ac-marquee); font-family: var(--ac-pixel); overflow: hidden; container-type: size; }
.ag-stage[data-kind="circle"] .pc [hidden] { display: none !important; }
.ag-stage[data-kind="circle"] .pc p { margin: 0; }
.ag-stage[data-kind="circle"] .pc-crt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair;
  -webkit-tap-highlight-color: transparent; }
.ag-stage[data-kind="circle"] .pc-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px 0; pointer-events: none; }
.ag-stage[data-kind="circle"] .pc-clock { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ag-stage[data-kind="circle"] .pc-clock.low { color: var(--ac-p0); animation: pc-blink 1s steps(1) infinite; }
.ag-stage[data-kind="circle"] .pc-them { font-size: 22px; line-height: 1; color: var(--ac-ink-2); text-align: right; }
.ag-stage[data-kind="circle"] .pc-them.done { color: var(--ac-marquee); }
@keyframes pc-blink { 50% { opacity: .35; } }

/* before the first stroke */
.ag-stage[data-kind="circle"] .pc-ask { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; }
.ag-stage[data-kind="circle"] .pc-big { font-size: clamp(44px, 14cqmin, 72px); line-height: 1; letter-spacing: .03em; }
.ag-stage[data-kind="circle"] .pc-sub { margin-top: 10px !important; font: 400 16px/1.35 var(--font); color: var(--ac-ink-2); }

/* the score in the middle of the circle */
.ag-stage[data-kind="circle"] .pc-score { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-size: clamp(48px, 16cqmin, 96px); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ac-ink-2); }
.ag-stage[data-kind="circle"] .pc-score.great { color: var(--ac-marquee); }
.ag-stage[data-kind="circle"] .pc-score.final { color: var(--ac-marquee); }
.ag-stage[data-kind="circle"] .pc-score.final.great { text-shadow: 0 0 6px #7b8cff, 0 0 18px #4a5ad8; }
.ag-stage[data-kind="circle"] .pc-score.pop { animation: pc-pop .45s steps(4, end); }
@keyframes pc-pop { from { transform: translate(-50%, -50%) scale(1.5); color: #7b8cff; } }

/* a stroke that didn't count */
.ag-stage[data-kind="circle"] .pc-msg { position: absolute; left: 16px; right: 16px; bottom: 18px; text-align: center; pointer-events: none;
  font-size: 30px; line-height: 1.1; color: #b3bcff; }
.ag-stage[data-kind="circle"] .pc.shake .pc-msg { animation: pc-shake .3s steps(4); }
@keyframes pc-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

/* the face-off: who's which colour, under the rings */
.ag-stage[data-kind="circle"] .pc-legend { position: absolute; left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  font-size: 24px; line-height: 1; pointer-events: none; }
.ag-stage[data-kind="circle"] .pc-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--c); }
.ag-stage[data-kind="circle"] .pc-legend i { width: 14px; height: 4px; background: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .ag-stage[data-kind="circle"] .pc-score.pop, .ag-stage[data-kind="circle"] .pc.shake .pc-msg { animation: none; }
}