/* Goode Sports: the TV screen */

/* The game always plays out in 16:9, like the Wii: the biggest 16:9 picture
   that fits the screen, in the middle, with black bars round the rest. The
   3D view and everything over it (menus, HUD, pointers) live in it. */
:root {
  --sw: min(100vw, calc(100vh * 16 / 9));
  --sh: min(100vh, calc(100vw * 9 / 16));
}

html,
body {
  overflow: hidden;
  background: #000;
  user-select: none;
}

#gl,
#ui {
  position: fixed;
  left: calc((100vw - var(--sw)) / 2);
  top: calc((100vh - var(--sh)) / 2);
  width: var(--sw);
  height: var(--sh);
}

#gl {
  display: block;
}

#ui {
  pointer-events: none;
  overflow: hidden;
  font-size: clamp(9px, calc(var(--sw) * 0.012375), 22px);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: auto;
}
.screen.active {
  display: block;
  animation: screen-in 0.35s ease-out;
}
@keyframes screen-in {
  from {
    opacity: 0;
  }
}
#s-bowl {
  pointer-events: none;
}

/* a box that pops up over a screen (see ui.js: only its buttons can be picked) */
.modal:not(.open) {
  display: none;
}

/* --- Wii buttons ---------------------------------------------------------- */

.wbtn {
  appearance: none;
  position: relative;
  border: 0.18em solid #cdd3da;
  border-radius: 1.2em;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #f0f3f6 54%, #e5e9ee 100%);
  box-shadow: 0 0.2em 0 rgba(150, 160, 175, 0.5), 0 0.5em 1.2em rgba(40, 60, 90, 0.14);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.15em;
  padding: 0.7em 1.8em;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s, box-shadow 0.12s;
  /* (kept on a layer of its own, so the browser doesn't redraw it the
     moment a grow or shrink finishes, which shows as a blink) */
  will-change: transform;
}
.wbtn.focused {
  border-color: var(--blue);
  transform: scale(1.05);
  box-shadow: 0 0 0 0.25em rgba(43, 179, 234, 0.35), 0 0.2em 0 rgba(150, 160, 175, 0.5), 0 0.7em 1.6em rgba(43, 179, 234, 0.3);
}
.wbtn.pressed {
  transform: scale(0.97);
}
.wbtn:disabled {
  cursor: default;
  opacity: 0.55;
}
.wbtn.big {
  font-size: 1.6em;
  padding: 0.55em 2.4em;
  border-radius: 999px;
}

.text-link {
  appearance: none;
  border: none;
  background: none;
  color: #6c7480;
  font-weight: 700;
  font-size: 0.9em;
  text-decoration: underline;
  cursor: pointer;
}

.screen-title {
  margin: 0;
  padding: 1.2em 0 0.6em;
  text-align: center;
  font-size: 2.4em;
  font-weight: 900;
  color: #5b626c;
}
.title-icon {
  font-size: 0.9em;
}
.back-btn {
  position: absolute;
  left: 2em;
  bottom: 2em;
}

/* --- Health & safety ------------------------------------------------------- */

