/* Rally — the photo booth before a match (faces.js), and the face option on the online screen.
   The camera sits in a dark 4:3 box with an oval to line a face up in; beside it, the pill-shaped
   figure the player will be, wearing the result. States (data-state on the screen): starting, live, count,
   shot, nocam. */

#screen-face { width: min(880px, calc(100vw - 48px)); }
#screen-face .btn[hidden] { display: none; }
#screen-face .panel-foot .btn { margin-left: 0; }
#screen-face .panel-foot .text-btn { margin-right: auto; }

.booth {
  display: flex; align-items: center; justify-content: center; gap: 48px;
  margin: 18px 0 14px;
}

/* ------------------------------------------------------------------ camera */

.booth-cam {
  position: relative; overflow: hidden; flex: 1 1 auto;
  max-width: max(300px, calc((100vh - 400px) * 4 / 3)); aspect-ratio: 4 / 3;
  border-radius: var(--r-3);
  background: var(--arena);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}
.booth-cam video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1); /* a mirror, the way the photo is kept */
}
#screen-face:not([data-state='live']):not([data-state='count']) .booth-cam video { visibility: hidden; }

/* The photo is the oval's box only: it goes back exactly where it was taken. */
.booth-shot {
  position: absolute; left: 29%; top: 12%; width: 42%; height: 72%;
  border-radius: 50%; object-fit: cover;
  visibility: hidden;
}
#screen-face[data-state='shot'] .booth-shot { visibility: visible; }

.booth-oval { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bo-shade { fill: rgba(6, 9, 20, 0.6); transition: fill 200ms; }
.bo-ring { fill: none; stroke: var(--ball); stroke-width: 3; stroke-dasharray: 9 7; vector-effect: non-scaling-stroke; transition: stroke 200ms; }
#screen-face[data-state='shot'] .bo-shade { fill: var(--arena); }
#screen-face[data-state='shot'] .bo-ring { stroke: var(--line); stroke-dasharray: none; }
#screen-face[data-state='nocam'] .bo-ring,
#screen-face[data-state='starting'] .bo-ring { stroke: var(--hair-strong); }

.booth-count {
  position: absolute; left: 50%; top: 48%; translate: -50% -50%;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 100%;
  font-size: clamp(72px, 12vw, 132px); line-height: 1; color: var(--line);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.booth-count.tick { animation: booth-tick 600ms var(--ease-out) both; }
@keyframes booth-tick { from { opacity: 0; transform: scale(1.6) skewX(-8deg); } 30% { opacity: 1; } to { opacity: 0.85; transform: none; } }

.booth-msg {
  position: absolute; left: 50%; bottom: 7%; translate: -50% 0;
  width: max-content; max-width: 80%; margin: 0; padding: 7px 12px;
  border-radius: var(--r-1); background: rgba(6, 9, 20, 0.85);
  font-size: 13px; line-height: 1.4; text-align: center; color: var(--line-2);
}
.booth-msg:empty { display: none; }
#screen-face[data-state='nocam'] .booth-msg { color: var(--warn); }

/* The shutter: a white flash over the box. */
.booth-cam::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#screen-face.flash .booth-cam::after { animation: booth-flash 460ms ease-out; }
@keyframes booth-flash { from { opacity: 0.9; } to { opacity: 0; } }

/* ------------------------------------------------------------------ the figure */

.booth-pill { flex: none; display: grid; justify-items: center; gap: 12px; margin: 0; }
.booth-pill .label { color: var(--line-3); }
/* Proportions of pill.js: 0.48 m across, 1.62 m tall, all in the player's colour. */
.bp-pill {
  --ink: var(--p1);
  position: relative; width: 96px; aspect-ratio: 0.48 / 1.62;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: inset -12px 0 18px rgba(0, 0, 0, 0.25), inset 9px 0 14px rgba(255, 255, 255, 0.22), var(--lift-2);
}
/* The face band: centred 1.26 m up, 0.5 m tall, ~78% of the width seen face on. */
.bp-face { position: absolute; left: 11%; top: 6.8%; width: 78%; height: 30.9%; }

@media (max-width: 640px) {
  .booth { flex-direction: column; gap: 20px; }
  .booth-cam { width: 100%; }
}

/* ------------------------------------------------------------------ online: the face option */

.face-ctl { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.face-thumb { flex: none; width: 34px; height: 42px; border-radius: 999px; background: var(--arena-3); box-shadow: 0 0 0 1px var(--hair-strong); }