/* Try Time only. The header, the play view, the cue and the cards are ../shared/arcade.css, shared with Sleigh Run;
   the rest are in ../shared/base.css. Rugby green (--rugby) marks the game; the main action stays yellow. */
.sh .kicker { color: var(--rugby); }
#rugby-age { margin-top: 22px; }
#play { background: #0F2219; }
#hud-t { color: var(--accent); min-width: 2ch; }
.cue { bottom: 30%; }
.cue-big, .cue-small { text-shadow: 0 0 6px #0F2219, 0 0 2px #0F2219; }

/* the Pass button: big, low on the right, where a thumb rests; clear of the phone's home bar */
.pass {
  position: absolute; z-index: 1;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  min-width: 128px; min-height: 72px; font-size: 24px; font-weight: 800;
  touch-action: none;
}
/* a word on what just happened (tagged, a ruck won), under the bar */
.flash {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 76px); transform: translateX(-50%); margin: 0;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 12px; pointer-events: none;
  background: var(--raised); border: 2px solid var(--accent); color: var(--text); font-size: 18px; font-weight: 800; text-align: center;
}
/* the referee's card: low on the screen, so the play it explains shows above it (draw.js lifts the camera) */
#call { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%); max-height: calc(100% - 150px); }
#call .card-head { font-size: clamp(34px, 9vw, 52px); }
#call.pop { animation-name: rise-low; }
@keyframes rise-low { from { transform: translate(-50%, 10px); opacity: 0.6; } to { transform: translateX(-50%); } }
#call.good .card-head { color: var(--right); }
.card .restart { font-weight: 600; }
.card .signal { margin: 4px 0 0; }
@media (max-height: 600px) {
  .pass { min-height: 64px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .flash { top: calc(env(safe-area-inset-top, 0px) + 66px); font-size: 16px; }
  #call .card-line { font-size: 16px; margin-top: 6px; }
  #call .signal { font-size: 13px; }
  #call .card-head { font-size: 32px; }
  #call .home-actions { margin-top: 10px; }
}