#s-warning {
  display: none;
  align-items: center;
  justify-content: center;
}
#s-warning.active {
  display: flex;
}
.warning {
  max-width: 46em;
  padding: 0 2em;
  text-align: center;
  color: #3e444c;
}
.warning h1 {
  font-size: 2.3em;
  font-weight: 900;
  margin: 0 0 1em;
  letter-spacing: 0.02em;
}
.warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.05em;
  background: #f0ad17;
  color: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  font-size: 0.9em;
  padding-top: 0.15em;
  vertical-align: -0.05em;
}
.warn-lead {
  font-weight: 900;
  font-size: 1.35em;
}
.warning p {
  font-size: 1.25em;
  line-height: 1.55;
  font-weight: 600;
}
.press-a {
  margin-top: 2.4em;
  font-size: 1.2em;
  font-weight: 700;
  color: #5d636c;
  animation: pulse 1.6s ease-in-out infinite;
}
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  border: 0.14em solid #a7adb5;
  background: radial-gradient(circle at 40% 30%, #fff, #dfe3e8);
  font-weight: 900;
  color: #7a8089;
  margin-right: 0.3em;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

/* --- Lobby ----------------------------------------------------------------- */

.lobby-logo {
  position: absolute;
  left: 1.4em;
  top: 1.15em; /* (under the Goode Menu button, up in the corner) */
  font-size: 4.4em;
  filter: drop-shadow(0 0.05em 0 #fff) drop-shadow(0 0.08em 0.15em rgba(40, 60, 90, 0.2));
}
.join-card {
  position: absolute;
  right: 2em;
  top: 1.6em;
  width: 15em;
  padding: 1.1em 1.2em 1em;
  background: rgba(255, 255, 255, 0.96);
  border: 0.18em solid #dfe4ea;
  border-radius: 1.4em;
  box-shadow: var(--shadow);
  text-align: center;
}
.join-title {
  font-weight: 900;
  font-size: 1.25em;
  margin-bottom: 0.5em;
}
.qr {
  width: 11em;
  height: 11em;
  image-rendering: pixelated;
  border-radius: 0.6em;
  background: #fff;
}
.join-url {
  margin-top: 0.4em;
  font-weight: 800;
  font-size: 0.82em;
  color: var(--blue-deep);
  word-break: break-all;
}
.join-code-label {
  margin-top: 0.7em;
  font-size: 0.8em;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.join-code {
  font-size: 2.6em;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #3b4049;
}
.join-note {
  font-size: 0.72em;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}
.join-note:empty {
  display: none;
}

.plates {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plate {
  position: absolute;
  transform: translate(-50%, 0);
  min-width: 8.5em;
  padding: 0.35em 0.9em 0.4em;
  border-radius: 999px;
  background: #fff;
  border: 0.18em solid var(--pc);
  box-shadow: 0 0.3em 0.9em rgba(40, 60, 90, 0.18);
  text-align: center;
  font-weight: 900;
  font-size: 1.15em;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.plate .pnum {
  display: inline-block;
  min-width: 1.9em;
  margin-right: 0.35em;
  padding: 0.05em 0.35em;
  border-radius: 0.5em;
  background: var(--pc);
  color: #fff;
  font-size: 0.8em;
}
.plate.empty {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  color: #7d848d;
  font-weight: 700;
  font-size: 0.95em;
}
.plate.offline {
  opacity: 0.55;
}
.plate .sub {
  display: block;
  font-size: 0.65em;
  font-weight: 700;
  color: var(--muted);
}
.lobby-actions {
  position: absolute;
  right: 2em;
  bottom: 3.4em;
  width: 15em;
  display: flex;
  justify-content: center;
}
.lobby-actions .wbtn {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#btn-keyboard {
  position: absolute;
  right: 2em;
  bottom: 1.4em;
}
/* back to the Goode Menu: up in the top left corner, over the logo */
#btn-lobby-back {
  top: 1.9%;
  bottom: auto;
  left: 1.6%;
  font-size: 0.9em;
  padding: 0.45em 1.3em;
}

/* --- Sports ---------------------------------------------------------------- */

.sport-grid {
  display: flex;
  justify-content: center;
  gap: 1.6em;
  flex-wrap: wrap;
  padding: 2em 4em;
}
.wbtn.sport {
  width: 11em;
  height: 12.5em;
  border-radius: 1.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0;
}
.sport-icon {
  font-size: 4.6em;
  line-height: 1;
  filter: drop-shadow(0 0.06em 0.06em rgba(0, 0, 0, 0.18));
}
.sport-name {
  font-size: 1.3em;
  font-weight: 900;
}
.soon {
  font-size: 0.7em;
  font-weight: 800;
  color: #fff;
  background: #a6adb6;
  border-radius: 999px;
  padding: 0.15em 0.8em;
}
.wbtn.sport.locked .sport-icon {
  filter: grayscale(1) opacity(0.5);
}
#sport-bowling {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #eaf7fe 54%, #d6effb 100%);
}

/* --- Bowling setup --------------------------------------------------------- */

.setup-players {
  display: flex;
  justify-content: center;
  gap: 1.2em;
  margin-bottom: 1.6em;
}
.setup-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
}
.setup-player img {
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  background: #fff;
  border: 0.2em solid var(--pc);
  box-shadow: var(--shadow);
}
.setup-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.wbtn.option {
  width: 22em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3em;
  border-radius: 999px;
}
.wbtn.option small {
  color: var(--muted);
  font-weight: 700;
}

/* --- Bowling HUD ----------------------------------------------------------- */

.scoreboard {
  position: absolute;
  top: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: 0.86em;
}
.sb-row {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 0.8em;
  border: 0.16em solid #d8dee5;
  overflow: hidden;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.18);
  transition: border-color 0.2s, transform 0.2s;
}
.sb-row.current {
  border-color: var(--pc);
  transform: scale(1.03);
}
.sb-who {
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: 8.2em;
  padding: 0 0.5em 0 0.2em;
  font-weight: 900;
  background: var(--pc);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.sb-who img {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.sb-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-frame {
  width: 3.3em;
  border-left: 0.1em solid #e1e6eb;
  display: flex;
  flex-direction: column;
}
.sb-frame.last {
  width: 4.4em;
}
.sb-frame.now {
  background: #eaf7fe;
}
.sb-num {
  font-size: 0.7em;
  text-align: center;
  color: #9aa1aa;
  font-weight: 800;
  line-height: 1.4;
}
.sb-balls {
  display: flex;
  justify-content: flex-end;
}
.sb-ball {
  width: 1.45em;
  height: 1.35em;
  text-align: center;
  font-weight: 900;
  font-size: 0.95em;
  line-height: 1.35em;
  border-left: 0.08em solid #e8ecf0;
  border-bottom: 0.08em solid #e8ecf0;
}
.sb-ball.mark-x {
  color: #e8473f;
}
.sb-ball.mark-sp {
  color: var(--blue-deep);
}
.sb-total {
  text-align: center;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1.6;
  min-height: 1.6em;
}
.sb-sum {
  width: 3.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.4em;
  border-left: 0.1em solid #e1e6eb;
}

.frame-banner {
  position: absolute;
  left: 0;
  top: 42%;
  padding: 0.5em 2.4em 0.5em 1.6em;
  background: var(--pc, var(--blue));
  color: #fff;
  font-weight: 900;
  font-size: 2.2em;
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.25);
  text-shadow: 0 0.06em 0.06em rgba(0, 0, 0, 0.25);
  transform: translateX(-110%);
  transition: transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.frame-banner.show {
  transform: translateX(0);
}
.frame-banner img {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.frame-banner small {
  display: block;
  font-size: 0.5em;
  opacity: 0.9;
}

.result-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: 7em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  color: #fff;
  -webkit-text-stroke: 0.04em #1f6fb0;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #1f6fb0, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
.result-text small {
  display: block;
  font-size: 0.32em;
  font-style: normal;
  -webkit-text-stroke: 0.06em #1f6fb0;
}
.result-text.show {
  animation: result-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.result-text.hide {
  animation: result-out 0.3s ease-in forwards;
}
.result-text.strike {
  color: #ffd21f;
  -webkit-text-stroke-color: #c0392b;
  text-shadow: 0 0.06em 0 #c0392b, 0 0.12em 0.3em rgba(0, 0, 0, 0.35);
}
.result-text.gutter {
  color: #e3e7ec;
  -webkit-text-stroke-color: #5b636d;
  text-shadow: 0 0.06em 0 #5b636d;
}
@keyframes result-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-6deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
}
@keyframes result-out {
  from {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
  to {
    opacity: 0;
    transform: scale(1.3) rotate(-3deg);
  }
}

.hud-hint {
  position: absolute;
  left: 1.4em;
  bottom: 1.4em;
  padding: 0.6em 1.2em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.94);
  font-weight: 800;
  font-size: 1.05em;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 1.2em;
  align-items: center;
  transition: opacity 0.25s;
}
.hud-hint:empty {
  opacity: 0;
}
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.3em;
  margin-right: 0.3em;
  border-radius: 0.8em;
  background: #e9edf1;
  border: 0.1em solid #c4cad1;
  font-weight: 900;
  color: #6b717a;
}
.key.round {
  border-radius: 50%;
}
.hud-speed {
  position: absolute;
  right: 1.6em;
  bottom: 1.2em;
  font-size: 2.6em;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: 0.05em #1f6fb0;
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 #1f6fb0;
  opacity: 0;
  transition: opacity 0.3s;
}
.hud-speed small {
  font-size: 0.5em;
}
.hud-speed.show {
  opacity: 1;
}
.hud-waiting {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  padding: 0.7em 1.6em;
  border-radius: 1em;
  background: rgba(30, 40, 55, 0.8);
  color: #fff;
  font-weight: 800;
  font-size: 1.2em;
}
.hud-waiting:empty {
  display: none;
}

/* --- Results --------------------------------------------------------------- */

#s-results {
  pointer-events: auto;
}
.results-card {
  position: absolute;
  right: 3em;
  top: 50%;
  transform: translateY(-50%);
  width: 26em;
  padding: 1.4em 1.6em 1.6em;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.6em;
  border: 0.2em solid #dfe4ea;
  box-shadow: var(--shadow);
}
.results-title {
  margin: 0 0 0.6em;
  text-align: center;
  font-size: 2.1em;
  font-weight: 900;
}
.results-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.res-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.4em 0.8em 0.4em 0.4em;
  border-radius: 999px;
  background: #f3f6f9;
  border: 0.15em solid #e2e7ec;
  font-weight: 900;
  font-size: 1.15em;
}
.res-row.first {
  background: #fff7d6;
  border-color: #f0c419;
}
.res-rank {
  width: 2em;
  text-align: center;
  font-size: 1.1em;
  color: #9aa1aa;
}
.res-row.first .res-rank {
  color: #d39a00;
}
.res-row img {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: #fff;
  border: 0.15em solid var(--pc);
}
.res-name {
  flex: 1;
}
.res-score {
  font-size: 1.4em;
}
.results-actions {
  margin-top: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

/* --- HOME menu ------------------------------------------------------------- */

.home-menu {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: rgba(20, 30, 45, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: screen-in 0.2s ease-out;
}
.home-menu[hidden] {
  display: none;
}
.home-top,
.home-bottom {
  background: linear-gradient(180deg, #f6f8fa, #dfe5ea);
  padding: 1em 2em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 900;
  font-size: 1.5em;
  color: #59606a;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.2);
}
.home-icon {
  color: var(--blue);
}
.home-close {
  margin-left: auto;
  font-size: 0.7em;
}
.home-mid {
  display: flex;
  justify-content: center;
  gap: 2em;
}
.home-bottom {
  justify-content: center;
  gap: 2.4em;
  font-size: 1.1em;
}
.home-remote {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.home-remote i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #c1c7ce;
}
.home-remote.on i {
  background: #39b54f;
  box-shadow: 0 0 0.4em #39b54f;
}

/* --- Cursors, toasts, fades -------------------------------------------------- */

.cursors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.4em;
  height: 3.4em;
  margin: -0.32em 0 0 -1.17em; /* fingertip is the hotspot */
  opacity: 0;
  transition: opacity 0.25s;
  filter: drop-shadow(0 0.15em 0.2em rgba(0, 0, 0, 0.35));
}
.cursor.show {
  opacity: 1;
}
.cursor.press svg {
  transform: scale(0.9) rotate(-6deg);
}
.cursor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.08s;
}
/* open hand by default, pointing finger over a button, fist while gripping */
.cursor .hand-point,
.cursor .hand-grip,
.cursor.over .hand-open,
.cursor.grip .hand-open,
.cursor.grip .hand-point {
  display: none;
}
.cursor.over .hand-point,
.cursor.grip .hand-grip {
  display: block;
}

.toasts {
  position: absolute;
  top: 1em;
  left: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  z-index: 25;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 1.2em 0.45em 0.45em;
  border-radius: 999px;
  background: #fff;
  border: 0.16em solid var(--pc, var(--line));
  box-shadow: var(--shadow);
  font-weight: 800;
  animation: toast-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.toast img {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: #e9f6fd;
}
.toast.out {
  animation: toast-out 0.3s ease-in forwards;
}
body[data-screen='s-lobby'] .toasts {
  top: 10em;
}
@keyframes toast-in {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
}
@keyframes toast-out {
  to {
    transform: translateX(-60%);
    opacity: 0;
  }
}

.fade {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 40;
}
.fade.on {
  opacity: 1;
}

/* --- Big pre-bowl scorecard (Wii style) ----------------------------------- */

.bigboard {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  width: min(calc(var(--sw) * 0.94), 64em);
  transform: translate(-50%, 130%);
  transition: transform 0.45s cubic-bezier(0.2, 1.15, 0.35, 1);
  font-size: 1.05em;
  pointer-events: none;
}
.bigboard.show {
  transform: translate(-50%, 0);
}
.bb-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.35em 0.2em;
  font-weight: 900;
  font-size: 1.3em;
  color: #fff;
  text-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.55);
}
.bb-title b {
  font-size: 0.8em;
  padding: 0.15em 0.8em;
  border-radius: 999px;
  background: var(--pc);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.bb-grid {
  display: grid;
  border: 0.16em solid #c9d0d8;
  background: #c9d0d8;
  gap: 0.12em;
  box-shadow: 0 0.4em 1.4em rgba(0, 0, 0, 0.45);
}
.bb-head {
  background: linear-gradient(180deg, #2f6fe0, #1846b4);
  color: #fff;
  font-weight: 900;
  text-align: center;
  font-size: 1.15em;
  line-height: 1.5;
}
.bb-corner {
  background: #1d2430;
}
.bb-face {
  background: var(--pc);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em;
}
.bb-face img {
  width: 2.7em;
  height: 2.7em;
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.85);
}
.bb-face.now {
  box-shadow: inset 0 0 0 0.18em #fff;
}
.bb-frame {
  background: #20242b;
  display: flex;
  flex-direction: column;
  min-height: 3.3em;
}
.bb-frame.empty {
  background: #14171c;
}
.bb-frame.now {
  box-shadow: inset 0 0 0 0.2em #ffd21f;
}
.bb-marks {
  display: flex;
  justify-content: flex-end;
  height: 1.45em;
}
.bb-m {
  width: 1.45em;
  height: 1.45em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0.1em solid #4a515c;
  border-bottom: 0.1em solid #4a515c;
  color: #fff;
  font-weight: 800;
  font-size: 0.95em;
}
.bb-m svg {
  width: 80%;
  height: 80%;
}
.bb-marks.strike .bb-m {
  width: 100%;
  border-left: none;
  justify-content: flex-start;
  padding-left: 0.3em;
}
.bb-marks.strike .bb-m svg {
  width: 2.4em;
  height: 1.2em;
}
.bb-total {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.35em;
}
.bigboard.hundred .bb-m {
  width: 1.9em;
  font-size: 0.8em;
}
.bigboard.hundred .bb-total {
  font-size: 1.15em;
}

/* the small in-game scoreboard needs room for two-digit pin counts */
.scoreboard.hundred .sb-frame {
  width: 4.2em;
}
.scoreboard.hundred .sb-frame.last {
  width: 5.6em;
}
.scoreboard.hundred .sb-ball {
  width: 1.85em;
  font-size: 0.85em;
}
.scoreboard.hundred .sb-sum {
  width: 4.4em;
}
.wbtn.option.hundred,
.wbtn.option.practice {
  background: linear-gradient(180deg, #fff9e6 0%, #fff9e6 46%, #ffefc2 54%, #ffe39a 100%);
}
/* a line under a setup screen's options (boxing: about the phone camera) */
.setup-note {
  margin: 1.1em 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.05em;
  color: #6b7a8a;
}

/* --- Tennis ------------------------------------------------------------------ */

#s-tennis {
  pointer-events: none;
}

.tennis-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6em;
  margin: 0.4em 0 1.2em;
}
.tennis-teams .t-vs {
  font-size: 1.6em;
}
.tennis-mode {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  margin-bottom: 1.2em;
}
.tennis-mode[hidden] {
  display: none;
}
.wbtn.chip {
  font-size: 0.95em;
  padding: 0.5em 1.2em;
}
.wbtn.chip.on {
  background: linear-gradient(#57c5ff, #1f8fd8);
  color: #fff;
  border-color: #1572b3;
}
/* the bowling ball's weight, on the bowling setup */
.ball-weights {
  align-items: center;
}
.ball-weights .ball-label {
  font-weight: 800;
  color: #4a5a6a;
  margin-right: 0.2em;
}

/* scoreboard: top left */
.t-board {
  position: absolute;
  top: 0.9em;
  left: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 0.95em;
  filter: drop-shadow(0 0.18em 0.35em rgba(0, 0, 0, 0.22));
}
.t-board:empty {
  display: none;
}
.t-board-head {
  display: grid;
  grid-template-columns: 1fr 3.6em 3.6em;
  font-weight: 900;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  padding: 0 0.5em;
}
.t-board-head .t-col {
  text-align: center;
}
.t-row {
  display: grid;
  grid-template-columns: 1.6em auto 1fr 3.6em 3.6em;
  align-items: center;
  min-width: 22em;
  background: linear-gradient(#ffffff, #f1f5f8);
  border-radius: 0.9em;
  border: 0.16em solid #fff;
  border-left: 0.5em solid var(--tc);
  overflow: hidden;
  font-weight: 900;
  transition: border-color 0.3s;
}
.t-row.won {
  border-color: #ffd21f;
  border-left-color: var(--tc);
}
.t-serve {
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.45em;
  border-radius: 50%;
  background: transparent;
}
.t-serve.on {
  background: radial-gradient(circle at 35% 35%, #f7ffb0, #c8e02c 60%, #9bb21d);
  box-shadow: 0 0 0.35em rgba(200, 224, 44, 0.9);
  animation: t-serve-bob 1.1s ease-in-out infinite;
}
@keyframes t-serve-bob {
  0%,
  100% {
    transform: translateY(0.12em);
  }
  50% {
    transform: translateY(-0.18em);
  }
}
.t-faces {
  display: flex;
  padding: 0.15em 0.3em;
}
.t-faces img {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #eef3f8;
  margin-left: -0.35em;
  border: 0.12em solid #fff;
}
.t-faces img:first-child {
  margin-left: 0;
}
.t-name {
  padding: 0 0.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11em;
}
.t-games,
.t-points {
  text-align: center;
  font-size: 1.35em;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-games {
  background: #e8eef4;
}
.t-points {
  background: var(--tc);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.t-games.bump,
.t-points.bump {
  animation: t-bump 0.45s cubic-bezier(0.2, 1.8, 0.4, 1);
}
@keyframes t-bump {
  0% {
    transform: scale(1.7);
  }
  100% {
    transform: scale(1);
  }
}

/* the umpire's calls */
.t-call {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: 5.6em;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 0.04em #1f6fb0;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #1f6fb0, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
.t-call small {
  display: block;
  font-size: 0.4em;
  margin-top: 0.15em;
}
.t-call.show {
  animation: result-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.t-call.fault,
.t-call.out {
  color: #fff4d6;
  -webkit-text-stroke-color: #c0392b;
  text-shadow: 0 0.06em 0 #c0392b, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
}
.t-call.game,
.t-call.match,
.t-call.power {
  color: #ffd21f;
  -webkit-text-stroke-color: #c0392b;
  text-shadow: 0 0.06em 0 #c0392b, 0 0.12em 0.3em rgba(0, 0, 0, 0.35);
}
.t-call.power {
  font-size: 4.4em;
  top: 22%;
}

.t-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  transform: translateX(-50%);
  padding: 0.6em 1.4em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.94);
  font-weight: 800;
  font-size: 1.1em;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.t-hint.show {
  opacity: 1;
}

/* "this team VS that team" before the first serve */
.t-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.t-intro.show {
  opacity: 1;
  transform: none;
}
.t-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: 1em 1.6em;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.2em;
  border-bottom: 0.4em solid var(--tc);
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.25);
  font-weight: 900;
}
.t-faces.big img {
  width: 5em;
  height: 5em;
}
.t-team-name {
  font-size: 1.3em;
}
.t-team-who {
  color: var(--tc);
}
.t-team-level {
  margin-top: 0.2em;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: #fff4cc;
  color: #a06c00;
  font-size: 0.85em;
}
.t-vs {
  font-size: 3em;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: 0.05em #c0392b;
  paint-order: stroke fill;
}
.tennis-teams .t-vs {
  color: #e8473f;
  -webkit-text-stroke-color: #ffffff;
  text-shadow: 0 0.06em 0.12em rgba(0, 0, 0, 0.2);
}
/* "Too early!" / "Too late!" after a missed swing */
.t-flash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  text-align: center;
  font-size: 2.4em;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: 0.05em #e8473f;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
.t-flash.show {
  animation: result-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

/* skill level changes under the results */
.results-note {
  margin-top: 0.9em;
  padding: 0.5em 0.9em;
  border-radius: 0.8em;
  background: #fff7d6;
  color: #8a6200;
  font-weight: 800;
  font-size: 0.95em;
  text-align: center;
}
.results-note[hidden] {
  display: none;
}

/* --- Baseball ------------------------------------------------------------------ */

#s-baseball {
  pointer-events: none;
}

/* the inning and the score: top right, the Wii's way */
.bb-board {
  position: absolute;
  top: 0.8em;
  right: 0.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35em 1em 0.55em 2.3em;
  background: linear-gradient(180deg, rgba(24, 28, 34, 0.86), rgba(10, 12, 16, 0.8));
  clip-path: polygon(1.7em 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0.55em 0.55em 0;
  color: #fff;
  font-weight: 900;
}
.bb-board:empty {
  display: none;
}
.bb-inn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4em;
  align-self: stretch;
  padding: 0 0.5em 0.15em;
  border-bottom: 0.13em solid #ff9a1a;
}
.bb-inn b {
  font-size: 1.55em;
  letter-spacing: 0.05em;
}
.bb-tri {
  width: 0;
  height: 0;
  border-left: 0.45em solid transparent;
  border-right: 0.45em solid transparent;
  border-top: 0.62em solid rgba(255, 255, 255, 0.28);
}
.bb-tri.on {
  border-top-color: #ff9a1a;
}
.bb-line {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.35em;
}
.bb-faces {
  display: flex;
}
.bb-faces img {
  width: 2.7em;
  height: 2.7em;
  border-radius: 0.5em;
  background: #eef3f8;
  border: 0.16em solid var(--tc);
}
.bb-faces img + img {
  margin-left: -0.9em;
}
.bb-faces.won img {
  box-shadow: 0 0 0.6em #ffd23a;
}
.bb-runs {
  min-width: 1.1em;
  font-size: 2.4em;
  line-height: 1;
  text-align: center;
}
.bb-dash {
  font-size: 1.9em;
  line-height: 1;
  opacity: 0.85;
}

/* the count and the bases: top left */
.bb-count {
  position: absolute;
  top: 0.8em;
  left: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.5em 2.4em 0.55em 0.95em;
  background: linear-gradient(180deg, rgba(24, 28, 34, 0.86), rgba(10, 12, 16, 0.8));
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.7em) 100%, 0 100%);
  border-radius: 0.55em 0 0 0.55em;
  color: #fff;
  font-weight: 900;
}
.bb-count:empty {
  display: none;
}
.bb-dots {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.bb-dotrow {
  display: flex;
  align-items: center;
  gap: 0.34em;
}
.bb-dotrow b {
  width: 1.05em;
  font-size: 1.4em;
  line-height: 1;
}
.bb-dotrow i {
  width: 0.98em;
  height: 0.98em;
  border-radius: 50%;
  border: 0.14em solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}
.bb-dotrow i.on {
  border-color: #fff4b8;
  background: radial-gradient(circle at 35% 30%, #fff8cc, #ffd23a 55%, #e09a00);
}
.bb-diamond {
  position: relative;
  width: 3.6em;
  height: 3.2em;
}
.bb-diamond i {
  position: absolute;
  width: 1.05em;
  height: 1.05em;
  background: rgba(255, 255, 255, 0.12);
  border: 0.14em solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  transition: background 0.2s, box-shadow 0.2s;
}
.bb-diamond .b1 {
  right: 0.2em;
  top: 1.3em;
}
.bb-diamond .b2 {
  left: 1.15em;
  top: 0.1em;
}
.bb-diamond .b3 {
  left: 0.2em;
  top: 1.3em;
}
.bb-diamond i.on {
  background: #ff9a1a;
  border-color: #fff;
  box-shadow: 0 0 0.45em #ff9a1a;
}

/* who's up: a name plate at the bottom as they step in, like the Wii's */
.bb-batter {
  position: absolute;
  left: 50%;
  bottom: 5.6em;
  display: flex;
  align-items: stretch;
  height: 3.3em;
  font-weight: 900;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 0.8em);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  filter: drop-shadow(0 0.2em 0.5em rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.bb-batter.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.bb-order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  padding-right: 0.4em;
  font-size: 1.7em;
  background: linear-gradient(180deg, #3aa0f0, #1767c8);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55em) 100%, 0 100%);
  border-radius: 0.3em 0 0 0.3em;
}
.bb-name {
  display: flex;
  align-items: center;
  min-width: 8em;
  margin-left: -0.6em;
  padding: 0 1.8em 0 1.4em;
  font-size: 1.45em;
  background: rgba(16, 18, 22, 0.92);
  clip-path: polygon(0.5em 0, 100% 0, calc(100% - 0.5em) 100%, 0 100%);
  border-bottom: 0.14em solid #3aa0f0;
}
.bb-who {
  display: flex;
  align-items: center;
  margin-left: -0.4em;
  padding: 0 0.9em;
  font-size: 0.95em;
  background: var(--tc);
  clip-path: polygon(0.45em 0, 100% 0, calc(100% - 0.45em) 100%, 0 100%);
}
.bb-ups {
  display: flex;
  align-items: center;
  gap: 0.28em;
  margin-left: -0.3em;
  padding: 0 0.9em 0 1em;
  background: rgba(16, 18, 22, 0.92);
  clip-path: polygon(0.45em 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0.3em 0.3em 0;
  border-bottom: 0.18em solid #3aa0f0;
}
.bb-ups i {
  width: 0.8em;
  height: 0.8em;
  background: rgba(255, 255, 255, 0.28);
}
.bb-ups i.done {
  background: rgba(255, 255, 255, 0.7);
}
.bb-ups i.now {
  background: #3ad7e8;
  box-shadow: 0 0 0.35em #3ad7e8;
}

/* the pitch speed: bottom right */
.bb-speed {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
  padding: 0.35em 1.1em 0.45em;
  border-radius: 1em;
  background: rgba(16, 36, 64, 0.86);
  color: #fff;
  font-weight: 900;
  text-align: right;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.25s, transform 0.3s;
}
.bb-speed.show {
  opacity: 1;
  transform: none;
}
.bb-speed small {
  display: block;
  font-size: 0.75em;
  color: #9fc9f0;
}
.bb-speed b {
  font-size: 2.3em;
  font-style: italic;
  line-height: 1;
}
.bb-speed span {
  margin-left: 0.25em;
  font-size: 0.9em;
}

/* the pitch a human pitcher has lined up */
.bb-pitch {
  position: absolute;
  left: 50%;
  bottom: 5em;
  transform: translateX(-50%);
  padding: 0.45em 1.3em;
  border-radius: 999px;
  background: rgba(16, 36, 64, 0.88);
  color: #ffd21f;
  font-weight: 900;
  font-size: 1.15em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}
.bb-pitch.show {
  opacity: 1;
}

/* the umpire's calls: big and orange, the Wii's way */
.t-call.bb-call {
  top: 29%;
  font-size: 6.2em;
  font-style: normal;
  letter-spacing: 0.01em;
  color: transparent;
  background: linear-gradient(180deg, #fff6b0 0%, #ffd23a 36%, #ff9a1a 64%, #ff6a0a 100%) 0 0 / 100% 1.08em no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.045em #4a2200;
  text-shadow: none;
  filter: drop-shadow(0 0.05em 0 #4a2200) drop-shadow(0 0.12em 0.25em rgba(0, 0, 0, 0.35));
}
.t-call.bb-call.show {
  animation: bb-call-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.t-call.bb-call small {
  font-size: 0.36em;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.09em #4a2200;
  paint-order: stroke fill;
}
.t-call.bb-call.ball {
  font-size: 5em;
}
.t-call.bb-call.power {
  top: 21%;
  font-size: 7.2em;
}
@keyframes bb-call-pop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* batting practice: the stats, the last swing and the phone's link, top right */
#s-baseball.practice .bb-board,
#s-baseball.practice .bb-count {
  display: none;
}
.bb-practice {
  position: absolute;
  top: 0.9em;
  right: 1em;
  width: 21em;
  padding: 0.8em 1em 0.9em;
  border-radius: 0.7em;
  background: linear-gradient(180deg, rgba(24, 28, 34, 0.88), rgba(10, 12, 16, 0.82));
  color: #fff;
  font-weight: 800;
  filter: drop-shadow(0 0.18em 0.35em rgba(0, 0, 0, 0.22));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.bb-practice.show {
  opacity: 1;
}
.bp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
}
.bp-head b {
  font-size: 1.25em;
  font-style: italic;
  color: #ffd21f;
}
.bp-head span {
  color: #9fc9f0;
}
.bp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4em;
  margin: 0.55em 0 0.45em;
  text-align: center;
}
.bp-stat b {
  display: block;
  font-size: 1.45em;
  line-height: 1.1;
  white-space: nowrap;
}
.bp-stat small {
  font-size: 0.68em;
  color: #9fc9f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bp-last {
  padding: 0.4em 0.6em;
  border-radius: 0.6em;
  background: rgba(255, 255, 255, 0.1);
  line-height: 1.3;
}
.bp-paused {
  margin-top: 0.45em;
  color: #ffd21f;
}
.bp-link {
  margin-top: 0.45em;
  font-size: 0.78em;
  font-weight: 700;
  color: #cfe3f5;
  line-height: 1.35;
}
.bp-keys {
  margin-top: 0.5em;
  font-size: 0.74em;
  font-weight: 700;
  color: #9fc9f0;
}

.bb-team-role {
  margin-top: 0.1em;
  font-size: 0.8em;
  color: #6b7785;
}

@media (max-width: 900px) {
  .bb-count,
  .bb-board,
  .bb-practice {
    font-size: 0.8em;
  }
  .bb-batter,
  .bb-speed {
    font-size: 0.8em;
  }
}

/* --- Golf ---------------------------------------------------------------------- */

#s-golf {
  pointer-events: none;
}
.golf-options .wbtn.option.nine {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #effbe6 54%, #ddf3cf 100%);
}

/* the power gauge, up the left */
.g-gauge {
  position: absolute;
  left: 0.8em;
  top: 16%;
  height: 60%;
  aspect-ratio: 90 / 400;
  opacity: 0;
  transform: translateX(-1.5em);
  transition: opacity 0.3s, transform 0.35s;
  filter: drop-shadow(0 0.15em 0.3em rgba(0, 0, 0, 0.35));
}
.g-gauge-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.g-hook,
.g-hook-bed {
  transition: opacity 0.15s;
}
#s-golf.aiming .g-gauge,
#s-golf.flying .g-gauge {
  opacity: 1;
  transform: none;
}

/* the club, bottom left, with the ✚ beside it */
.g-club {
  position: absolute;
  left: 1.2em;
  bottom: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 1em 0.35em 0.5em;
  border-radius: 1.4em;
  background: linear-gradient(#ffffff, #eef2f6);
  border: 0.16em solid #fff;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
#s-golf.aiming .g-club {
  opacity: 1;
}
.g-dpad {
  position: relative;
  width: 1.8em;
  height: 1.8em;
}
.g-dpad i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.6em;
  height: 1.8em;
  border-radius: 0.15em;
  background: #59616c;
  transform: translate(-50%, -50%);
}
.g-dpad i + i {
  width: 1.8em;
  height: 0.6em;
}
.g-club-icon svg {
  display: block;
  width: 2.6em;
  height: 3.2em;
  filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.35));
}
.g-club-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.g-club-name b {
  font-size: 1.5em;
  font-weight: 900;
  color: #2f3742;
}
.g-club-name small {
  font-size: 0.9em;
  font-weight: 800;
  color: #6b7785;
}

/* yards left and the wind, top right */
.g-top {
  position: absolute;
  right: 1.2em;
  top: 0.9em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;
  opacity: 0;
  transition: opacity 0.3s;
}
#s-golf.aiming .g-top {
  opacity: 1;
}
.g-left {
  font-size: 1.5em;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.06em #253445;
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.35);
}
.g-left b {
  font-size: 1.5em;
}
.g-wind {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.8em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25);
  font-weight: 900;
  color: #2f3742;
}
#s-golf.putting .g-wind {
  display: none;
}
.g-mph b {
  font-size: 1.5em;
}
.g-wlabel {
  font-size: 0.8em;
  color: #6b7785;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.g-tile {
  position: relative;
  width: 2.6em;
  height: 2.6em;
  perspective: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-tile::before {
  content: "";
  position: absolute;
  inset: 0.2em;
  border-radius: 0.4em;
  background: repeating-linear-gradient(90deg, #7fc84a 0 0.45em, #6db636 0.45em 0.9em);
  transform: rotateX(52deg);
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
}
.g-tile i {
  position: relative;
  font-style: normal;
  font-size: 1.9em;
  line-height: 1;
  text-shadow: 0 0 0.12em #fff, 0 0 0.12em #fff;
}
.g-wind.calm .g-tile i {
  opacity: 0;
}

/* the hole from above, bottom right */
.g-mapbox {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
  width: 9.4em;
  height: 14.4em;
  border-radius: 0.8em;
  border: 0.22em solid rgba(255, 255, 255, 0.92);
  overflow: hidden;
  box-shadow: 0 0.25em 0.8em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s;
}
#s-golf.aiming .g-mapbox,
#s-golf.flying .g-mapbox {
  opacity: 0.93;
}
.g-map {
  display: block;
  width: 100%;
  height: 100%;
}

/* whose shot, top left */
.g-who {
  position: absolute;
  left: 4.6em;
  top: 0.9em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.9em 0.25em 0.3em;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #eef2f6);
  border-left: 0.45em solid var(--pc);
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.25);
  font-weight: 900;
  opacity: 0;
  transform: translateY(-0.6em);
  transition: opacity 0.3s, transform 0.3s;
}
.g-who.show {
  opacity: 1;
  transform: none;
}
.g-who img {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: #eef3f8;
}
.g-who-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.g-who-txt span {
  font-size: 0.75em;
  color: #6b7785;
}
.g-who em {
  font-style: normal;
  font-size: 1.3em;
  color: var(--pc);
  margin-left: 0.3em;
}

