:root {
  color-scheme: dark;
  --navy: #0e1a2b; --plate: rgba(10, 20, 36, .9); --gold: #ffd21f; --red: #ff3b2f; --paper: #fbf8f1; --ink: #13161c;
  --edge: max(24px, 2.5vw);
  --nav: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy); color: #fff; font: 18px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
canvas#yard { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
[hidden] { display: none !important; }
.g, #bug, #clock, #board, #lower, #big, #slowmo, h1, h2, #code, #results { font-family: "League Gothic", Impact, "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; }

/* the bug: top left */
#bug { position: fixed; top: var(--edge); left: var(--edge); display: flex; align-items: stretch; font-size: clamp(18px, 2vw, 34px); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#bug b { background: var(--gold); color: var(--ink); padding: .1em .5em; font-weight: 400; }
#bug .live { background: var(--red); padding: .1em .45em; display: flex; align-items: center; gap: .3em; }
#bug .live i { width: .45em; height: .45em; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
#bug #where { background: var(--plate); padding: .1em .55em; color: #cfe0f5; }
@keyframes blink { 50% { opacity: .2; } }

/* the clock: top middle */
#clock { position: fixed; top: var(--edge); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; font-size: clamp(22px, 2.6vw, 46px); }
#clock > b { background: var(--plate); padding: .02em .5em; font-weight: 400; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
/* the shot clock: only its last ten seconds show */
#shot { background: var(--gold); color: var(--ink); padding: .02em .45em; }
#shot b { font-weight: 400; }
#shot.hot { background: var(--red); color: #fff; animation: blink .5s infinite; }

/* the board: times IT, right */
#board { position: fixed; top: var(--edge); right: var(--edge); margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: clamp(16px, 1.6vw, 28px); min-width: 11em; }
#board li { display: grid; grid-template-columns: .4em 1.5em 1fr auto; gap: .45em; align-items: center; background: var(--plate); padding: .12em .5em .12em 0; transition: transform .3s; }
#board li i { align-self: stretch; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
#board li .face { width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.7); background: var(--paper) center/cover no-repeat; display: grid; place-items: center; color: #fff; font-size: .8em; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
#board li.head { display: block; background: none; padding: 0 .5em; font-size: .62em; color: #cfe0f5; text-align: right; text-shadow: 0 1px 2px #000; }
/* close shots: the board shrinks out of the way */
body.close-shot #board { font-size: clamp(16px, 1.25vw, 22px); }
#board { transition: font-size .3s, opacity .3s; }
/* name tags over the players, in the wide shots */
#tags { position: fixed; inset: 0; pointer-events: none; }
#tags b { position: absolute; transform: translate(-50%, -100%); font: 400 clamp(14px, 1.3vw, 24px) "League Gothic", Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 0 .4em; border-bottom: 3px solid var(--c); background: rgba(10, 20, 36, .7); white-space: nowrap; transition: opacity .25s; }
#tags b.it { background: var(--gold); color: var(--ink); }
#board li b { font-weight: 400; font-variant-numeric: tabular-nums; color: #cfe0f5; }
#board li.it { background: var(--gold); color: var(--ink); }
#board li.it b { color: var(--ink); }
#board li.it .n::after { content: " · IT"; }
#board li.away { opacity: .55; }

/* the lower third: bottom left */
#lower { position: fixed; left: var(--edge); bottom: calc(var(--edge) + var(--nav)); display: grid; transform: translateX(-120%); transition: transform .45s cubic-bezier(.2,.9,.2,1.1); max-width: 70vw; }
#lower.on { transform: none; }
#lower small { justify-self: start; background: var(--gold); color: var(--ink); padding: .05em .55em; font-size: clamp(16px, 1.6vw, 28px); }
#lower small:empty { display: none; }
#lower b { background: var(--plate); padding: .02em .5em .05em; font-weight: 400; font-size: clamp(34px, 4.4vw, 80px); line-height: 1.05; border-left: 8px solid var(--gold); }

