/* The game's look, shared by the game (index.html) and the audience screen
   (audience.html). */
@font-face {
  font-family: 'Luckiest Guy';
  src: url('vendor/fonts/LuckiestGuy-Regular.ttf') format('truetype');
  font-display: swap;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1033; cursor: none; }
html.show-cursor, html.show-cursor body { cursor: auto; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* Kept rendered (not display:none) so Chrome keeps decoding camera frames. */
#video { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
#hud {
  position: fixed; inset: 0; pointer-events: none; text-align: center;
  /* The font has one weight; never let the browser fake a bold. */
  font: 400 5vh/1.15 'Luckiest Guy', 'Arial Black', sans-serif; font-synthesis: none; color: #fffbeb;
}
/* Cream letters with a thick ink outline and a hard ink drop shadow. */
#banner, #timer, #center, #sheet .continue, #logo, #joincount .num {
  -webkit-text-stroke: 0.1em #1a1033; paint-order: stroke fill; text-shadow: 0 0.14em 0 #1a1033;
}
#banner { position: absolute; top: 3vh; left: 20vw; right: 20vw; white-space: pre-line; }
#timer { position: absolute; top: 10vh; right: 3vw; font-size: 9vh; }
/* The round tracker, top right: 1 to 5. */
#rounds { position: absolute; top: 2vh; right: 2vw; display: flex; gap: 0.8vh; }
#rounds[hidden] { display: none; }
#rounds .dot {
  display: grid; place-items: center; width: 5vh; height: 5vh; border-radius: 50%; font-size: 3vh; line-height: 1;
  border: 0.45vh solid #1a1033; background: rgba(255, 251, 235, 0.35); color: #1a1033; transition: transform 0.25s;
}
#rounds .dot.now { background: #fffbeb; transform: scale(1.25); box-shadow: 0 0 0 0.4vh #ffe14d; }
#rounds .dot.done.star { background: #ffe14d; }
#rounds .dot.done.splat { background: #ff4fa3; color: #fffbeb; }
#rounds .dot.done:not(.star):not(.splat) { background: #b9b0d6; }
#center { position: absolute; top: 50%; left: 5vw; right: 5vw; transform: translateY(-50%); font-size: 7vh; white-space: pre-line; }
#meter { position: absolute; left: 6vw; right: 6vw; bottom: 4vh; height: 3vh; border: 0.5vh solid #1a1033; border-radius: 99px; background: #1a1033; }
#meter[hidden] { display: none; }
/* Pink while short of a star, yellow once the fill passes the marker. */
#meter-fill { height: 100%; width: 0; background: #ff4fa3; border-radius: 99px; transition: background-color 0.2s; }
#meter-fill.pass { background: #ffe14d; }
/* The pass threshold: a tick standing proud of the bar. */
#meter-pass {
  position: absolute; top: -1.2vh; bottom: -1.2vh; width: 0.8vh; transform: translateX(-50%);
  background: #fffbeb; border: 0.35vh solid #1a1033; border-radius: 99px;
}
.badge {
  position: absolute; transform: translate(-50%, -110%); padding: 0.4vh 1.4vh;
  border: 0.4vh solid #1a1033; border-radius: 99px; background: #ffe14d; color: #1a1033;
  font-size: 3.5vh; white-space: nowrap;
}
/* The joined badge's check, drawn because the font has no check glyph. */
.badge:not(.raising)::after {
  content: ''; display: inline-block; width: 0.28em; height: 0.56em; margin: 0 0.05em 0.12em 0.4em;
  border: solid currentColor; border-width: 0 0.14em 0.14em 0; transform: rotate(45deg);
}
.badge.raising { background: #fffbeb; opacity: 0.75; }
/* The lobby's hand buttons. The fill grows from the left while a hand is held on one. */
.hand {
  position: absolute; display: grid; place-items: center; box-sizing: border-box; padding: 0 1vh;
  border: 0.45vh solid #1a1033; border-radius: 99px; color: #1a1033; font-size: min(3vh, 1.9vw); line-height: 1.05;
  background: linear-gradient(90deg, #ffe14d calc(var(--fill, 0) * 100%), #a3e635 0);
  box-shadow: 0 0.6vh 0 #1a1033; opacity: 0.92;
}
.hand.off { background: linear-gradient(90deg, #ffe14d calc(var(--fill, 0) * 100%), #b9b0d6 0); }
.hand.go { background: linear-gradient(90deg, #ffe14d calc(var(--fill, 0) * 100%), #ff4fa3 0); color: #fffbeb; }
/* The summary's contact sheet: white-framed photos on the paper wall. */
#sheet {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 28vw);
  justify-content: center; align-content: center; gap: 4vh 3vw; background: rgba(251, 146, 60, 0.93);
  padding-top: 8vh; /* clear of the corner logo */
}
#sheet[hidden] { display: none; }
#sheet .card {
  --tilt: -2.5deg;
  margin: 0; padding: min(1.4vh, 0.8vw) min(1.4vh, 0.8vw) 0; background: #fff; border-radius: 0.5vh;
  box-shadow: 0 min(0.9vh, 0.5vw) 0 #1a1033; color: #1a1033;
  transform: rotate(var(--tilt)); animation: slap 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
/* Delays come from sheet.js, so the sounds can land with the cards. */
#sheet .card:nth-child(2) { --tilt: 2deg; }
#sheet .card:nth-child(3) { --tilt: -1.5deg; }
#sheet .card:nth-child(4) { --tilt: 2.5deg; }
#sheet .card:nth-child(5) { --tilt: -2deg; }
#sheet .card:nth-child(6) { --tilt: 1.5deg; }
#sheet .photo { position: relative; }
#sheet .photo canvas { display: block; width: 100%; height: auto; }
#sheet .blank {
  display: grid; place-items: center; background: #1a1033; color: #fffbeb;
  font-size: min(3vh, 1.8vw); opacity: 0.85;
}
#sheet .sticker {
  position: absolute; left: min(-1.6vh, -0.9vw); top: min(-1.6vh, -0.9vw); width: min(6vh, 3.4vw); height: min(6vh, 3.4vw);
  display: grid; place-items: center; border: min(0.45vh, 0.25vw) solid #1a1033; border-radius: 50%;
  background: #ffe14d; font-size: min(3.6vh, 2vw);
}
#sheet figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; padding: min(1.2vh, 0.7vw) 0.2vw min(1.6vh, 0.9vw);
  font-size: min(4vh, 2.3vw); line-height: 1;
}
#sheet .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sheet .mark { width: 1.4em; height: 1.4em; flex: none; align-self: center; }
#sheet .team {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh;
  padding: min(1.4vh, 0.8vw); font-size: min(4vh, 2.3vw);
}
#sheet .team strong { font-size: 1.8em; line-height: 1; color: #ff4fa3; }
#sheet .stars { display: flex; gap: 0.25em; }
#sheet .stars span { width: 1.7em; height: 1.7em; }
#sheet .stars .earned { animation: star-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes star-pop { from { scale: 0; rotate: -120deg; } to { scale: 1; rotate: 0deg; } }
/* The reveal's big star or splat, with the quip below it. */
#mark { position: absolute; left: 50%; top: 42%; width: 38vh; height: 38vh; translate: -50% -50%; }
#mark .big { display: block; width: 100%; height: 100%; animation: mark-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
#mark .big.splat { animation-name: splat-pop; }
@keyframes mark-pop { from { scale: 0; rotate: -90deg; } 60% { scale: 1.15; rotate: 10deg; } to { scale: 1; rotate: 0deg; } }
@keyframes splat-pop {
  from { scale: 0.2 1.8; opacity: 0; } 45% { scale: 1.3 0.75; opacity: 1; } 70% { scale: 0.92 1.08; } to { scale: 1 1; }
}
#center.below-mark { top: 72%; }
/* The lobby's start countdown, with the player count and prompt below. */
#center.counting { top: 84%; font-size: 6vh; }
#joincount { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
#joincount .num {
  position: absolute; left: 50%; top: 50%; translate: -50% -44%; font-size: 56vh; line-height: 1; color: #ffe14d;
  -webkit-text-stroke-width: 0.06em; text-shadow: 0 0.07em 0 #1a1033;
  animation: count-slam 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both, count-sink 0.5s ease-in 0.5s forwards;
}
#joincount .num.hot { color: #ff4fa3; }
#joincount .ring {
  position: absolute; left: 50%; top: 50%; width: 56vh; height: 56vh; translate: -50% -50%;
  border: 2.2vh solid #ffe14d; border-radius: 50%; box-shadow: 0 0 0 0.8vh #1a1033, inset 0 0 0 0.8vh #1a1033;
  animation: count-ring 0.9s ease-out both;
}
#joincount .ring.hot { border-color: #ff4fa3; }
@keyframes count-slam { from { scale: 2.4; opacity: 0; rotate: -12deg; } 60% { opacity: 1; } to { scale: 1; rotate: 0deg; } }
@keyframes count-sink { to { scale: 0.85; opacity: 0.8; } }
@keyframes count-ring { from { scale: 0.5; opacity: 1; } to { scale: 1.5; opacity: 0; } }
#mark svg, #sheet .mark svg, #sheet .stars svg { display: block; width: 100%; height: 100%; overflow: visible; }
#sheet .continue {
  grid-column: 1 / -1; justify-self: center; font-size: min(4vh, 2.3vw);
  animation: continue-in 0.5s ease-out both, breathe 0.9s ease-in-out infinite alternate;
}
@keyframes continue-in { from { opacity: 0; transform: translateY(1.5vh); } }
@keyframes breathe { to { transform: scale(1.06); } }
@keyframes slap {
  from { opacity: 0; transform: scale(1.7) rotate(calc(var(--tilt) - 14deg)); }
  60% { opacity: 1; transform: scale(0.95) rotate(var(--tilt)); }
  to { opacity: 1; transform: scale(1) rotate(var(--tilt)); }
}
@media (prefers-reduced-motion: reduce) { #sheet .card, #sheet .continue, #sheet .stars .earned, #mark .big, #joincount .num, #guide .guide-close, #sheet .save { animation: none; } #joincount .ring { display: none; } }
/* The corner logo: palette-coloured letters with the ink outline. */
#logo {
  position: absolute; left: 2.2vw; top: 1.8vh; font-size: min(4.4vh, 2.6vw); line-height: 1;
  white-space: nowrap; transform-origin: 0 50%; perspective: 30vh;
}
#logo span { display: inline-block; transform-origin: 50% 60%; }
/* Beta until a live run with real teams has tuned the game. */
#logo .beta {
  margin-left: 0.5em; padding: 0.25em 0.5em 0.1em; vertical-align: 0.35em; font-size: 0.45em; border-radius: 99px;
  background: #fffbeb; color: #1a1033; -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0.15em 0 #1a1033;
}
/* Shown while the browser holds audio back, or while muted. */
#sound {
  position: absolute; right: 2vw; top: 22vh; padding: 0.5vh 1.4vh; border: 0.4vh solid #1a1033; border-radius: 99px;
  background: #fffbeb; color: #1a1033; font-size: min(2.8vh, 1.8vw); white-space: nowrap;
}
#sound[hidden] { display: none; }
/* The lobby's pointer to the setup guide. */
#help-chip {
  position: absolute; right: 2vw; bottom: 2vh; padding: 0.5vh 1.4vh; border: 0.4vh solid #1a1033; border-radius: 99px;
  background: #fffbeb; color: #1a1033; font-size: min(2.6vh, 1.6vw); white-space: nowrap; opacity: 0.85;
}
#help-chip[hidden] { display: none; }
/* The lobby's way into the settings screen, for the mouse. */
#settings-chip {
  position: absolute; left: 2vw; bottom: 2vh; padding: 0.5vh 1.4vh; border: 0.4vh solid #1a1033; border-radius: 99px;
  background: #fffbeb; color: #1a1033; font: inherit; font-size: min(2.6vh, 1.6vw); white-space: nowrap; opacity: 0.85;
  pointer-events: auto; cursor: pointer;
}
#settings-chip[hidden] { display: none; }
/* The setup guide: a side view of the room, what the camera should see, and the steps. */
#guide {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 3vh 3vw;
  background: #1a1033; overflow: auto;
}
#guide[hidden] { display: none; }
#guide .guide-card { width: min(100%, 150vh); display: grid; gap: 3vh; }
#guide h2 {
  margin: 0; font-weight: 400; font-size: 7vh; line-height: 1; color: #ffe14d;
  -webkit-text-stroke: 0.1em #1a1033; paint-order: stroke fill; text-shadow: 0 0.12em 0 #0c0719;
}
#guide .guide-art { display: flex; gap: 3vw; align-items: center; justify-content: center; }
#guide .room { flex: 2.4; min-width: 0; }
#guide .cam { flex: 1; min-width: 0; }
#guide svg { display: block; width: 100%; height: auto; }
#guide svg text { font-family: inherit; }
/* One caption at a time, in step with the animation. */
#guide .caps { display: grid; justify-items: center; }
#guide .cap { grid-area: 1 / 1; margin: 0; display: flex; gap: 1.2vw; align-items: center; font-size: min(4.2vh, 2.8vw); }
#guide .cap .n, #guide li::before {
  flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: #ffe14d; color: #1a1033; border: 0.15em solid #1a1033;
}
/* The steps as a still list, for reduced motion. */
#guide ol {
  margin: 0 auto; padding: 0; list-style: none; counter-reset: step; display: none; gap: 1.2vh;
  text-align: left; font-size: min(2.6vh, 1.8vw);
}
#guide li { counter-increment: step; display: flex; gap: 1.2vw; align-items: center; }
#guide li::before { content: counter(step); }
#guide .guide-close { margin: 0; font-size: min(2.6vh, 1.8vw); color: #b9b0d6; animation: breathe 0.9s ease-in-out infinite alternate; }
/* The lobby's nudge for someone too close to the camera. */
#nudge {
  position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; padding: 1.2vh 3vh; max-width: 86vw;
  background: #ff4fa3; color: #fffbeb; border: 0.5vh solid #1a1033; border-radius: 99px; box-shadow: 0 0.7vh 0 #1a1033;
  font-size: min(4vh, 2.6vw); white-space: nowrap; animation: nudge 0.9s ease-in-out infinite alternate;
}
#nudge[hidden] { display: none; }
#nudge strong { font-weight: 400; color: #ffe14d; margin-right: 0.4em; }
@keyframes nudge { from { transform: translateY(0); } to { transform: translateY(-1.2vh); } }
@media (prefers-reduced-motion: reduce) { #nudge { animation: none; } }
/* The settings and keys screen: switches, controls, then every shortcut. */
#keys-screen {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 3vh 3vw;
  background: #1a1033; overflow: auto;
}
#keys-screen[hidden] { display: none; }
#keys-screen .keys-card { width: min(100%, 150vh); display: grid; gap: 3vh; }
#keys-screen h2 {
  margin: 0; font-weight: 400; font-size: 7vh; line-height: 1; color: #ffe14d;
  -webkit-text-stroke: 0.1em #1a1033; paint-order: stroke fill; text-shadow: 0 0.12em 0 #0c0719;
}
#keys-screen .switches { display: flex; flex-wrap: wrap; gap: 2vw; justify-content: center; }
#keys-screen .switch {
  pointer-events: auto; cursor: pointer; font: inherit; font-size: min(3.4vh, 2.2vw); color: #1a1033; background: #a3e635;
  padding: 1vh 2.6vh; border: 0.45vh solid #1a1033; border-radius: 99px; box-shadow: 0 0.6vh 0 #0c0719;
}
#keys-screen .switch.off { background: #b9b0d6; }
#keys-screen .switch:focus-visible { outline: 0.5vh solid #fffbeb; outline-offset: 0.4vh; }
#keys-screen .switch:disabled { opacity: 0.45; cursor: default; }
#keys-screen .controls { display: flex; flex-wrap: wrap; gap: 1.5vh 4vw; justify-content: center; align-items: center; }
#keys-screen .control { display: flex; gap: 1.2vh; align-items: center; font-size: min(3vh, 2vw); color: #fffbeb; }
#keys-screen .control[hidden] { display: none; }
#keys-screen .control .name { color: #ffe14d; }
#keys-screen .control .camera { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#keys-screen .slider { pointer-events: auto; cursor: pointer; width: 20vw; accent-color: #a3e635; }
#keys-screen .step, #keys-screen .start {
  pointer-events: auto; cursor: pointer; font: inherit; font-size: min(2.8vh, 1.8vw); color: #1a1033; background: #fffbeb;
  padding: 0.6vh 1.8vh; border: 0.45vh solid #1a1033; border-radius: 99px; box-shadow: 0 0.5vh 0 #0c0719;
}
#keys-screen .start { background: #ffe14d; }
#keys-screen .step:focus-visible, #keys-screen .start:focus-visible { outline: 0.5vh solid #fffbeb; outline-offset: 0.4vh; }
#keys-screen .lists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; text-align: left; align-items: start; }
#keys-screen h3 { margin: 0 0 1vh; font-weight: 400; font-size: min(2.8vh, 1.8vw); color: #ffe14d; }
#keys-screen .row { display: grid; gap: 0.4vh; padding: 0.9vh 0; border-top: 1px solid rgba(255, 251, 235, 0.15); }
#keys-screen .keys { display: flex; flex-wrap: wrap; gap: 0.4vw; align-items: center; }
#keys-screen kbd {
  font: inherit; font-size: min(2.2vh, 1.4vw); line-height: 1; background: #fffbeb; color: #1a1033;
  padding: 0.7vh 0.8vh 0.4vh; border-radius: 0.6vh; box-shadow: 0 0.35vh 0 #b9b0d6;
}
#keys-screen .sep { color: #b9b0d6; font-size: min(2vh, 1.3vw); }
#keys-screen .does { font: 600 min(2vh, 1.3vw)/1.3 system-ui, sans-serif; color: #fffbeb; }
#keys-screen .close { margin: 0; font-size: min(2.6vh, 1.8vw); color: #b9b0d6; }
/* The summary's save button, the one clickable thing on the HUD. */
#sheet .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.5vh 3vw; justify-content: center; align-items: center; }
#sheet .save {
  pointer-events: auto; cursor: pointer;
  font: inherit; font-size: min(3vh, 1.8vw); color: #1a1033; background: #ffe14d;
  padding: 0.8vh 2.2vh; border: 0.45vh solid #1a1033; border-radius: 99px; box-shadow: 0 0.6vh 0 #1a1033;
  animation: continue-in 0.5s ease-out both;
}
#sheet .save:active { transform: translateY(0.4vh); box-shadow: 0 0.2vh 0 #1a1033; }
#sheet .save:focus-visible { outline: 0.5vh solid #fffbeb; outline-offset: 0.4vh; }
#debug { position: absolute; left: 1vw; bottom: 1vh; padding: 0.4vh 0.8vh; border-radius: 0.6vh; background: rgba(26, 16, 51, 0.7); font: 600 1.8vh ui-monospace, monospace; }
#debug:empty { display: none; }
#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 10vh 10vw; text-align: center; font: 600 3.2vh/1.4 system-ui, sans-serif;
  color: #fffbeb; background: rgba(26, 16, 51, 0.94);
}
#overlay[hidden] { display: none; }