/* over the cup, putting: what holing it would make */
.g-cuptag {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 0.15em 0.6em;
  border-radius: 0.6em;
  background: rgba(255, 255, 255, 0.92);
  border: 0.14em solid #e8352b;
  font-weight: 900;
  font-size: 1.2em;
  color: #c0392b;
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s;
}
.g-cuptag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.55em;
  border: 0.3em solid transparent;
  border-top-color: #e8352b;
  transform: translateX(-50%);
}
.g-cuptag.show {
  opacity: 1;
}

/* practice swings (2): a badge under the player's name */
.g-practice {
  position: absolute;
  left: 4.6em;
  top: 4.1em;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 1em 0.3em 0.35em;
  border-radius: 999px;
  background: linear-gradient(#ffb547, #f08a12);
  border: 0.14em solid #fff;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.3);
  color: #fff;
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: 0.02em;
  text-shadow: 0 0.06em 0.14em rgba(120, 50, 0, 0.45);
  opacity: 0;
  transform: translateY(-0.4em);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#s-golf.aiming .g-practice.show {
  opacity: 1;
  transform: none;
}
.g-practice .key {
  text-shadow: none;
}
.g-hint .hot {
  color: #f08a12;
}

/* the green's slope: high and low */
.g-legend {
  position: absolute;
  right: 11.6em;
  bottom: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding: 0.4em 0.6em;
  border-radius: 0.8em;
  background: rgba(255, 255, 255, 0.9);
  font-weight: 900;
  font-size: 0.85em;
  color: #2f3742;
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s;
}
.g-legend.show {
  opacity: 1;
}
.g-legend i {
  width: 1.2em;
  height: 6em;
  border-radius: 0.3em;
  background: linear-gradient(#cde98a, #1d4a12);
  border: 0.1em solid #9aa4ae;
}

/* where it ended up: "Rough / 136 yards to go" */
.g-lie {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, 0.6em);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.06em #1f4f86;
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
  white-space: nowrap;
}
.g-lie.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.g-lie b {
  font-size: 3.4em;
  font-style: italic;
  line-height: 1.05;
}
.g-lie i {
  display: block;
  width: 110%;
  height: 0.22em;
  margin: 0.2em 0 0.3em;
  border-radius: 0.1em;
  background: linear-gradient(90deg, transparent, #ffffff 20%, #ffffff 80%, transparent);
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.3);
}
.g-lie span {
  font-size: 1.9em;
}
.g-lie small {
  margin-top: 0.3em;
  font-size: 1.2em;
  color: #ffe0d8;
  -webkit-text-stroke-color: #a8281f;
}

/* the big calls */
.g-call {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: 5.4em;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 0.04em #1f6fb0;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #1f6fb0, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
.g-call small {
  display: block;
  font-size: 0.5em;
  margin-bottom: 0.05em;
  color: #ffe866;
  -webkit-text-stroke-color: #b5651d;
  text-shadow: 0 0.06em 0 #b5651d;
}
.g-call.show {
  animation: result-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.g-call.nice {
  top: 20%;
  font-size: 4.2em;
}
.g-call.great {
  color: #ffd21f;
  -webkit-text-stroke-color: #c0392b;
  text-shadow: 0 0.06em 0 #c0392b, 0 0.12em 0.3em rgba(0, 0, 0, 0.35);
}
.g-call.score {
  -webkit-text-stroke-color: #2e8b3e;
  text-shadow: 0 0.06em 0 #2e8b3e, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
}
.g-call.meh {
  -webkit-text-stroke-color: #4f6275;
  text-shadow: 0 0.06em 0 #4f6275, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
}
.g-call.bad {
  color: #fff4d6;
  -webkit-text-stroke-color: #c0392b;
  text-shadow: 0 0.06em 0 #c0392b, 0 0.12em 0.25em rgba(0, 0, 0, 0.3);
}

.g-hint {
  top: 0.9em;
  bottom: auto;
  left: 54%;
  padding: 0.45em 1.1em;
  font-size: 0.82em;
  display: flex;
  gap: 1em;
  align-items: center;
}

/* the hole's card: "Hole 3: Par 5" top right, the score bottom left */
.g-intro {
  position: absolute;
  right: 1.4em;
  top: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.05em #1f4f86;
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0.25em rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(1.5em);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.g-intro.show {
  opacity: 1;
  transform: none;
}
.g-intro b {
  font-size: 3.4em;
  font-style: italic;
}
.g-intro span {
  font-size: 1.6em;
}
.g-scores {
  position: absolute;
  left: 1.4em;
  bottom: 1.4em;
  min-width: 15em;
  padding: 0.5em 0.7em 0.6em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.25em 0.8em rgba(0, 0, 0, 0.3);
  font-weight: 900;
  opacity: 0;
  transform: translateY(1em);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.g-scores.show {
  opacity: 1;
  transform: none;
}
.g-scores-head {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7785;
  margin-bottom: 0.2em;
}
.g-scores-row {
  display: flex;
  justify-content: space-between;
  gap: 1.2em;
  padding: 0.2em 0.5em;
  border-left: 0.35em solid var(--pc);
  border-radius: 0.3em;
  margin-top: 0.2em;
  background: #f1f5f8;
  font-size: 1.15em;
}
.g-sval {
  color: var(--pc);
}

/* the scorecard */
.g-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(0.95);
  min-width: 60%;
  padding: 1em 1.4em 1.2em;
  border-radius: 1.4em;
  background: linear-gradient(#1f7a3a, #145c2a);
  border: 0.25em solid #e9c45c;
  box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.g-card.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.g-card-title {
  text-align: center;
  font-size: 1.8em;
  font-style: italic;
  margin-bottom: 0.5em;
  text-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.4);
}
.g-card-body {
  display: flex;
  gap: 1em;
  align-items: flex-end;
}
.g-card-faces {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding-bottom: 0.1em;
}
.g-card-face {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 2.3em;
}
.g-card-face img {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: #eef3f8;
  border: 0.14em solid var(--pc);
}
.g-card-face b {
  min-width: 2.2em;
  font-size: 1.15em;
}
.g-table {
  flex: 1;
  border-collapse: separate;
  border-spacing: 0.2em;
  font-size: 1.05em;
}
.g-table th,
.g-table td {
  height: 2.1em;
  min-width: 2em;
  text-align: center;
  border-radius: 0.35em;
}
.g-table th {
  background: rgba(0, 0, 0, 0.25);
  color: #d8f3c8;
}
.g-tpar td {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.g-tplayer td {
  background: rgba(0, 0, 0, 0.22);
}
.g-table .g-tname {
  text-align: left;
  padding: 0 0.6em;
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-tplayer .g-tname {
  border-left: 0.35em solid var(--pc);
}
.g-table .g-ttot {
  background: rgba(233, 196, 92, 0.35);
  color: #fff6d6;
  min-width: 3em;
}
.g-tunder {
  color: #ffae3d;
}
.g-teven {
  color: #ffffff;
}
.g-tover {
  color: #7fe0ff;
}
.g-card-a {
  position: absolute;
  right: 1em;
  bottom: -1.1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#ffffff, #dfe5ec);
  color: #3b4049;
  border: 0.14em solid #9aa4ae;
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.35);
  animation: g-a-bob 1.2s ease-in-out infinite;
}
@keyframes g-a-bob {
  50% {
    transform: translateY(-0.2em);
  }
}

/* between holes */
.g-fade {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.45s;
}
.g-fade.on {
  opacity: 1;
}

/* --- Boxing ---------------------------------------------------------------- */

#s-boxing {
  pointer-events: none;
}
.bx-views,
.bx-plates {
  position: absolute;
  inset: 0;
}

/* each boxer's face and name along the bottom, on a bar of their colour */
.bx-plates {
  opacity: 0;
  transition: opacity 0.35s;
}
.bx-plates.show {
  opacity: 1;
}
.bx-plate {
  position: absolute;
  bottom: 2.2%;
  width: 33%;
  height: 4.8em;
}
.bx-plate.left {
  left: 0;
}
.bx-plate.right {
  right: 0;
}
.bx-plate i {
  position: absolute;
  bottom: 0;
  height: 0.5em;
  width: 100%;
  background: var(--pc);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.35);
}
/* (a thicker tab under the face) */
.bx-plate i::before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1.6em;
  width: 36%;
  background: var(--pc);
}
.bx-plate.left i {
  left: 0;
}
.bx-plate.left i::before {
  left: 0;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
}
.bx-plate.right i {
  right: 0;
}
.bx-plate.right i::before {
  right: 0;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.bx-plate img {
  position: absolute;
  bottom: 0.6em;
  height: 4.1em;
  z-index: 1;
  filter: drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, 0.4));
}
.bx-plate.left img {
  left: 5.5%;
}
.bx-plate.right img {
  right: 5.5%;
}
.bx-plate span {
  position: absolute;
  bottom: 0.75em;
  z-index: 1;
  font-size: 1.55em;
  font-weight: 800;
  color: var(--pc);
  -webkit-text-stroke: 0.14em #ffffff;
  paint-order: stroke fill;
}
.bx-plate.left span {
  left: 20%;
}
.bx-plate.right span {
  right: 20%;
  color: #ffffff;
  -webkit-text-stroke-color: rgba(60, 64, 72, 0.85);
}
#s-boxing.versus .bx-plate.right span {
  color: var(--pc);
  -webkit-text-stroke-color: #ffffff;
}

/* the round clock: three round lamps over orange LED digits */
.bx-clock {
  position: absolute;
  left: 50%;
  bottom: 1.8%;
  width: 11.6em;
  height: 7.4em;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.35s;
}
.bx-clock.show {
  opacity: 1;
}
.bx-clock::before {
  content: '';
  position: absolute;
  inset: 0 0.9em;
  background: linear-gradient(180deg, #24201f, #0b0a0a);
  border: 0.22em solid #f07a1c;
  clip-path: polygon(10% 0, 90% 0, 100% 16%, 100% 84%, 90% 100%, 10% 100%, 0 84%, 0 16%);
  border-radius: 0.6em;
  box-shadow: inset 0 0 0.8em rgba(240, 122, 28, 0.35);
}
.bx-clock::after {
  content: '';
  position: absolute;
  inset: 0.9em 0;
  background: linear-gradient(90deg, #8f969d, #eef1f4 4%, #9aa1a8 8%, transparent 8%, transparent 92%, #9aa1a8 92%, #eef1f4 96%, #8f969d);
  border-radius: 0.4em;
}
.bx-lamps {
  position: absolute;
  top: 0.7em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.35em;
  z-index: 1;
}
.bx-lamps i {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 900;
  font-size: 1.05em;
  color: #2d1205;
  background: radial-gradient(circle at 40% 35%, #a85a22, #6a2e0a);
  box-shadow: inset 0 0 0.2em rgba(0, 0, 0, 0.5);
}
.bx-lamps i.on {
  background: radial-gradient(circle at 40% 35%, #ffe0b0, #ff8c2a 55%, #d0520c);
  box-shadow: 0 0 0.6em rgba(255, 140, 42, 0.8);
}
.bx-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45em;
  z-index: 1;
  text-align: center;
  font-size: 3.3em;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  color: transparent;
  background: repeating-linear-gradient(180deg, #ffa43a 0 0.06em, #8a3a06 0.06em 0.09em);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 0.12em rgba(255, 140, 40, 0.75));
}

/* stamina pies, popping up by the boxers' heads */
.bx-pie {
  position: absolute;
  left: 0;
  top: 0;
  width: 8.2em;
  height: 8.2em;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
}
.bx-pie.show {
  opacity: 1;
}
.bx-pie svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bx-slice {
  fill: var(--pie);
  transition: opacity 0.12s;
}

/* a punch landing: a starburst in the colour of whoever took it */
.bx-burst {
  position: absolute;
  width: 10em;
  height: 10em;
  transform: translate(-50%, -50%);
  animation: bx-burst 0.5s ease-out forwards;
}
.bx-burst.big {
  width: 15em;
  height: 15em;
  animation-duration: 0.65s;
}
.bx-burst.block {
  width: 8em;
  height: 8em;
  animation-duration: 0.4s;
}
.bx-burst svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bx-star {
  fill: var(--bc);
  opacity: 0.9;
  filter: drop-shadow(0 0 0.4em var(--bc));
}
@keyframes bx-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.35) rotate(-10deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25) rotate(8deg);
  }
}

/* hit hard: orange streaks out from the middle of your screen */
.bx-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}
.bx-flash.left {
  right: 50%;
}
.bx-flash.right {
  left: 50%;
}
.bx-flash svg {
  width: 100%;
  height: 100%;
}
.bx-flash.hit {
  animation: bx-flash 0.55s ease-out;
}
.bx-flash.dodge {
  animation: bx-dodge 0.4s ease-out;
}
@keyframes bx-flash {
  0% {
    opacity: 0.95;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@keyframes bx-dodge {
  0% {
    opacity: 1;
    box-shadow: inset 0 0 5em rgba(120, 200, 255, 0.55);
  }
  100% {
    opacity: 0;
    box-shadow: inset 0 0 1em rgba(120, 200, 255, 0);
  }
}

/* the big words: fiery orange, popping in */
.bx-fire {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.bx-fire span {
  font-size: 8.8em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(180deg, #fffbd0 0%, #ffe05a 30%, #ff9a1e 62%, #e8380e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0.03em 0 0 #8c1c04) drop-shadow(-0.03em 0 0 #8c1c04) drop-shadow(0 0.03em 0 #8c1c04) drop-shadow(0 -0.02em 0 #8c1c04) drop-shadow(0 0 0.18em rgba(255, 150, 40, 0.85));
}
.bx-fire.count span {
  font-size: 13em;
}
.bx-fire.big span {
  font-size: 15em;
}
.bx-fire.show {
  animation: bx-fire-in 0.28s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
.bx-fire.show.out {
  animation: bx-fire-out 0.26s ease-in forwards;
}
@keyframes bx-fire-in {
  0% {
    opacity: 0;
    transform: scale(1.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bx-fire-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* the round, on a striped orange plate sliding in */
.bx-round {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 46em;
  height: 7.4em;
  margin-left: -23em;
  margin-top: -3.7em;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-plate-stripes {
  position: absolute;
  inset: 0;
  border-radius: 1.6em;
  background: repeating-linear-gradient(180deg, rgba(255, 140, 30, 0.95) 0 0.34em, rgba(255, 140, 30, 0.35) 0.34em 0.52em);
  border: 0.24em solid #ff9b2c;
  box-shadow: 0 0 1.4em rgba(255, 140, 30, 0.6);
}
.bx-round b {
  position: relative;
  font-size: 4.8em;
  font-weight: 900;
  color: #3b1606;
  -webkit-text-stroke: 0.05em rgba(255, 210, 160, 0.7);
  paint-order: stroke fill;
}
.bx-round.show {
  animation: bx-round-in 0.6s cubic-bezier(0.2, 1.1, 0.3, 1) forwards;
}
.bx-round.show.out {
  animation: bx-round-out 0.3s ease-in forwards;
}
@keyframes bx-round-in {
  0% {
    opacity: 0;
    transform: translateX(-60%) scaleX(0.4);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes bx-round-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(40%);
  }
}

/* "Counter!" */
.bx-call {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  text-align: center;
  font-size: 4.4em;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  -webkit-text-stroke: 0.06em #d8261f;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #8c1c04, 0 0.12em 0.3em rgba(0, 0, 0, 0.35);
  opacity: 0;
}
.bx-call.left {
  right: 50%;
}
.bx-call.right {
  left: 50%;
}
.bx-call.show {
  animation: result-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

/* what the camera saw you throw (practice, and the camera check) */
.bx-callout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  text-align: center;
  font-size: 3.2em;
  font-weight: 900;
  color: #ffffff;
  -webkit-text-stroke: 0.07em #1f6fb0;
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #1f6fb0, 0 0.12em 0.3em rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.bx-callout.left {
  right: 50%;
}
.bx-callout.right {
  left: 50%;
}
.bx-callout.show {
  animation: result-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

/* the winner's gold band, and confetti */
.bx-win {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
}
.bx-win.show {
  opacity: 1;
}
.bx-win-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  height: 8em;
  margin-top: -4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0 0.55em, rgba(228, 234, 240, 0.75) 0.55em 0.85em);
  box-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.3);
  transform-origin: center;
}
.bx-win.show .bx-win-band {
  animation: bx-band 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.bx-win-band b {
  font-size: 6.4em;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(180deg, #fffbe2 0%, #ffe27a 38%, #d6a21a 62%, #fff2b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0.025em 0.025em 0 #8a6408) drop-shadow(0.03em 0.05em 0 #5c4204) drop-shadow(0 0.08em 0.12em rgba(0, 0, 0, 0.35));
}
.bx-win:not(.good) .bx-win-band b {
  background: linear-gradient(180deg, #ffffff 0%, #c9d1da 45%, #8b96a3 70%, #e9eef3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0.03em 0.05em 0 #3b4049) drop-shadow(0 0.08em 0.12em rgba(0, 0, 0, 0.35));
}
.bx-win.show .bx-win-band b {
  animation: result-pop 0.5s 0.2s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes bx-band {
  from {
    transform: scaleY(0);
  }
}
.bx-confetti i {
  position: absolute;
  top: -4%;
  width: 0.8em;
  height: 0.5em;
  border-radius: 0.1em;
  animation: bx-confetti linear infinite;
}
@keyframes bx-confetti {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(var(--drift), 60em) rotate(720deg);
  }
}

/* the Vs. screen */
.bx-vs {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.bx-vs.show {
  opacity: 1;
  animation: screen-in 0.4s ease-out;
}
.bx-vs-card {
  position: absolute;
  bottom: 13%;
  width: 49%;
  height: 7.6em;
  padding: 0.9em 2.4em 0;
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.9), rgba(4, 8, 16, 0.86));
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.4);
}
.bx-vs-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.45em;
}
.bx-vs-card.left {
  left: 0;
  text-align: right;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
  border-bottom: 0.25em solid #2b9de8;
}
.bx-vs-card.left::before {
  background: #2b9de8;
}
.bx-vs-card.right {
  right: 0;
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
  border-bottom: 0.25em solid #b8bec6;
}
.bx-vs-card.right::before {
  background: #c9cfd6;
}
#s-boxing.versus .bx-vs-card.right {
  border-bottom-color: #e8473f;
}
#s-boxing.versus .bx-vs-card.right::before {
  background: #e8473f;
}
.bx-vs-skill {
  font-size: 2em;
  font-weight: 800;
  color: #4fb0ff;
  margin-top: 0.3em;
}
.bx-vs-card.right .bx-vs-skill {
  color: #dfe4ea;
}
.bx-vs-name {
  font-size: 2.2em;
  font-weight: 800;
  color: #ffffff;
}
.bx-vs-name em {
  font-style: normal;
  font-size: 0.62em;
  margin-left: 0.4em;
  padding: 0 0.3em;
  border: 0.12em solid currentColor;
  border-radius: 0.3em;
  vertical-align: 0.2em;
}
.bx-bolt {
  position: absolute;
  left: 50%;
  top: -5%;
  width: 11em;
  height: 110%;
  margin-left: -5.5em;
  animation: bx-bolt 0.18s steps(2) infinite;
}
.bx-bolt path {
  fill: #ffffff;
  filter: drop-shadow(0 0 0.5em #d27bff) drop-shadow(0 0 1.2em #9b3dff);
}
@keyframes bx-bolt {
  50% {
    opacity: 0.75;
    transform: scaleX(-1);
  }
}
.bx-vs-text {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 9.5em;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #fff6b0 0%, #ffc12a 35%, #ff5a12 70%, #c81e06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0.03em 0 0 #c9ced6) drop-shadow(-0.03em 0 0 #c9ced6) drop-shadow(0 0.04em 0 #5a5f68) drop-shadow(0 -0.03em 0 #f4f6f8) drop-shadow(0 0.08em 0.2em rgba(0, 0, 0, 0.5));
}

/* the camera check */
.bx-setup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3%;
}
.bx-setup.show {
  display: flex;
}
.bx-setup-card {
  width: 36em;
  padding: 1.4em 1.8em 1.2em;
  border-radius: 1.4em;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.35);
}
.bx-setup-card h2 {
  margin: 0 0 0.3em;
  font-size: 1.9em;
  font-weight: 900;
  color: #2b9de8;
}
.bx-setup-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.2em 0 0.4em;
}
.bx-setup-card ol {
  margin: 0 0 0.8em;
  padding-left: 1.3em;
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.4;
}
.bx-setup-who {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.bx-cam {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.45em 0.8em;
  border-radius: 0.9em;
  background: #eef2f6;
  border-left: 0.4em solid var(--pc);
  font-weight: 800;
}
.bx-cam img {
  width: 2.8em;
  height: 2.8em;
}
.bx-cam b {
  font-size: 1.2em;
}
.bx-cam-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bx-cam-who i {
  font-style: normal;
  font-size: 0.72em;
  font-weight: 700;
  color: #8b919a;
}
.bx-cam span {
  margin-left: auto;
  color: #6b727c;
  text-align: right;
}
.bx-cam.good span {
  color: #1e9a46;
}
.bx-cam.good span::before {
  content: '\2713  ';
}
.bx-setup-skip {
  margin-top: 0.8em;
  font-size: 0.92em;
  font-weight: 700;
  color: #8b919a;
  line-height: 1.35;
}

/* the computer's camera: what it sees (shown mirrored, like a mirror), with
   everyone it's tracking drawn over, and how quick its trackers are */
.bx-tvcam {
  --ar: 16 / 9;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: 0.9em;
  background: #0b0d10;
}
.bx-tvcam video,
.bx-tvcam canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bx-tvcam video {
  transform: scaleX(-1);
}
.bx-tvcam-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9em 0.8em 0.35em;
  font-size: 0.78em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
}
.bx-tvcam-line:empty {
  display: none;
}
.bx-tv-slot .bx-tvcam {
  height: 12.5em;
  max-width: 100%;
  margin: 0.2em auto 0.7em;
}
.bx-tvcam.corner {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  height: 9.4em;
  border: 0.2em solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s;
}
.bx-tvcam.corner.away {
  opacity: 0;
}
.bx-tvcam.corner .bx-tvcam-line {
  font-size: 0.62em;
}

/* split screen: a line down the middle */
.bx-split {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.35em;
  margin-left: -0.175em;
  background: #0d0d0f;
  display: none;
}
#s-boxing.split .bx-split {
  display: block;
}
.bx-hint {
  top: 1.2em;
  bottom: auto;
}

/* the punch test: what to do, big at the top, and how it went */
.bx-test {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24em;
  padding: 0.7em 1.8em 0.8em;
  border-radius: 1.2em;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.4em 1.4em rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.bx-test.show {
  animation: bx-test-in 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes bx-test-in {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
.bx-test-step {
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8b919a;
}
.bx-test-ask {
  font-size: 3.6em;
  font-weight: 900;
  line-height: 1.1;
  color: #1d6fd0;
}
.bx-test-res {
  min-height: 1.3em;
  font-size: 1.9em;
  font-weight: 900;
  opacity: 0;
}
.bx-test-res.show {
  animation: bx-test-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
@keyframes bx-test-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.bx-test-res.ok {
  color: #1e9a46;
}
.bx-test-res.bad {
  color: #d23a2a;
}
.bx-test-sum {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: 3.4em; /* (clear of the hint along the top) */
}
.bx-test-sum.show {
  display: flex;
}
.bx-test-card {
  width: 40em;
  padding: 0.9em 1.6em 0.9em;
}
.bx-test-card h2 {
  margin: 0;
}
.bx-test-total {
  margin: 0 0 0.3em;
  font-size: 1.35em;
  font-weight: 800;
}
.bx-test-total b {
  font-size: 1.4em;
  color: #1e9a46;
}
.bx-test-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05em;
}
.bx-test-table th,
.bx-test-table td {
  padding: 0.1em 0.3em;
  text-align: left;
}
.bx-test-table tr + tr {
  border-top: 1px solid #e3e7ec;
}
.bx-test-table th {
  font-weight: 900;
  color: #4a5059;
}
.bx-test-card i {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.18em;
  border-radius: 0.4em;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4em;
  text-align: center;
}
.bx-test-card i.ok {
  background: #e1f5e8;
  color: #1e9a46;
}
.bx-test-card i.bad {
  background: #fde4e0;
  color: #d23a2a;
}
.bx-test-card i.miss {
  background: #eef0f3;
  color: #9aa1aa;
}
.bx-test-key {
  margin: 0.4em 0 0.5em;
  font-size: 0.85em;
  font-weight: 700;
  color: #8b919a;
}
.bx-test-key i {
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
}
.bx-test-btns {
  display: flex;
  gap: 0.8em;
}
.bx-test-btns .wbtn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4em 1em;
}
.bx-test-btns small {
  font-weight: 700;
  opacity: 0.6;
}
.bx-test-note {
  margin: 0.5em 0 0;
  font-size: 0.85em;
  font-weight: 700;
  color: #8b919a;
}
.bx-test-tip {
  margin: 0 0 0.6em;
  padding: 0.5em 0.8em;
  border-radius: 0.7em;
  background: #fff4dc;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.35;
  color: #7a5310;
}