/* The screen: a 1920 x 1080 stage, scaled to the window by tv.mjs. Chromium 63: no flex gap, no inset. */
html, body { overflow: hidden; }
body { background: radial-gradient(ellipse at 50% 38%, var(--field-hi) 0%, var(--field) 52%, var(--deep) 100%); }
html:not(.mouse) body { cursor: none; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
#old { display: none; position: fixed; left: 0; right: 0; top: 40%; text-align: center; font-size: 28px; color: var(--ink); }
#lobby, #play, #reveal, #scores { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }

/* ---- lobby ---- */
#mark { position: absolute; left: 110px; top: 250px; width: 960px; text-align: center; font-size: 132px; }
#mark .tile { transition: transform 0.55s cubic-bezier(.3,1.4,.5,1); }
#tagline { position: absolute; left: 110px; top: 480px; width: 960px; text-align: center; font-size: 40px; font-weight: 500; color: var(--dim); }
#joinAt { position: absolute; left: 110px; top: 600px; width: 960px; text-align: center; font-size: 36px; color: var(--dim); }
#joinAt b { color: var(--ink); letter-spacing: 0.08em; font-size: 64px; display: block; margin-top: 6px; }
#soloAt { position: absolute; left: 110px; top: 790px; width: 960px; text-align: center; font-size: 28px; color: var(--dim); }
#soloAt b { color: var(--ink); }
#joinBig { position: absolute; left: 1210px; top: 150px; }
#joinBig .qr { display: block; width: 540px; height: 540px; border-radius: 26px; box-shadow: 0 14px 0 var(--deep); }
#joinBig .addr { display: none; }
.join { text-decoration: none; color: inherit; display: block; }

/* ---- a challenge ---- */
#tag, #rtag { position: absolute; left: 64px; top: 44px; font-size: 32px; font-weight: 700; color: var(--dim); letter-spacing: 0.03em; }
#tag b, #rtag b { color: var(--ink); }
#cons { position: absolute; left: 0; top: 250px; width: 1920px; text-align: center; }
#cons .tile { animation: drop 0.5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes drop { from { transform: translateY(-0.6em) scale(0.6); opacity: 0; } }
#label { position: absolute; left: 0; top: 520px; width: 1920px; text-align: center; font-size: 70px; font-weight: 700; }
#count { position: absolute; left: 0; top: 640px; width: 1920px; text-align: center; font-size: 180px; font-weight: 700; color: var(--gold); line-height: 1; }
#count.go { animation: beat 0.6s ease-out; }
@keyframes beat { from { transform: scale(1.5); opacity: 0.3; } }
#timer { position: absolute; left: 260px; top: 700px; width: 1400px; height: 26px; border-radius: 13px; background: var(--deep); overflow: hidden; }
#timer i { display: block; height: 26px; width: 100%; border-radius: 13px; background: var(--gold); transform-origin: 0 50%; }
#timer.late i { background: var(--bad); }

/* ---- the roster: an avatar, a name, and in a challenge the words typed ---- */
#roster { position: absolute; left: 0; top: 850px; width: 1920px; height: 200px; text-align: center; font-size: 0; }
.chip { display: inline-block; vertical-align: top; width: 210px; margin: 0 8px; text-align: center; position: relative; transition: opacity 0.4s; }
.chip .av { width: 92px; height: 92px; line-height: 92px; font-size: 50px; box-shadow: 0 6px 0 rgba(20, 0, 8, 0.5); }
.chip .name { display: block; font-size: 30px; font-weight: 700; height: 44px; line-height: 44px; margin-top: 8px; white-space: nowrap; overflow: hidden; }
.chip .lvl { display: block; font-size: 20px; color: var(--dim); height: 24px; }
.chip .n { position: absolute; right: 30px; top: -14px; min-width: 56px; height: 56px; line-height: 56px; padding: 0 10px; border-radius: 28px; background: var(--tile); color: var(--tile-ink); font-size: 34px; font-weight: 700; box-shadow: 0 4px 0 var(--tile-edge); }
.chip .n.bump { animation: bump 0.3s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { from { transform: scale(1.45); } }
.chip.away { opacity: 0.35; }

/* ---- the reveal ---- */
#rhead { position: absolute; left: 64px; top: 92px; height: 80px; white-space: nowrap; }
#rcons { font-size: 66px; vertical-align: middle; }
#rlabel { font-size: 40px; font-weight: 700; vertical-align: middle; margin-left: 26px; }
#strip { position: absolute; left: 64px; top: 196px; width: 1800px; height: 44px; white-space: nowrap; overflow: hidden; font-size: 30px; }
#strip span { display: inline-block; margin-right: 28px; color: var(--dim); text-decoration: line-through; text-decoration-thickness: 3px; animation: rise 0.4s ease-out; }
#strip span i { font-style: normal; color: var(--gold); text-decoration: none; display: inline-block; margin-left: 6px; font-size: 24px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
#window { position: absolute; left: 64px; top: 252px; width: 1792px; height: 8px; border-radius: 4px; overflow: hidden; }
#window i { display: block; height: 8px; width: 100%; background: var(--gold); transform-origin: 0 50%; border-radius: 4px; }

#coll { position: absolute; left: 0; top: 300px; width: 1920px; height: 600px; }
#cword { position: absolute; left: 0; top: 70px; width: 1920px; text-align: center; }
#cword .tile { transition: opacity 0.3s, transform 0.3s; }
#cword.struck .tile { opacity: 0.4; transform: translateY(0.08em); }
#cword .strike { position: absolute; left: 0; top: 50%; height: 0.13em; margin-top: -0.065em; background: var(--deep); border-radius: 0.07em; box-shadow: 0 0 0 0.03em var(--tile); }
#ccount { position: absolute; left: 0; top: 290px; width: 1920px; text-align: center; font-size: 110px; font-weight: 700; color: var(--gold); line-height: 1; }
#cwho { position: absolute; left: 0; top: 430px; width: 1920px; text-align: center; font-size: 0; }
#cwho .who { display: inline-block; margin: 0 18px; text-align: center; animation: pop 0.35s cubic-bezier(.3,1.6,.5,1) both; }
#cwho .av { width: 96px; height: 96px; line-height: 96px; font-size: 52px; }
#cwho .who .nm { display: block; font-size: 28px; font-weight: 700; margin-top: 8px; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }

#cols { position: absolute; left: 60px; top: 276px; width: 1800px; height: 790px; }
.col { position: absolute; top: 0; height: 790px; }
.col .head { position: absolute; left: 0; top: 0; height: 70px; white-space: nowrap; overflow: hidden; }
.col .head .av { width: 62px; height: 62px; line-height: 62px; font-size: 34px; }
.col .head .nm { display: inline-block; vertical-align: middle; font-size: 32px; font-weight: 700; margin-left: 12px; }
.col .pts { position: absolute; right: 12px; top: 6px; font-size: 46px; font-weight: 700; color: var(--gold); text-align: right; }
.col .pts.neg { color: var(--bad); }
.col .list { position: absolute; left: 0; top: 86px; width: 100%; height: 700px; overflow: hidden; transition: opacity 0.4s; }
.col.tally .list { opacity: 0.08; }
.col .big { position: absolute; left: 0; top: 150px; width: 100%; text-align: center; font-size: 150px; font-weight: 700; color: var(--gold); line-height: 1; }
.col .big.neg { color: var(--bad); }
.w { position: absolute; left: 0; width: 100%; white-space: nowrap; font-weight: 700; }
.w .t { position: absolute; left: 44px; top: 0; transform-origin: 0 50%; }
.w .p { position: absolute; right: 12px; top: 0; color: var(--gold); font-size: 0.72em; }
.w .by { position: absolute; left: 0; top: 50%; width: 38px; height: 38px; line-height: 38px; margin-top: -19px; font-size: 21px; }
.w .strike { position: absolute; left: 40px; top: 50%; height: 6px; margin-top: -3px; background: var(--bad); border-radius: 3px; box-shadow: 0 0 12px var(--bad); transform-origin: 0 50%; }
.w .stamp { position: absolute; left: -1px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--ok); }
.w .stamp svg { width: 38px; height: 38px; display: block; }
.w .stamp path { fill: none; stroke: var(--deep); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.w.fake .t { color: var(--dim); }
.w.fake .p { color: var(--bad); }
.w.real .p { color: var(--ok); }
.float { position: absolute; font-size: 44px; font-weight: 700; white-space: nowrap; pointer-events: none; }

/* ---- scoreboards ---- */
#stitle { position: absolute; left: 0; top: 70px; width: 1920px; text-align: center; font-size: 46px; font-weight: 700; color: var(--dim); letter-spacing: 0.04em; }
#scores.final #stitle { top: 380px; }
#crown { position: absolute; left: 870px; top: 50px; width: 180px; height: 112px; }
#crown path { fill: var(--gold); }
#winner { position: absolute; left: 0; top: 170px; width: 1920px; text-align: center; font-size: 150px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
#srows { position: absolute; left: 360px; top: 170px; width: 1200px; }
#scores.final #srows { top: 450px; }
.srow { position: absolute; left: 0; width: 1200px; height: 96px; white-space: nowrap; }
.srow > * { position: absolute; top: 0; height: 96px; line-height: 96px; }
.srow .rk { left: 0; width: 70px; font-size: 44px; font-weight: 700; color: var(--dim); text-align: right; }
.srow .av { left: 100px; top: 10px; width: 76px; height: 76px; line-height: 76px; font-size: 40px; position: absolute; }
.srow .nm { left: 206px; width: 520px; font-size: 52px; font-weight: 700; overflow: hidden; }
.srow .mv { left: 730px; width: 110px; font-size: 30px; font-weight: 700; }
.srow .mv.up { color: var(--ok); }
.srow .mv.down { color: var(--bad); }
.srow .gn { left: 840px; width: 160px; font-size: 40px; font-weight: 700; color: var(--gold); text-align: right; }
.srow .gn.neg { color: var(--bad); }
.srow .tot { left: 1010px; width: 190px; font-size: 64px; font-weight: 700; text-align: right; }
#scores.final .srow { height: 76px; }
#scores.final .srow > * { height: 76px; line-height: 76px; }
#scores.final .srow .av { top: 6px; width: 64px; height: 64px; line-height: 64px; font-size: 34px; }

/* ---- corners ---- */
#joinSmall { position: absolute; right: 36px; top: 30px; text-align: right; }
#joinSmall .qr { display: block; width: 150px; height: 150px; border-radius: 10px; margin-left: auto; }
#joinSmall .addr { display: block; font-size: 19px; color: var(--dim); margin-top: 6px; white-space: nowrap; }
#joinSmall .addr b { color: var(--ink); }
#marks { position: absolute; left: 30px; bottom: 26px; }
#marks svg { width: 34px; height: 34px; margin-right: 12px; }
#marks path, #marks circle { fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
#marks .fill { fill: var(--dim); stroke: none; }
#rest { display: none; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(30, 2, 12, 0.92); }
#restMark { position: absolute; left: 0; top: 440px; width: 1920px; text-align: center; font-size: 120px; opacity: 0.35; }
body.rest #rest { display: block; }
@media (prefers-reduced-motion: reduce) { #cons .tile, #cwho .who, #strip span { animation: none; } }
.col .none { font-size: 48px; color: var(--line); padding-left: 44px; }