/* the big stamp: STOP!, HIT! */
#big { position: fixed; inset: 0 0 var(--nav); display: grid; place-items: center; pointer-events: none; font-size: clamp(90px, 17vw, 300px); color: #fff; -webkit-text-stroke: .03em var(--ink); text-shadow: .05em .05em 0 var(--red); opacity: 0; }
#big.on { animation: stamp 1.1s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 18% { opacity: 1; transform: scale(1) rotate(-4deg); } 75% { opacity: 1; transform: scale(1.04) rotate(-4deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-4deg); } }

#slowmo { position: fixed; top: calc(var(--edge) + 2.4em); left: var(--edge); background: var(--red); padding: .05em .6em; font-size: clamp(22px, 2.4vw, 42px); animation: blink 1s infinite; }

/* lobby and final cards */
#lobby, #final { position: fixed; inset: 0 0 var(--nav); display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center; justify-items: start; padding: var(--edge); gap: 14px; pointer-events: none; overflow: auto; }
.card { pointer-events: auto; background: var(--paper); color: var(--ink); padding: clamp(16px, 2vw, 32px) clamp(18px, 2.4vw, 40px); box-shadow: 10px 10px 0 var(--gold); max-width: min(560px, 100%); box-sizing: border-box; }
.card h1, .card h2 { margin: 0; font-weight: 400; font-size: clamp(56px, 7vw, 120px); line-height: .9; color: var(--ink); }
.card h1::after { content: ""; display: block; width: 2.2em; height: .12em; background: var(--red); margin: .1em 0 .2em; }
.tag { margin: 0 0 14px; font-size: clamp(15px, 1.3vw, 20px); }
.join { display: flex; gap: 18px; align-items: center; }
#qr { width: clamp(120px, 13vw, 200px); aspect-ratio: 1; flex: none; background: #fff; }
#qr svg { width: 100%; height: 100%; display: block; }
.step { margin: 0; font-size: clamp(16px, 2.6vh, 26px); color: #4b5260; }
#solo-link { margin-top: 10px; }
#solo-link a { color: #1f4fd8; font-weight: 700; }
#url { margin: 2px 0 8px; font-weight: 700; word-break: break-all; font-size: clamp(17px, 3vh, 28px); }
#code { margin: 0; font-size: clamp(54px, 6vw, 96px); line-height: 1; letter-spacing: .12em; }
#players { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
#players li { display: flex; align-items: center; gap: 6px; background: #ece6d8; padding: 3px 10px 3px 3px; border-radius: 999px; font-weight: 600; }
#players li i { width: 26px; height: 26px; border-radius: 50%; background: #fff center/cover; box-shadow: 0 0 0 3px var(--c); }
#players li small { color: #6b7280; font-weight: 500; }
#hint { margin: 10px 0 0; font-size: clamp(16px, 2.6vh, 24px); color: #4b5260; }
#problem { margin: 10px 0 0; color: #b42318; font-size: 15px; }
.rules { pointer-events: auto; background: var(--plate); padding: 10px 16px; max-width: min(560px, 100%); box-sizing: border-box; font-size: 16px; }
.rules summary { cursor: pointer; font-weight: 700; }
.rules ol { margin: 8px 0 0; padding-left: 1.3em; }
.rules li { margin: 4px 0; }

#final .card { max-width: min(760px, 100%); }
#results { list-style: none; margin: 6px 0 10px; padding: 0; font-size: clamp(22px, 2.5vw, 40px); }
/* place, colour, name (an award under it), times IT and seconds IT, hits of throws; the throw mix under those */
#results li { display: grid; grid-template-columns: 1.6em .45em minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: .45em; align-items: baseline; padding: .08em 0; border-bottom: 2px solid #e5dfd0; }
#results li i { grid-row: 1 / 3; align-self: stretch; }
#results li .place { grid-row: 1 / 3; align-self: center; }
#results li .who { grid-column: 3; display: flex; flex-direction: column; line-height: 1; }
#results li .who em { font-style: normal; font-size: .5em; color: #a0410d; background: #fff1c4; align-self: start; padding: .05em .4em; margin-top: .15em; }
#results li small { color: #4b5260; font-size: .55em; text-align: right; }
#results li .acc { color: var(--ink); }
#results li .mix { grid-column: 4 / 6; grid-row: 2; font-family: system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-size: .42em; }
#results li.win { color: #a0410d; }
#results-head { display: flex; justify-content: flex-end; gap: 2.2em; font-size: 13px; margin: 6px 0 0; text-transform: uppercase; letter-spacing: .06em; }

#tools { position: fixed; right: var(--edge); bottom: calc(var(--edge) + var(--nav)); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; transition: opacity .4s; }
#tools button { font: 20px "League Gothic", Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--plate); border: 2px solid var(--gold); padding: 6px 14px; cursor: pointer; }
#tools button:hover { background: #20324d; }
#tools #t-start { background: var(--gold); color: var(--ink); }
body.idle { cursor: none; }
body.idle #tools { opacity: 0; }
body.playing #t-start, body.playing #t-bot, body.playing #t-rmbot, body.playing #t-tab { display: none; }

@media (max-width: 700px) {
  #board { font-size: 14px; min-width: 8em; }
  #lower { max-width: 92vw; }
  .join { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #big.on { animation: calm-stamp 1.4s linear both; }
  #bug .live i, #slowmo, #shot.hot { animation: none; }
}
/* calm screen: the slams appear and fade, nothing blinks, no flash */
body.calm #big.on { animation: calm-stamp 1.4s linear both; }
body.calm #bug .live i, body.calm #slowmo, body.calm #shot.hot { animation: none; }
body.calm #flash, body.calm #wipe { display: none; }
@keyframes calm-stamp { 0% { opacity: 0; transform: rotate(-4deg); } 12%, 80% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; transform: rotate(-4deg); } }
/* the hub's bar sits on a band of the page's own navy (none in full screen or a desktop window, where the bar's height is 0) */
#navband { position: fixed; left: 0; right: 0; bottom: 0; height: var(--random-nav-h, 0px); background: var(--navy); pointer-events: none; }
/* the hit's white flash */
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* the broadcast's grade: a touch more contrast, a soft vignette */
canvas#yard { filter: contrast(1.04) saturate(1.04); }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(10, 16, 28, .3) 100%); }
/* the replay: letterbox bars slide in, a REPLAY bug, a gold and red wipe across at either end */
#replay .bar { position: fixed; left: 0; right: 0; height: 0; background: #0b1220; transition: height .35s ease; pointer-events: none; }
#replay .top { top: 0; } #replay .bot { bottom: 0; }
body.replay #replay .bar { height: 11vh; }
#replay b { position: fixed; right: var(--edge); bottom: calc(11vh + 14px); font: 400 clamp(22px, 2.6vw, 46px) "League Gothic", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: .02em .5em; box-shadow: .18em .18em 0 var(--red); opacity: 0; transform: translateY(40%); transition: opacity .3s .2s, transform .3s .2s; }
body.replay #replay b { opacity: 1; transform: none; }
#wipe { position: fixed; top: -10%; bottom: -10%; left: -60%; width: 60%; pointer-events: none; background: linear-gradient(100deg, transparent 0 18%, var(--gold) 18% 62%, var(--red) 62% 80%, transparent 80%); transform: translateX(0); visibility: hidden; }
#wipe.on { visibility: visible; animation: wipe .5s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes wipe { to { transform: translateX(280%); } }
#flash.on { animation: flash .22s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* a 720p screen: the lobby's card and the rules made smaller so both fit, the title never cut off */
@media (max-height: 820px) {
  #lobby { gap: 10px; }
  .card { padding: 12px 20px; }
  .card h1, .card h2 { font-size: clamp(40px, 8vh, 64px); }
  #lobby .tag { display: none; }
  #qr { width: clamp(90px, 14vh, 130px); }
  #code { font-size: clamp(40px, 8vh, 64px); }
  #players { margin-top: 6px; }
  #players li { padding-block: 0; }
  .rules { font-size: 15px; padding: 6px 14px; line-height: 1.3; }
  .rules ol { margin-top: 4px; }
  .rules li { margin: 1px 0; }
}