/* Ref Says: the clip over the question, and the referee's signal under the verdict. The clip is drawn in metres
   (refsays.js), so sizes on it are set there; this sheet gives it its colours. Blue players are circles, Red squares. */
.clip { --ball: #FFD23F; position: relative; margin-top: 10px; width: 100%; max-width: calc(min(28vh, 256px) * 2.5); max-width: calc(min(28dvh, 256px) * 2.5); }
.clip-svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; border: 2px solid var(--edge); border-radius: 10px; background: var(--raised); }
.replay { position: absolute; right: 5px; bottom: 5px; width: 44px; min-height: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; background: var(--ground); border-color: var(--edge); }
@media (hover: hover) { .replay:not(:disabled):hover { background: var(--raised); } }
#play .question { font-size: clamp(17px, 4.4vw, 22px); }
#play .clue { padding-top: 8px; }

.pl .up, .pl .lying, .block rect { stroke: #121A3A; }
.pl.blue .up, .pl.blue .lying, .block.blue rect, .fig-head.b { fill: #6CB6FF; }
.pl.red .up, .pl.red .lying, .block.red rect, .fig-head.r { fill: #FF8C5A; }
.pl .lying, .pl.down .up { display: none; }
.pl.down .lying { display: inline; }
.pn, .block text { fill: #121A3A; font-weight: 800; }
.ball ellipse { fill: var(--ball); stroke: #121A3A; }
.hit path { stroke: var(--ball); fill: none; }
.note rect, .line-label rect { fill: #121A3A; }
.note text { fill: var(--text); font-weight: 600; }
.line-label text { fill: var(--ball); font-weight: 600; }
.mark-line { stroke: var(--ball); fill: none; }
.pitch-label { fill: #DDE6D8; font-weight: 600; }
.arrow { stroke: var(--text); }
.arrow.ball { stroke: var(--ball); }
.arrow-head { fill: var(--text); }
.arrow-head.ball { fill: var(--ball); }
.close-box { fill: #121A3A; stroke: var(--edge); }
.close-who { fill: var(--muted); font-weight: 600; }
.close-at { fill: var(--ball); font-weight: 800; }
.fig { fill: none; }
.fig.b { stroke: #6CB6FF; }
.fig.r { stroke: #FF8C5A; }
.off { display: none; }

/* the referee's signal: a small figure beside the words */
.ref-signal { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.ref-signal p { margin: 0; }
.signal-fig { flex: none; width: 68px; height: auto; }
.sf-head { fill: var(--text); }
.sf-body, .sf-arm, .sf-move { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sf-body { stroke: var(--text); stroke-width: 4; }
.sf-arm { stroke: var(--accent); stroke-width: 4; }
.sf-move { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }

@media (max-height: 600px) {
  .clip { max-width: calc(22vh * 2.5); max-width: calc(22dvh * 2.5); margin-top: 6px; }
  #play .question { font-size: 16px; line-height: 1.3; margin-top: 4px; }
  #play .clue { padding-top: 6px; }
  #play .answers { margin-top: 8px; }
  #play .answers .btn { font-size: 16px; line-height: 1.25; }
}
@media (forced-colors: active) { .clip-svg { forced-color-adjust: none; } }