:root {
  --navy: #0b1d33;
  --ball: #d9f542;
  --blue: #2f7df6;
  --good: #3ddc84;
  --bad: #ff5d5d;
  --warn: #ffb547;
  --text: #f2f6fa;
  --muted: #9fb2c6;
  --line: rgba(255, 255, 255, 0.1);
  --panel: rgba(8, 19, 34, 0.86);
  --box: rgba(255, 255, 255, 0.035);
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #07121f;
  color: var(--text);
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.icon-btn.off {
  opacity: 0.45;
}
.icon-btn.on {
  color: var(--ball);
}
.icon-btn.small {
  width: 30px;
  height: 30px;
}
.icon-btn.small .ic {
  width: 17px;
  height: 17px;
}

.link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--ball);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- In-game HUD ---------- */
/* Scoreboard: dressed like each tournament's TV graphics. Hard court (the
   default) navy with a yellow games box, clay green with a light box, grass
   white names with green games and purple points. */
#scoreboard {
  --sb-bg: #0b1c3f;
  --sb-edge: #25407a;
  --sb-name: #ffffff;
  --sb-games-bg: #f3df4d;
  --sb-games: #0b1c3f;
  --sb-points-bg: transparent;
  --sb-points: #ffffff;
  --sb-serve: #ffffff;
  position: fixed;
  top: 16px;
  left: 16px;
  min-width: 240px;
  padding: 5px;
  background: var(--sb-bg);
  border: 1px solid var(--sb-edge);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
body.playing #scoreboard {
  opacity: 1;
}
#scoreboard[data-surface='clay'] {
  --sb-bg: rgba(12, 78, 52, 0.94);
  --sb-edge: #2c7a55;
  --sb-games-bg: #eef3ea;
  --sb-games: #0c4e34;
}
#scoreboard[data-surface='grass'] {
  --sb-bg: transparent;
  --sb-edge: transparent;
  --sb-name: #3d1a6e;
  --sb-games-bg: #0b6b3a;
  --sb-games: #ffffff;
  --sb-points-bg: #4a2584;
  --sb-serve: #4a2584;
  padding: 0;
  box-shadow: none;
}
#scoreboard .row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 34px 46px;
  align-items: center;
  column-gap: 8px;
  height: 34px;
  padding-left: 6px;
  color: var(--sb-name);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
#scoreboard .row + .row {
  margin-top: 3px;
}
#scoreboard .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#scoreboard .games,
#scoreboard .points {
  display: grid;
  place-items: center;
  height: 100%;
}
#scoreboard .games {
  background: var(--sb-games-bg);
  color: var(--sb-games);
  border-radius: 2px;
}
#scoreboard .points {
  background: var(--sb-points-bg);
  color: var(--sb-points);
}
#scoreboard .serve {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
#scoreboard .serve.on {
  background: var(--sb-serve);
}
#scoreboard .foot {
  padding: 4px 6px 1px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Grass: white name strips, the server marked with a purple arrow after the name. */
#scoreboard[data-surface='grass'] .row {
  grid-template-columns: minmax(0, 1fr) 14px 34px 46px;
  column-gap: 0;
  padding-left: 12px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
#scoreboard[data-surface='grass'] .serve {
  order: 1;
  width: 0;
  height: 0;
  border-radius: 0;
  border: 6px solid transparent;
  border-left: 0;
}
#scoreboard[data-surface='grass'] .serve.on {
  background: none;
  border-right: 8px solid var(--sb-serve);
}
#scoreboard[data-surface='grass'] .name {
  order: 0;
}
#scoreboard[data-surface='grass'] .games {
  order: 2;
  border-radius: 0;
}
#scoreboard[data-surface='grass'] .points {
  order: 3;
}
#scoreboard[data-surface='grass'] .foot {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#topright {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
body:not(.playing) #topright {
  display: none;
}
#topright .icon-btn {
  background: rgba(8, 19, 34, 0.85);
  border-color: var(--line);
}
.pill {
  background: rgba(8, 19, 34, 0.85);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
}
body.has-ctrl #conn {
  border-color: var(--good);
}
/* Against a friend: are they still there? */
#rival-pill {
  border-color: var(--good);
}
#rival-pill.bad {
  border-color: var(--bad);
  color: #ffb3b3;
}
#sound {
  display: none;
}
#sound.show {
  display: inline-block;
}
#speed {
  font-weight: 800;
  font-size: 22px;
  color: var(--ball);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-6px);
  transition: 0.25s;
}
#speed.show {
  opacity: 1;
  transform: none;
}

#toast {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -10px) scale(0.9);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
#toast-title {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 0 var(--navy), 0 10px 30px rgba(0, 0, 0, 0.5);
}
#toast.good #toast-title {
  color: var(--ball);
}
#toast-sub {
  margin-top: 4px;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 700;
  background: rgba(8, 19, 34, 0.8);
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
}
#toast-sub:empty {
  display: none;
}
/* Lobby notices: square-ish, a colored edge by kind (good, locked, bad), a timer line */
.notice {
  --accent: var(--ball);
  position: fixed;
  z-index: 45;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(500px, calc(100% - 32px));
  padding: 12px 10px 14px 18px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, #0c1d33), #0a1829 60%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  animation: notice-in 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.notice::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}
.notice[hidden] {
  display: none;
}
.notice.locked {
  --accent: var(--warn);
}
.notice.bad {
  --accent: var(--bad);
}
@keyframes notice-in {
  from {
    opacity: 0;
    transform: translate(-50%, -14px) scale(0.97);
  }
}
.notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--accent);
  color: #07121f;
}
.notice-icon .ic {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}
.notice-media {
  flex: none;
  width: 52px;
  height: 62px;
  padding: 4px;
  border-radius: 4px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 70%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.notice-media:not([hidden]) + .notice-text {
  margin-left: -2px;
}
.notice:has(.notice-media:not([hidden])) .notice-icon {
  display: none;
}
.notice-text {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.notice-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font: 700 11px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.notice-tag:empty {
  display: none;
}
.notice-text b {
  font: 800 italic 20px/1.05 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.notice-text span {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}
.notice-text span:empty {
  display: none;
}
.notice-close {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.notice-close .ic {
  width: 16px;
  height: 16px;
}
.notice-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
/* How long until it goes away */
.notice-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.7;
  transform-origin: left;
  animation: notice-timer 7s linear forwards;
}
@keyframes notice-timer {
  to {
    transform: scaleX(0);
  }
}
/* Login: "Forgot your password?" and the unconfirmed-email line in the profile */
.acct-forgot {
  margin: -6px 0 0;
  text-align: right;
}
.acct-forgot button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.acct-forgot button:hover {
  color: var(--ball);
}
.acct-unverified {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--warn);
}
.acct-unverified[hidden] {
  display: none;
}
#feedback {
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, 8px);
  font-weight: 800;
  font-size: 24px;
  opacity: 0;
  transition: 0.2s;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
#feedback.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#feedback.good {
  color: var(--ball);
}
#feedback.bad {
  color: #ffb3b3;
}
#hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 19, 34, 0.85);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  max-width: calc(100% - 32px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
/* TV camera: your player stands at the bottom center and the far wall's
   sponsors sit at the top, so hints move to the bottom-left corner. */
body.tv-view #hint {
  left: 24px;
  transform: none;
  max-width: min(420px, 40vw);
  border-radius: 16px;
}
#hint.show {
  opacity: 1;
}

/* ---------- Overlays and cards ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(7, 18, 31, 0.6), rgba(7, 18, 31, 0.92));
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.overlay.show {
  display: flex;
}
.card {
  width: min(960px, 100%);
  background: linear-gradient(180deg, #0f2641, #09182b);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  margin: auto;
}
.small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
.seg button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
}
.seg button:hover {
  background: rgba(255, 255, 255, 0.07);
}
.seg button.on {
  border-color: var(--blue);
  background: rgba(47, 125, 246, 0.2);
  box-shadow: inset 0 0 0 1px var(--blue);
}
button.primary {
  background: var(--ball);
  color: var(--navy);
  border: 0;
  border-radius: 14px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 800;
}
.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.actions button:not(.primary) {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 14px;
  padding: 14px 22px;
  font-weight: 700;
}

/* ---------- Menu ---------- */
#menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: #07121f;
  backdrop-filter: none;
}
#menu.show {
  display: flex;
}
/* While the game loads (body.booting: boot.js → main.js) the lobby panels wait
   over the wallpaper (already your court's, see index.html), so they appear
   once, translated, with your settings and their pictures, instead of
   changing on screen. The loading screen (#boot, loader.js) shows up only if
   that takes a moment. Shown anyway after 20 s if something failed. */
#menu > :not(.wallpaper) {
  transition: opacity 0.3s ease;
}
.booting #menu > :not(.wallpaper) {
  opacity: 0;
  pointer-events: none; /* nothing to click before it's ready */
  animation: boot-reveal 0s 20s forwards;
}
.booting .wp {
  transition: none; /* no cross-fade to your court while loading */
}
.boot {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s 0.35s; /* fades out as the lobby fades in */
}
.booting .boot {
  opacity: 1;
  visibility: visible;
  transition: none;
  animation: boot-hide 0s 20s forwards;
}
/* A shade over the wallpaper, the logo and the bar: after 0.4 s, so a quick load shows none. */
.boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(4, 10, 20, 0.35), rgba(4, 10, 20, 0.8));
}
.boot::before,
.boot-in {
  opacity: 0;
  animation: boot-show 0.3s 0.4s forwards;
}
.boot-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.boot-logo {
  width: min(340px, 64vw);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.boot-logo.on {
  opacity: 1; /* once it has loaded (loader.js) */
}
.boot-bar {
  position: relative;
  width: min(300px, 60vw);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.boot-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(217, 245, 66, 0.3), var(--ball));
  box-shadow: 0 0 14px rgba(217, 245, 66, 0.45);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The ball bounces along at its head. */
.boot-bar i::after {
  content: '';
  position: absolute;
  right: -9px;
  bottom: 100%;
  width: 18px;
  height: 18px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4ff9a, var(--ball) 45%, #a6bf12);
  box-shadow: 0 0 16px rgba(217, 245, 66, 0.5);
  transform-origin: 50% 100%;
  animation: boot-bounce 0.42s ease-in infinite alternate;
}
@keyframes boot-show {
  to {
    opacity: 1;
  }
}
@keyframes boot-bounce {
  from {
    transform: translateY(-22px);
  }
  to {
    transform: translateY(0) scale(1.1, 0.9);
  }
}
@keyframes boot-reveal {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}
@keyframes boot-hide {
  to {
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-bar i::after {
    animation: none;
  }
}
/* A picture that failed to load: hidden rather than broken while it's asked for again (loader.js). */
img.img-failed {
  visibility: hidden !important;
}


/* Lobby wallpaper (one per court), with a shade so the panels stay readable. */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wp {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 22% center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s ease, transform 1.4s ease;
}
/* Only your court's picture downloads while the game loads; the other two once
   the lobby is up (main.js adds .wp-all), ready to cross-fade. */
#menu[data-surface='hard'] .wp.hard,
#menu.wp-all .wp.hard {
  background-image: url('../img/lobby-hard.webp');
}
#menu[data-surface='clay'] .wp.clay,
#menu.wp-all .wp.clay {
  background-image: url('../img/lobby-clay.webp');
}
#menu[data-surface='grass'] .wp.grass,
#menu.wp-all .wp.grass {
  background-image: url('../img/lobby-grass.webp');
}
#menu[data-surface='hard'] .wp.hard,
#menu[data-surface='clay'] .wp.clay,
#menu[data-surface='grass'] .wp.grass {
  opacity: 1;
  transform: none;
}
.wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 20, 0.05) 0%, rgba(4, 10, 20, 0.3) 45%, rgba(4, 10, 20, 0.45) 100%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.15) 0%, rgba(4, 10, 20, 0.2) 50%, rgba(4, 10, 20, 0.65) 100%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(16px, 4vw, 64px);
  /* Opaque rather than a live blur (backdrop-filter): blurring the wallpaper on
     every scroll frame is slow and can flicker. */
  background: rgba(5, 13, 25, 0.94);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
a.brand {
  color: inherit;
  text-decoration: none;
}
.brand em {
  font-style: normal;
  color: var(--ball);
}
.brand-tag {
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0;
}
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
}
.gate .brand-logo {
  height: 52px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-link {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
}
.top-link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.top-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 6px;
}
.lang {
  display: flex;
  margin-left: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.lang button {
  border: 0;
  background: none;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.lang button.on {
  background: rgba(47, 125, 246, 0.25);
  color: var(--text);
}

/* Panels sit to the right so the player in the wallpaper shows on the left,
   and the whole lobby is centered vertically (no scrolling on laptops). */
/* The lobby: centered, and held at the top so switching modes changes what's
   below the mode tabs without moving anything above them. */
.menu {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto auto;
  padding: clamp(14px, 3.5vh, 40px) clamp(16px, 3vw, 32px) 76px;
}

.menu-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 20px;
  align-items: start;
}
.panel {
  min-width: 0;
  background: rgba(8, 19, 34, 0.9); /* no live blur behind (see .topbar) */
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.panel-head h2 {
  margin: 1px 0 3px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
}
.step.lime {
  background: var(--ball);
  color: var(--navy);
}
.step.blue {
  background: var(--blue);
  color: #fff;
}

/* 1. Connect */
.qr-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  width: min(224px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}
#qr {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
#qr:not([src]) {
  visibility: hidden;
}
/* Until the room is open (online it takes a moment) the box is a soft pulse,
   not a blank white square, and the code fades in when it's ready. */
.qr-wrap {
  transition: background-color 0.3s ease;
}
.qr-wrap:has(#qr:not([src])) {
  background: rgba(255, 255, 255, 0.07);
  animation: qr-wait 1.2s ease-in-out infinite alternate;
}
#qr[src] {
  animation: qr-in 0.35s ease;
}
@keyframes qr-wait {
  to {
    background: rgba(255, 255, 255, 0.14);
  }
}
@keyframes qr-in {
  from {
    opacity: 0;
  }
}
.status-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 181, 71, 0.08);
  border: 1px solid rgba(255, 181, 71, 0.35);
  font-weight: 700;
}
.status-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warn);
  animation: pulse 1.6s ease-in-out infinite;
}
body.has-ctrl .status-pill {
  background: rgba(61, 220, 132, 0.1);
  border-color: rgba(61, 220, 132, 0.5);
}
body.has-ctrl .status-pill .dot {
  background: var(--good);
  animation: none;
  box-shadow: 0 0 10px var(--good);
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
/* Round trip to the phone, next to its status */
.status-pill .ping {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: rgba(61, 220, 132, 0.16);
  color: var(--good);
  cursor: help;
}
.status-pill .ping.fair {
  background: rgba(255, 181, 71, 0.16);
  color: var(--warn);
}
.status-pill .ping.slow {
  background: rgba(255, 93, 93, 0.16);
  color: #ff8a8a;
}
/* Admins outside production: the mouse racket (main.js setMouseRacket) */
.mouse-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 138, 0, 0.6);
  background: rgba(255, 138, 0, 0.08);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
body.mouse-racket:not(.has-ctrl) #conn {
  border-color: #ff8a00;
}
.url-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mini-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.url-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
}
.url-field code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.code-chip {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}
.code-chip b {
  color: var(--ball);
  letter-spacing: 0.12em;
  font-size: 14px;
}
.tip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tip-ic {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
  color: var(--ball);
}
.tip p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #c7d5e3;
}

/* 2. Match setup */
.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.box {
  position: relative;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--box);
  border: 1px solid var(--line);
}
.box.wide {
  grid-column: 1 / -1;
}
.box-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}
.box-label .ic {
  width: 18px;
  height: 18px;
}
.label-value {
  margin-left: auto;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
}

.player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.name-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
}
.name-field:focus-within {
  border-color: var(--blue);
}
.field-ic {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
#player-name {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 11px 0;
}
#player-name.invalid {
  color: #ffb3b3;
}
/* Shown next to the "Your player" label, so it takes no extra space. */
.name-status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
}
.name-status.ok {
  color: var(--good);
}
.name-status.bad {
  color: #ffb3b3;
}
.avatars {
  display: flex;
  gap: 8px;
}
.avatar-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: radial-gradient(circle at 50% 35%, #294a70, #13263f);
  transition: transform 0.15s, border-color 0.15s;
}
.avatar-btn img {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-btn img:not([src]) {
  visibility: hidden;
}
.avatar-btn:hover {
  transform: scale(1.06);
}
.avatar-btn.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.3);
}

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mode-card {
  position: relative;
  display: flex;
  flex-direction: column; /* icon on top, so the text gets the whole width */
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s;
}
.mode-card:hover {
  background: rgba(255, 255, 255, 0.07);
}
.mode-card b {
  display: block;
  font-size: 15px;
  white-space: nowrap;
}
.mode-card small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.mode-ic {
  width: 22px;
  height: 22px;
  color: var(--blue);
}
.check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ball);
  color: var(--navy);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.6);
  transition: 0.15s;
}
.on > .check {
  opacity: 1;
  transform: none;
}
.mode-card.on {
  border-color: var(--blue);
  background: rgba(47, 125, 246, 0.14);
}

.courts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.court-card {
  position: relative;
  aspect-ratio: 16 / 8.4;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}
.court-card.hard {
  background: linear-gradient(160deg, #3f7f5f, #2d5d9f);
}
.court-card.clay {
  background: linear-gradient(160deg, #1c4a32, #c4643c);
}
.court-card.grass {
  background: linear-gradient(160deg, #3a2466, #4b8b39);
}
.court-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.court-card img:not([src]) {
  visibility: hidden;
}
.court-info {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 10px 8px;
  background: linear-gradient(transparent, rgba(3, 9, 18, 0.88));
}
.court-info b {
  display: block;
  font-size: 16px;
}
.court-info small {
  font-size: 12px;
  color: #c7d5e3;
}
.court-card:hover {
  transform: translateY(-2px);
}
.court-card.on {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.28);
}
.court-card .check {
  top: auto;
  bottom: 9px;
  right: 9px;
}

/* The racket cards grow to fill their box, level with the rules next to it. */
#box-racket {
  display: flex;
  flex-direction: column;
}
.rackets {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 8px;
}
.racket-card {
  position: relative;
  padding: 4px 2px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 70%);
  transition: transform 0.15s, border-color 0.15s;
}
.racket-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.racket-card img:not([src]) {
  visibility: hidden;
}
.racket-card:hover {
  transform: translateY(-2px);
}
.racket-card.on {
  border-color: var(--blue);
  background: radial-gradient(circle at 50% 40%, rgba(47, 125, 246, 0.35), rgba(47, 125, 246, 0.08) 70%);
}

#box-rules .cpu-only {
  margin-bottom: 14px;
}

/* Short screens (laptops at 768 px): a tighter lobby so it fits without scrolling. */
@media (max-height: 820px) and (min-width: 861px) {
  .menu {
    padding-top: 10px;
    padding-bottom: 64px;
  }
  .panel {
    padding: 16px;
  }
  .panel-head {
    margin-bottom: 10px;
  }
  .setup-grid {
    gap: 10px;
  }
  .box {
    padding: 10px 12px;
  }
  .court-card {
    aspect-ratio: 16 / 7.4;
  }
  .rackets {
    grid-auto-rows: minmax(64px, 1fr);
  }
  .seg button {
    padding: 8px 12px;
  }
}

/* The big button sits on the bottom edge of the setup panel. */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0 -54px;
}
.cta-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 72px;
  border: 0;
  border-radius: 999px;
  background: var(--ball);
  color: var(--navy);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(217, 245, 66, 0.35);
  transition: transform 0.15s, filter 0.15s;
}
.cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.cta-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.cta-ic {
  width: 22px;
  height: 22px;
  stroke: none;
}
.cta p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* CTA icon: magnifier to find an opponent, play to start with a friend */
.cta-btn .cta-search {
  stroke: currentColor;
  stroke-width: 3;
}
.cta-btn .cta-play,
body.vs-friend .cta-btn .cta-search {
  display: none;
}
body.vs-friend .cta-btn .cta-play {
  display: block;
}

/* ---------- Finding a rival ---------- */
.mm {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 420px;
  justify-content: center;
  text-align: center;
}
body.searching .mm {
  display: flex;
}
body.searching .setup .panel-head,
body.searching .setup-grid,
body.searching .setup .cta {
  display: none;
}
@keyframes mm-spin {
  to {
    transform: rotate(360deg);
  }
}
.mm-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.mm-title em {
  font-style: normal;
  color: var(--ball);
}
.mm-window {
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
  padding: 18px 0;
  /* fade the cards out at both ends */
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.mm-strip {
  display: flex;
  column-gap: 12px;
  flex: none;
  will-change: transform;
}
/* Motion blur while the roulette spins fast */
.mm-strip.spinning .mm-card {
  filter: blur(2.5px);
  opacity: 0.8;
}
/* Marker: where the roulette stops */
.mm-window::before,
.mm-window::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: 1;
  margin-left: -9px;
  border: 9px solid transparent;
}
.mm-window::before {
  top: 0;
  border-top-color: var(--ball);
}
.mm-window::after {
  bottom: 0;
  border-bottom-color: var(--ball);
}
.mm-card {
  position: relative;
  width: 118px;
  flex: none;
  padding: 16px 8px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, filter 0.5s, opacity 0.5s;
}
.mm-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.mm-avatar svg {
  width: 38px;
  height: 38px;
  fill: var(--c);
}
.mm-card b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.mm-level {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.mm-level i {
  width: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.mm-level i.on {
  background: var(--blue);
}
.mm-bot {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 900;
  color: var(--muted);
}
.mm-card.found {
  transform: scale(1.12);
  border: 2px solid var(--ball);
  box-shadow: 0 0 30px rgba(217, 245, 66, 0.35);
}
.mm-card.found .mm-level i.on {
  background: var(--ball);
}
.mm-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  min-height: 32px;
}
.mm-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(217, 245, 66, 0.25);
  border-top-color: var(--ball);
  animation: mm-spin 0.8s linear infinite;
}
.mm-status.found .mm-spinner {
  display: none;
}
.mm-status.found {
  color: var(--ball);
}
.mm-cancel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 11px 30px;
  font-weight: 800;
}
.mm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Phones: open the game on a big screen ---------- */
body.phone > :not(#phone-gate) {
  display: none !important;
}
.gate {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 22px;
  text-align: center;
  background:
    linear-gradient(rgba(6, 14, 30, 0.82), rgba(6, 14, 30, 0.94)),
    url('../img/lobby-hard.webp') center / cover;
}
.gate[hidden] {
  display: none;
}
.gate-art {
  width: 132px;
  margin-top: 10px;
  fill: none;
  stroke: var(--ball);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gate h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gate p {
  margin: 0;
  max-width: 340px;
  color: var(--muted);
  line-height: 1.45;
}
.gate-url {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.gate-url code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--ball);
}
.gate-url button {
  flex: none;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}
.gate-cta {
  margin-top: 8px;
  padding: 15px 34px;
  font-size: 17px;
  text-decoration: none;
}
.gate .gate-note {
  font-size: 13px;
}

/* ---------- Roles: CPU, host inviting a friend, guest ---------- */
.guest-only,
.friend-only {
  display: none;
}
body.guest .guest-only,
body.vs-friend .friend-only {
  display: block;
}
body.guest .host-only,
body.vs-friend .cpu-only {
  display: none !important;
}
.invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
#invite-link {
  flex: 1 1 240px;
  min-width: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  word-break: break-all;
  user-select: all;
}
.invite-row button {
  border: 0;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 800;
  background: var(--ball);
  color: var(--navy);
}
.status-line {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  line-height: 1.45;
}
.status-line:empty {
  display: none;
}
.status-line.ok {
  background: rgba(61, 220, 132, 0.12);
  border: 1px solid rgba(61, 220, 132, 0.45);
}
.status-line.bad {
  background: rgba(255, 93, 93, 0.12);
  border: 1px solid rgba(255, 93, 93, 0.45);
}
/* ---------- Accounts: header buttons, sign-in dialog, profile form ---------- */
body:not(.accounts) .signed-out-only,
body.signed-in .signed-out-only,
body:not(.signed-in) .signed-in-only,
body.accounts:not(.signed-in) .profile-only {
  display: none !important;
}
.top-cta {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--ball);
  color: var(--navy);
  font-weight: 800;
  white-space: nowrap;
}
.top-cta:hover {
  filter: brightness(1.08);
}
/* ---------- Account: create one / sign in ---------- */
#account {
  z-index: 31;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(47, 125, 246, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(217, 245, 66, 0.08), transparent 50%),
    rgba(4, 11, 21, 0.9);
  backdrop-filter: blur(6px);
  align-items: flex-start;
  padding-top: 72px;
}
.account-card {
  position: relative;
  width: min(460px, 100%);
  margin: 0 auto 32px;
  padding: 56px 32px 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, #102a4a 0%, #0a1a2e 55%, #08162a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: acct-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes acct-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
/* Two players and the ball, peeking over the card */
.acct-crest {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.acct-crest img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid #0a1a2e;
  box-shadow: 0 0 0 2px var(--ball), 0 10px 24px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}
.acct-crest img:last-child {
  margin-left: -6px;
}
.acct-ball {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  margin: 34px -10px 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4ff9a, var(--ball) 45%, #a6bf12);
  box-shadow: 0 0 16px rgba(217, 245, 66, 0.6);
}
.acct-close {
  position: absolute;
  top: 14px;
  right: 14px;
}
/* Segmented tabs with a sliding highlight */
.acct-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.acct-tabs button {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.25s;
}
.acct-tabs button.on {
  color: #07121f;
}
.acct-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--ball);
  box-shadow: 0 6px 18px rgba(217, 245, 66, 0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acct-tabs[data-tab='login'] .acct-thumb {
  transform: translateX(100%);
}
#account .acct-form {
  gap: 14px;
}
.acct-head {
  text-align: center;
  margin-bottom: 2px;
}
.acct-head h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.acct-head p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 14px;
  color: var(--muted);
}
.acct-perks {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.acct-perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(217, 245, 66, 0.08);
  border: 1px solid rgba(217, 245, 66, 0.2);
  font-size: 12px;
  font-weight: 700;
  color: #e7f5a8;
}
.acct-perks .ic {
  width: 14px;
  height: 14px;
  stroke: var(--ball);
}
/* Fields: label above, icon inside */
#account .field {
  gap: 7px;
  font-size: 13px;
}
#account .field-label {
  color: #c6d3e1;
  font-weight: 700;
}
#account .control {
  position: relative;
  display: block;
}
#account .control > .ic {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  stroke: var(--muted);
  pointer-events: none;
  transition: stroke 0.2s;
}
#account .control input,
#account .control select {
  height: 50px;
  padding: 0 14px 0 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  font-size: 15px;
  font-weight: 600;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
#account .control.no-icon input {
  padding-left: 14px;
}
#account .control input::placeholder {
  color: rgba(159, 178, 198, 0.55);
  font-weight: 500;
}
#account .control select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb2c6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
#account .control:focus-within > .ic {
  stroke: var(--ball);
}
#account .control input:focus,
#account .control select:focus {
  border-color: var(--ball);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 4px rgba(217, 245, 66, 0.14);
}
#account .control input[type='password'],
#account .control input[name='password'] {
  padding-right: 48px;
}
.acct-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.acct-eye:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.acct-eye .ic {
  width: 18px;
  height: 18px;
}
.acct-eye:not(.on) .slash {
  display: none;
}
/* Optional name, folded away */
.acct-more summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.acct-more summary::-webkit-details-marker {
  display: none;
}
.acct-more summary::before {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}
.acct-more[open] summary::before {
  content: '–';
}
.acct-more summary:hover {
  color: var(--text);
}
.acct-more .acct-row {
  margin-top: 12px;
}
/* Errors as an alert, only when there is one */
#account .acct-error {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 93, 93, 0.1);
  border: 1px solid rgba(255, 93, 93, 0.35);
}
#account .acct-error:empty {
  display: none;
}
/* The main button, with a spinner while it works */
#account .acct-submit {
  position: relative;
  height: 54px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--ball);
  color: #07121f;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(217, 245, 66, 0.25);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;
}
#account .acct-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(217, 245, 66, 0.35);
}
#account .acct-submit:disabled {
  cursor: default;
  transform: none;
}
#account .acct-submit.busy span {
  visibility: hidden;
}
#account .acct-submit.busy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(7, 18, 31, 0.25);
  border-top-color: #07121f;
  animation: acct-spin 0.7s linear infinite;
}
@keyframes acct-spin {
  to {
    transform: rotate(360deg);
  }
}
#account .acct-legal {
  text-align: center;
}
/* Checkbox in the brand's style */
#account .acct-check {
  cursor: pointer;
  line-height: 1.35;
}
#account .acct-check input {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
#account .acct-check input::after {
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid #07121f;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s;
}
#account .acct-check input:checked {
  background: var(--ball);
  border-color: var(--ball);
}
#account .acct-check input:checked::after {
  transform: rotate(45deg) scale(1);
}
#account .acct-check input:focus-visible {
  box-shadow: 0 0 0 4px rgba(217, 245, 66, 0.2);
}
.acct-switch {
  margin: 2px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.acct-switch button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ball);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.acct-switch button:hover {
  text-decoration: underline;
}
.acct-form {
  display: grid;
  gap: 12px;
}
.acct-form[hidden] {
  display: none;
}
.acct-lead,
.acct-email {
  margin: 0;
  color: var(--muted);
}
.acct-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.acct-form label small {
  font-weight: 500;
}
.acct-form input:not([type='checkbox']),
.acct-form select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color-scheme: dark;
}
.acct-form input:focus,
.acct-form select:focus {
  outline: none;
  border-color: var(--blue);
}
.acct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.acct-form .acct-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.acct-form .acct-check[hidden] {
  display: none;
}
.acct-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ball);
}
.acct-legal {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.acct-legal a {
  color: var(--ball);
}
.acct-error {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 700;
  color: #ffb3b3;
}
.acct-error.ok {
  color: var(--good);
}
.acct-submit {
  width: 100%;
  padding: 13px;
  font-size: 16px;
}
.acct-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#profile-form {
  margin-top: 6px;
}
@media (max-width: 560px) {
  .acct-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Your player (profile): see "Your player" at the end ---------- */
#profile {
  z-index: 30;
}
.profile-sub {
  margin: 6px 0 4px;
  color: var(--muted);
}
.top-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #294a70, #13263f);
}
.top-avatar:not([src]) {
  visibility: hidden;
}
/* Your picture in the lobby, with a pencil: tap to customize */
.edit-look {
  position: relative;
  overflow: visible;
}
.edit-look img {
  border-radius: 50%;
}
.edit-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ball);
  color: var(--navy);
}
.edit-badge svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* ---------- How it works ---------- */
#help {
  z-index: 30;
}
/* How it works: the guide's four pictures, how to hit, playing safe */
.help-card {
  width: min(940px, 100%);
  line-height: 1.45;
  padding: 24px 26px 18px;
}
.help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.help-head h2 {
  margin: 0;
  font-size: 30px;
}
.help-head p {
  margin: 4px 0 0;
  color: var(--muted);
}
.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.help-steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 0 0 12px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.help-steps img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 6px;
  background: #0d2038;
}
.help-steps .n {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font: 800 italic 16px/1 var(--display);
}
.help-steps li > b {
  padding: 0 12px;
  font: 800 italic 19px/1.1 var(--display);
  text-transform: uppercase;
}
.help-steps li > span:last-child {
  padding: 0 12px;
  font-size: 13px;
  color: #c9d6e3;
}
.help-steps span b,
.help-levels span b,
.help-more b {
  color: var(--text);
}
.help-cert {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--warn);
}
.help-label {
  margin: 20px 0 10px;
  font: 700 15px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c6d3e1;
}
.help-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.help-levels > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: #c9d6e3;
}
.help-levels > div > b {
  font: 800 italic 18px/1 var(--display);
  text-transform: uppercase;
  color: var(--ball);
}
.help-more {
  margin: 12px 0 0;
  font-size: 13px;
  color: #c9d6e3;
}
.help-foot {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.help-foot p {
  margin: 0;
}
.help-safety {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #ffd9a0;
}
.help-safety .ic {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: var(--warn);
}
@media (max-width: 760px) {
  .help-steps,
  .help-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- End of match and ranking ---------- */
.small-card {
  width: min(460px, 100%);
  text-align: center;
}
.small-card h2 {
  margin: 0;
  font-size: 40px;
}
.big-score {
  font-size: 56px;
  font-weight: 900;
  color: var(--ball);
  margin: 8px 0 16px;
}
.stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 18px;
}
.stats b {
  display: block;
  font-size: 28px;
}
.stats span {
  color: var(--muted);
  font-size: 13px;
}
.over-points {
  min-height: 1.4em;
  margin: -6px 0 18px;
  font-weight: 800;
  color: var(--ball);
}
#ranking {
  z-index: 30;
}
.rank-card {
  width: min(620px, 100%);
}
.rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rank-head h2 {
  margin: 0;
  font-size: 28px;
}
/* (the ranking's podium and list: see "Ranking" at the end) */

/* ---------- Staging badge ---------- */
.env-badge {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ff8a00;
  color: #1a0f00;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1180px) {
  .brand-tag {
    display: none;
  }
}
@media (max-width: 1080px) {
  .menu-grid {
    grid-template-columns: minmax(280px, 330px) 1fr;
  }
  .setup-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
  .connect {
    display: grid;
    grid-template-columns: 170px 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .connect .panel-head,
  .connect .tip {
    grid-column: 1 / -1;
  }
  .connect .qr-wrap {
    grid-row: span 2;
    margin: 0;
  }
  .connect .url-block {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
  }
  .top-link span {
    display: none;
  }
  .menu {
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .connect {
    display: block;
  }
  .connect .qr-wrap {
    margin: 0 auto 16px;
  }
  .modes {
    grid-template-columns: 1fr;
  }
  .cta-btn {
    padding: 16px 44px;
  }
}

/* =====================================================================
   Brand refresh: the lobby and its windows in the website's style
   (Barlow Condensed headings and buttons, Manrope text, yellow framed
   buttons, yellow selection). The in-game HUD keeps its own look.
   ===================================================================== */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-variable.woff2') format('woff2');
}
:root {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text-font: 'Manrope Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#menu,
.overlay {
  font-family: var(--text-font);
  line-height: 1.2; /* Manrope's own is taller; keeps the lobby fitting 720p screens */
}

/* Headings */
.panel-head h2,
.card h2,
.acct-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.panel-head h2 {
  font-size: 28px;
  line-height: 1;
  margin: 0 0 2px;
}
.card h2 {
  font-size: 34px;
  line-height: 1;
}
.acct-head h2 {
  font-size: 34px;
}
.step {
  width: auto;
  min-width: 44px;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
}
.step.blue {
  background: var(--ball);
  color: var(--navy);
}
.box-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c6d3e1;
}
.box-label .ic {
  color: var(--ball);
}
.label-value {
  font-family: var(--text-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Brand and top bar */
.brand b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 27px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.brand em {
  font-style: italic;
}
.top-link {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c6d3e1;
}
.top-link:hover {
  color: var(--text);
}
.top-cta {
  border-radius: 6px;
  padding: 8px 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Buttons: solid yellow with an offset frame that snaps into place on hover */
.cta-btn,
button.primary,
.actions button:not(.primary),
#account .acct-submit {
  position: relative;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s,
    filter 0.2s;
}
.cta-btn::after,
button.primary::after,
.actions button:not(.primary)::after,
#account .acct-submit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--frame, var(--ball));
  border-radius: 6px;
  transform: translate(6px, 6px);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.cta-btn:hover:not(:disabled),
button.primary:hover,
.actions button:not(.primary):hover,
#account .acct-submit:hover:not(:disabled) {
  transform: translate(3px, 3px);
  filter: brightness(1.05);
}
.cta-btn:hover:not(:disabled)::after,
button.primary:hover::after,
.actions button:not(.primary):hover::after,
#account .acct-submit:hover:not(:disabled)::after {
  transform: translate(-3px, -3px);
}
.cta-btn:disabled::after {
  display: none;
}
.cta-btn {
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 14px 40px rgba(217, 245, 66, 0.25);
}
.cta-btn:disabled {
  font-size: 20px;
}
button.primary {
  padding: 13px 24px;
  font-size: 19px;
}
.actions button:not(.primary) {
  --frame: rgba(255, 255, 255, 0.28);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  padding: 11px 18px;
  font-size: 19px;
}
.actions {
  gap: 16px;
  padding-bottom: 8px; /* room for the buttons' frame */
}
#account .acct-submit {
  border-radius: 6px;
  font-size: 20px;
  box-shadow: none;
}
#account .acct-submit.busy::after {
  /* the spinner uses ::after while busy */
  inset: 0;
  border: 3px solid rgba(7, 18, 31, 0.25);
  border-top-color: #07121f;
  border-radius: 50%;
  transform: none;
}

/* Your choices: yellow, like the website */
.seg button {
  border-radius: 6px;
}
.seg button.on {
  border-color: var(--ball);
  background: var(--ball);
  color: var(--navy);
  box-shadow: none;
}
.mode-card.on {
  border-color: var(--ball);
  background: rgba(217, 245, 66, 0.1);
}
.mode-ic {
  color: var(--ball);
}
.mode-card b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  text-transform: uppercase;
}
.court-card.on,
.avatar-btn.on {
  border-color: var(--ball);
  box-shadow: 0 0 0 3px rgba(217, 245, 66, 0.3);
}
.racket-card.on {
  border-color: var(--ball);
  background: radial-gradient(circle at 50% 40%, rgba(217, 245, 66, 0.22), rgba(217, 245, 66, 0.05) 70%);
}
.court-info b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
}

/* Tennis balls floating behind the lobby panels */
.wallpaper {
  overflow: hidden;
}
.lobby-ball {
  position: absolute;
  z-index: 1;
  width: var(--s, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 32%),
    radial-gradient(circle at 50% 50%, #e6ff66 0%, #d0ec2e 55%, #9fb814 100%);
  box-shadow:
    inset -8px -10px 18px rgba(80, 100, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: lobby-ball 7s ease-in-out infinite alternate;
}
.lobby-ball::before,
.lobby-ball::after {
  content: '';
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 60%;
  border: calc(var(--s, 60px) * 0.045) solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.lobby-ball::before {
  left: -34%;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.lobby-ball::after {
  right: -34%;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.lobby-ball.soft {
  filter: blur(4px);
  opacity: 0.75;
}
@keyframes lobby-ball {
  to {
    transform: translateY(-16px) rotate(25deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-ball {
    animation: none;
  }
}

/* Friend matches: waiting for the other player, and the rematch line */
.cta-btn.waiting,
button.primary.waiting {
  animation: waiting-pulse 1.4s ease-in-out infinite;
}
@keyframes waiting-pulse {
  50% {
    filter: brightness(0.8);
  }
}
.over-online {
  margin: 14px 0 0;
  font-weight: 700;
  color: #c6d3e1;
}
.over-online:empty {
  display: none;
}
.over-online.hot {
  color: var(--ball);
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn.waiting,
  button.primary.waiting {
    animation: none;
    filter: brightness(0.85);
  }
}


/* 3, 2, 1 before each serve */
#serve-count {
  position: fixed;
  left: 50%;
  top: 38%;
  z-index: 6;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(90px, 16vh, 170px);
  line-height: 1;
  color: var(--ball);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
}
#serve-count.beat {
  animation: serve-beat 1s ease-out forwards;
}
@keyframes serve-beat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  #serve-count.beat {
    animation: none;
    opacity: 1;
  }
}

/* Pause (main.js): the window over the frozen match; the score stays sharp above the blur */
#pause {
  z-index: 1;
}
body.paused #scoreboard {
  z-index: 2;
}
.pause-card h2 {
  margin-bottom: 12px;
}
.pause-sub {
  margin: 0 auto 22px;
  max-width: 34ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}
.pause-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 24px;
  text-align: left;
}
.pause-link img {
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 6px;
  background: #fff;
  image-rendering: pixelated;
}
.pause-link div {
  display: grid;
  gap: 4px;
}
.pause-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pause-link b {
  color: var(--ball);
  font-family: var(--display);
  font-size: 42px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
.pause-link small {
  color: var(--muted);
  font-size: 13px;
}
#resume:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  filter: none;
}
#resume:disabled::after {
  display: none;
}
.pause-card .small {
  margin-top: 8px;
}

/* =====================================================================
   Career ("Circuito TennisHero", see career.js)
   ===================================================================== */
/* The setup on a 12-column grid: the mode choice gets more room (three modes). */
.setup-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.modes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.modes .mode-card {
  padding: 9px 10px;
}
.modes .mode-card b {
  font-size: 17px;
}
.modes .mode-card small {
  font-size: 12px;
}

/* Career mode: the circuit replaces the court and rules choices. */
.career-only {
  display: none;
}
body.vs-career .career-only {
  display: block;
}
body.vs-career #box-court,
body.vs-career #box-rules {
  display: none;
}
body.vs-career .cta-btn .cta-search {
  display: none;
}
body.vs-career .cta-btn .cta-play {
  display: block;
}
.career-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.career-top .box-label {
  margin-bottom: 8px;
}
.career-top .link {
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ball);
}
.career-next {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rival-pic {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kit, #22335f);
  border: 3px solid var(--kit, var(--line));
}
.rival-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.rival-info small {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rival-info b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
}
.rival-style {
  font-size: 13px;
  color: var(--muted);
}
.career-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: none;
}
.round-dots {
  display: flex;
  gap: 4px;
}
.round-dot {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.round-dot.won {
  background: rgba(61, 220, 132, 0.15);
  border-color: rgba(61, 220, 132, 0.5);
  color: var(--good);
}
.round-dot.now {
  background: var(--ball);
  border-color: var(--ball);
  color: var(--navy);
}
.career-stars {
  font-size: 13px;
  font-weight: 700;
  color: var(--ball);
}
.career-done {
  display: grid;
  gap: 4px;
}
.career-done b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
}
.career-done p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Locked rewards (rackets; outfits: see .kit-card) */
.racket-card.locked {
  position: relative;
  opacity: 0.45;
  filter: grayscale(0.6);
}
.racket-card.locked::after {
  content: '🔒';
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 13px;
  filter: none;
}

/* The rival before a match */
.career-card {
  width: min(560px, 92vw);
  text-align: left;
}
.career-where {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ball);
}
.rival-big {
  display: flex;
  align-items: center;
  gap: 18px;
}
.rival-big .rival-pic {
  width: 104px;
  height: 104px;
  border-width: 4px;
}
.rival-big h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
}
.career-vs {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--muted);
}
.rival-big q {
  display: block;
  margin-top: 8px;
  font-style: italic;
  color: #d6e2ee;
  line-height: 1.4;
}
.coach {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.coach-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ball);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
}
.coach b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ball);
}
.coach p {
  margin: 2px 0 0;
  line-height: 1.45;
}
.career-mission {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-weight: 700;
}
.career-mission span {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.career-format {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.career-card .actions {
  margin-top: 20px;
  justify-content: flex-start;
}
.career-card .small {
  margin-top: 8px;
}

/* Result of a career match */
.over-career {
  margin: 14px 0 18px;
  text-align: left;
}
.career-champion {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--ball);
  text-align: center;
}
.star-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.star-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.star-list i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
}
.star-list li.on {
  color: var(--text);
  font-weight: 700;
}
.star-list li.on i {
  color: var(--ball);
  text-shadow: 0 0 12px rgba(217, 245, 66, 0.5);
}
.career-reward {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(217, 245, 66, 0.12);
  border: 1px solid rgba(217, 245, 66, 0.5);
  font-weight: 800;
}

/* The circuit */
.career-map-card {
  width: min(720px, 94vw);
  max-height: calc(88vh / var(--ui-zoom, 1));
  overflow: auto;
  text-align: left;
}
.career-map-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.map-tournament {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  background: rgba(255, 255, 255, 0.03);
}
.map-tournament.clay {
  border-top-color: #c8602f;
}
.map-tournament.grass {
  border-top-color: #3a8d45;
}
.map-tournament.locked {
  opacity: 0.55;
}
.map-tournament header {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}
.map-tournament header b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
}
.map-tournament header small {
  color: var(--muted);
  font-size: 13px;
}
.map-tournament header em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--warn);
}
.map-tournament ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.map-tournament li {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.map-round {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-tournament li.won .map-rival {
  color: var(--good);
}
.map-stars .star {
  font-style: normal;
  color: rgba(255, 255, 255, 0.18);
}
.map-stars .star.on {
  color: var(--ball);
}
@media (max-width: 640px) {
  .career-map-list {
    grid-template-columns: 1fr;
  }
}
/* Five rackets in one row; in career mode the racket box is wide and short. */
.rackets {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
body.vs-career .rackets {
  grid-auto-rows: 96px;
  max-width: 640px;
}

/* The coach's portrait over his initial (when there is one) */
.coach-badge {
  position: relative;
  overflow: hidden;
}
.coach-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   Racket unlocked: the full-screen moment (career rewards)
   ===================================================================== */
.unlock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background: radial-gradient(ellipse at 38% 50%, rgba(217, 245, 66, 0.16), transparent 55%), #050c18;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.unlock.show {
  opacity: 1;
}
.unlock[hidden] {
  display: none;
}
/* Slow light rays behind everything */
.unlock-rays {
  position: absolute;
  left: 38%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(217, 245, 66, 0.07) 0deg 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: unlock-rays 40s linear infinite;
}
@keyframes unlock-rays {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.unlock-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  width: min(1080px, 100%);
}
.unlock-art {
  position: relative;
  display: grid;
  place-items: center;
}
.unlock-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 245, 66, 0.55), rgba(217, 245, 66, 0.12) 45%, transparent 70%);
  filter: blur(10px);
  animation: unlock-glow 2.4s ease-in-out infinite alternate;
}
@keyframes unlock-glow {
  from {
    transform: scale(0.85);
    opacity: 0.7;
  }
  to {
    transform: scale(1.08);
    opacity: 1;
  }
}
.unlock-racket {
  position: relative;
  height: min(70vh, 600px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transform: translateY(60px) rotate(-38deg) scale(0.45);
}
.unlock.show .unlock-racket {
  animation:
    unlock-racket-in 1s cubic-bezier(0.2, 1.3, 0.4, 1) 0.15s forwards,
    unlock-float 3.2s ease-in-out 1.3s infinite alternate;
}
@keyframes unlock-racket-in {
  to {
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1);
  }
}
@keyframes unlock-float {
  from {
    opacity: 1;
    transform: translateY(0) rotate(-6deg) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(-14px) rotate(-3deg) scale(1);
  }
}
/* Sparks bursting out once */
.unlock-sparks {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.unlock-sparks i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ball);
  box-shadow: 0 0 12px var(--ball);
  opacity: 0;
}
.unlock-sparks i:nth-child(3n) {
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
}
.unlock.show .unlock-sparks i {
  animation: unlock-spark 1.1s cubic-bezier(0.15, 0.8, 0.3, 1) calc(0.45s + var(--s) * 0.2s) forwards;
}
@keyframes unlock-spark {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateX(var(--d)) scale(0.3);
  }
}
/* The words */
.unlock-text > * {
  opacity: 0;
  transform: translateY(18px);
}
.unlock.show .unlock-text > * {
  animation: unlock-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.unlock.show .unlock-text > :nth-child(1) {
  animation-delay: 0.45s;
}
.unlock.show .unlock-text > :nth-child(2) {
  animation-delay: 0.55s;
}
.unlock.show .unlock-text > :nth-child(3) {
  animation-delay: 0.65s;
}
.unlock.show .unlock-text > :nth-child(4) {
  animation-delay: 0.85s;
}
.unlock.show .unlock-text > :nth-child(5) {
  animation-delay: 1s;
}
.unlock.show .unlock-text > :nth-child(6) {
  animation-delay: 1.1s;
}
@keyframes unlock-up {
  to {
    opacity: 1;
    transform: none;
  }
}
.unlock-eyebrow {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ball);
}
.unlock-kicker {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: #d6e2ee;
}
.unlock-text h2 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 8px 40px rgba(217, 245, 66, 0.25);
}
.unlock-ability {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(217, 245, 66, 0.4);
  max-width: 460px;
}
.unlock-ability .ic {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 9px;
  border-radius: 10px;
  background: var(--ball);
  color: var(--navy);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.unlock-ability span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.unlock-ability b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ball);
}
.unlock-ability p {
  margin: 4px 0 0;
  line-height: 1.45;
}
.unlock-ability small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.unlock-also {
  margin: 14px 0 0;
  font-weight: 700;
  color: #d6e2ee;
}
.unlock-text .actions {
  justify-content: flex-start;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .unlock-stage {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .unlock-racket {
    height: 36vh;
  }
  .unlock-ability {
    margin-inline: auto;
    text-align: left;
  }
  .unlock-text .actions {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .unlock-rays,
  .unlock-glow,
  .unlock.show .unlock-racket,
  .unlock.show .unlock-sparks i,
  .unlock.show .unlock-text > * {
    animation: none;
  }
  .unlock-racket,
  .unlock-text > * {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   Ranking: podium for the top 3, the list, and your place
   ===================================================================== */
.rank-card {
  width: min(600px, 100%);
  /* One height for every tab: switching doesn't make it jump */
  height: min(calc(92vh / var(--ui-zoom, 1)), 760px);
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}
.rank-head {
  flex-wrap: nowrap;
}
.rank-head h2 {
  font-size: 30px;
  margin-right: auto;
}
.rank-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}
.rank-close:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}
.rank-close .ic {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}
.rank-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
  scrollbar-width: thin;
}

/* Faces: avatar ringed with the outfit's color */
.face {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--kit, var(--line));
  background: #16304f;
}
.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* The podium: 2nd · 1st (raised) · 3rd, in their frames (see the frames below) */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding: 26px 4px 0;
  min-height: 180px;
}
.spot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
  --metal: #c9d3dd;
}
.spot.p1 {
  --metal: var(--ball);
}
.spot.p3 {
  --metal: #e0975b;
}
.spot .face {
  width: 64px;
  height: 64px;
  border: 3px solid var(--metal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.spot.p1 .face {
  width: 84px;
  height: 84px;
  box-shadow: 0 0 0 6px rgba(217, 245, 66, 0.12), 0 0 40px rgba(217, 245, 66, 0.35);
}
.spot .who {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 15px;
}
.spot .pts {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--metal);
}
.pts small {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--muted);
}
.spot .block {
  width: 100%;
  margin-top: 6px;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-top: 3px solid var(--metal);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  color: var(--metal);
  height: 56px;
}
.spot.p1 .block {
  height: 84px;
  font-size: 40px;
  background: linear-gradient(180deg, rgba(217, 245, 66, 0.16), rgba(217, 245, 66, 0.02));
}
.spot.p3 .block {
  height: 42px;
}
.spot.vacant .block {
  opacity: 0.35;
}
.spot.me .who {
  color: var(--ball);
}

/* The rest of the top */
.rank-list {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.rank-list li {
  display: grid;
  grid-template-columns: 30px auto 1fr auto 76px;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-variant-numeric: tabular-nums;
}
.rank-list .pos {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--muted);
  text-align: center;
}
.rank-list .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.rank-list .who em {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.rank-list .wins {
  font-size: 13px;
  color: var(--muted);
}
.rank-list .pts {
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
}
.rank-list li.me {
  background: rgba(217, 245, 66, 0.1);
  box-shadow: inset 0 0 0 1px rgba(217, 245, 66, 0.45);
}
.rank-list li.flash,
.spot.flash {
  animation: rank-flash 1.2s ease-out;
}
@keyframes rank-flash {
  0%,
  40% {
    box-shadow: inset 0 0 0 2px var(--ball), 0 0 24px rgba(217, 245, 66, 0.45);
  }
}
.rank-empty {
  margin: 28px 0;
  text-align: center;
  color: var(--muted);
}
.rank-loading {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--ball);
  animation: mm-spin 0.8s linear infinite;
}

/* Your place: always in sight */
.rank-me {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(217, 245, 66, 0.45);
  background: linear-gradient(90deg, rgba(217, 245, 66, 0.14), rgba(217, 245, 66, 0.04));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.rank-me[hidden] {
  display: none;
}
.rank-me .face {
  width: 44px;
  height: 44px;
}
.me-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.me-main b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--ball);
}
.me-main small {
  color: #d6e2ee;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-me .pts {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
}
.rank-how {
  margin: 10px 0 0;
  text-align: center;
}

/* Tabs: everyone, or by country */
.rank-tabs {
  flex: none;
  margin-bottom: 12px;
}
.rank-tabs button {
  padding: 8px 14px;
  font-size: 14px;
}
.podium[hidden],
.rank-countries[hidden],
.rank-nation[hidden] {
  display: none;
}
/* The countries: place, flag, name and players, points; each opens its players */
.rank-countries {
  list-style: none;
  margin: 0;
  padding: 2px 0 4px;
  display: grid;
  gap: 6px;
}
.rank-countries button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px auto 1fr auto 16px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s;
}
.rank-countries button:hover,
.rank-countries button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}
.rank-countries .pos {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--muted);
  text-align: center;
}
/* Gold, silver and bronze for the first three */
.rank-countries li:nth-child(1) .pos {
  color: #f5c542;
}
.rank-countries li:nth-child(2) .pos {
  color: #d3dbe6;
}
.rank-countries li:nth-child(3) .pos {
  color: #d9925a;
}
.rank-countries .flag {
  width: 36px;
  height: 27px;
  margin: 0;
  border-radius: 4px;
}
.rank-countries .who {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.rank-countries .who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-countries .who em {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: 1px;
}
.rank-countries .pts {
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
}
.rank-countries .ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.4;
}
.rank-countries li.me button {
  background: rgba(217, 245, 66, 0.1);
  box-shadow: inset 0 0 0 1px rgba(217, 245, 66, 0.45);
}
.rank-countries li.flash button {
  animation: rank-flash 1.2s ease-out;
}
/* One country's players: back to the countries, and which country */
.rank-nation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.rank-nation b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
}
.rank-nation .flag {
  width: 30px;
  height: 22px;
  vertical-align: -3px;
}
.rank-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.rank-back:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}
.rank-back .ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
/* Your country at the bottom: its flag big (or a flag to pick one) */
.rank-me.country > .flag {
  width: 44px;
  height: 33px;
  margin: 0;
  border-radius: 4px;
}
.rank-me .no-flag {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px dashed rgba(217, 245, 66, 0.6);
}
.rank-me .no-flag .ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ball);
  stroke-width: 2;
}
@media (max-width: 560px) {
  .rank-list li {
    grid-template-columns: 26px auto 1fr 64px;
  }
  .rank-list .wins {
    display: none;
  }
}

/* =====================================================================
   The lobby's player (Solo / With a friend): full body, holding your racket
   ===================================================================== */
/* Beside the player the courts are narrower: just their names. */
body.has-stage .court-info {
  padding: 18px 9px 6px;
}
body.has-stage .court-info b {
  font-size: 15px;
}
body.has-stage .court-info small {
  display: none;
}
body.has-stage .court-card .check {
  bottom: 6px;
  right: 6px;
}
.player-stage {
  position: relative;
  flex: 1;
  min-height: 190px;
  margin: 10px -14px -12px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background: radial-gradient(ellipse at 50% 85%, rgba(217, 245, 66, 0.16), transparent 60%);
}
.player-stage[hidden] {
  display: none;
}
/* A patch of the chosen court under the feet, with the baseline */
.stage-floor {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 84%;
  height: 17%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.5) 0 16%, transparent 38%),
    linear-gradient(transparent 61%, rgba(255, 255, 255, 0.85) 61% 66%, transparent 66%),
    radial-gradient(ellipse, color-mix(in srgb, var(--court) 80%, #fff) 0, var(--court) 42%, color-mix(in srgb, var(--court) 70%, #000) 68%, transparent 71%);
  -webkit-mask: radial-gradient(ellipse, #000 0 64%, transparent 71%);
  mask: radial-gradient(ellipse, #000 0 64%, transparent 71%);
}
.player-stage {
  --court: #2f6fd1;
}
.player-stage[data-surface='clay'] {
  --court: #c8602f;
}
.player-stage[data-surface='grass'] {
  --court: #3a8d45;
}
.stage-figure {
  position: absolute;
  left: 50%;
  bottom: 4%;
  height: 80%; /* room above for the racket at the top of the swing */
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: stage-breathe 2.6s ease-in-out infinite alternate;
}
.player-stage.lefty .stage-figure {
  transform: translateX(-50%) scaleX(-1);
  animation-name: stage-breathe-lefty;
}
@keyframes stage-breathe {
  from {
    transform: translateX(-50%) translateY(0) scaleY(1);
  }
  to {
    transform: translateX(-50%) translateY(-1.5%) scaleY(1.012);
  }
}
@keyframes stage-breathe-lefty {
  from {
    transform: translateX(-50%) scaleX(-1) translateY(0) scaleY(1);
  }
  to {
    transform: translateX(-50%) scaleX(-1) translateY(-1.5%) scaleY(1.012);
  }
}
.stage-figure img {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.pose,
.cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.12s ease;
}
/* The hand that holds the racket is drawn again over its grip (and the free hand over its throat). */
.cover.ready-fist {
  clip-path: ellipse(6.5% 4.6% at 45.5% 53.6%);
}
.cover.ready-hand {
  clip-path: ellipse(5.5% 4.6% at 74% 56.5%);
}
.cover.swing-fist {
  clip-path: ellipse(5.6% 3.8% at 93.6% 20%);
}
.pose.swing,
.cover.swing-fist {
  opacity: 0;
}
/* The racket: its grip on the hand, turned around it */
.stage-racket {
  left: var(--rx, 45.5%);
  top: var(--ry, 54%);
  /* The picture is 0.8 m of racket world (thumbnails.js); the grip is 90.3% down it. */
  height: 45.6%;
  width: auto;
  transform: translate(-50%, -90.3%) rotate(var(--ra, 82deg));
  transform-origin: 50% 90.3%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  transition:
    left 0.18s cubic-bezier(0.3, 0.7, 0.3, 1),
    top 0.18s cubic-bezier(0.3, 0.7, 0.3, 1),
    transform 0.18s cubic-bezier(0.3, 0.7, 0.3, 1);
}
/* A forehand: the other picture, the racket from the hip to over the shoulder */
.player-stage.swing .pose.ready,
.player-stage.swing .cover.ready-fist,
.player-stage.swing .cover.ready-hand {
  opacity: 0;
}
.player-stage.swing .pose.swing,
.player-stage.swing .cover.swing-fist {
  opacity: 1;
}
.player-stage.swing .stage-racket {
  --rx: 93.6%;
  --ry: 20.5%;
  --ra: -38deg;
}
/* The woman's hands: the fist a little lower and more central, the free hand closer */
.player-stage[data-avatar='female'] .stage-racket {
  --rx: 54.5%;
  --ry: 50.8%;
  --ra: 86deg;
}
.player-stage[data-avatar='female'].swing .stage-racket {
  --rx: 87%;
  --ry: 20.7%;
  --ra: -38deg;
}
.player-stage[data-avatar='female'] .cover.ready-fist {
  clip-path: ellipse(5% 3.2% at 54.5% 50.8%);
}
.player-stage[data-avatar='female'] .cover.ready-hand {
  clip-path: ellipse(4.5% 3.6% at 71.5% 51%);
}
.player-stage[data-avatar='female'] .cover.swing-fist {
  clip-path: ellipse(4.6% 2.8% at 87% 20.7%);
}
/* While waiting (main.js stageIdle). Before the forehand the racket head drops a moment. */
.player-stage.windup .stage-racket {
  --ra: 104deg;
  transition-duration: 0.38s;
  transition-timing-function: ease-in-out;
}
.player-stage[data-avatar='female'].windup .stage-racket {
  --ra: 108deg;
}
/* The racket twirled in the hand: turned once round its handle. */
.player-stage.twirl .stage-racket {
  animation: racket-twirl 1.3s ease-in-out;
}
@keyframes racket-twirl {
  0%,
  100% {
    transform: translate(-50%, -90.3%) rotate(var(--ra, 82deg)) scaleX(1);
  }
  50% {
    transform: translate(-50%, -90.3%) rotate(var(--ra, 82deg)) scaleX(-1);
  }
}
/* A waggle of the racket, like before a point. */
.player-stage.waggle .stage-racket {
  animation: racket-waggle 1.4s ease-in-out;
}
@keyframes racket-waggle {
  0%,
  100% {
    transform: translate(-50%, -90.3%) rotate(var(--ra, 82deg));
  }
  35% {
    transform: translate(-50%, -90.3%) rotate(calc(var(--ra, 82deg) + 10deg));
  }
  70% {
    transform: translate(-50%, -90.3%) rotate(calc(var(--ra, 82deg) - 6deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-figure {
    animation: none;
  }
}
/* The players in 3D (stage3d.js): drawn over the court patch instead of the pictures */
.stage-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.player-stage:not(.is-3d) .stage-3d,
.player-stage.is-3d .stage-figure {
  visibility: hidden;
}
.player-stage.lefty .stage-3d {
  transform: scaleX(-1);
}

/* =====================================================================
   Daily streak: the chip on Your player, its card, the result line and
   the flame on the ranking
   ===================================================================== */
/* Its own row under your name; over the top of the stage when your player shows. */
.streak {
  position: relative;
  z-index: 3;
  margin-top: 8px;
}
.streak[hidden] {
  display: none;
}
body.has-stage .streak + .player-stage {
  margin-top: -30px;
}
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(13, 31, 54, 0.9);
  color: var(--text);
  font: 700 13px/1 var(--text-font);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.streak-chip .unit {
  margin-left: -1px;
  color: var(--text);
}
.streak-chip .state::before {
  content: '· ';
  color: var(--muted);
}
.streak-chip[data-state='start'] .state::before {
  content: none;
}
.streak-chip b {
  font: 800 18px/1 var(--display);
  font-style: italic;
}
.streak-chip .state {
  color: var(--muted);
  font-size: 12px;
}
.streak-chip:hover {
  background: rgba(255, 255, 255, 0.09);
}
.flame {
  width: 18px;
  height: 18px;
  flex: none;
  fill: #ff7a1a;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.55));
}
.streak-chip[data-state='start'] .flame {
  fill: #6d7f93;
  filter: none;
}
/* Not played yet today: the streak is at stake */
.streak-chip[data-state='pending'] {
  border-color: rgba(255, 181, 71, 0.6);
  background: rgba(255, 181, 71, 0.1);
}
.streak-chip[data-state='pending'] .state {
  color: var(--warn);
}
.streak-chip[data-state='pending'] .flame {
  animation: flame-flicker 1.6s ease-in-out infinite alternate;
}
.streak-chip[data-state='safe'] .state {
  color: var(--ball);
}
.streak-chip[data-state='safe'] .state::before {
  content: '· ✓ ';
}
@keyframes flame-flicker {
  from {
    transform: scale(1) rotate(-3deg);
  }
  to {
    transform: scale(1.12) rotate(3deg);
  }
}
.streak-card {
  position: absolute;
  z-index: 25;
  top: calc(100% + 6px);
  left: 0;
  width: min(290px, 100%);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0d1f36;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.streak-card[hidden] {
  display: none;
}
.streak-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.streak-head .flame {
  width: 34px;
  height: 34px;
}
.streak-head small {
  display: block;
  font: 700 12px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.streak-head b {
  font: 800 italic 26px/1.05 var(--display);
  text-transform: uppercase;
}
.streak-card p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.streak-status.pending {
  color: var(--warn);
  font-weight: 700;
}
.streak-status.safe {
  color: var(--ball);
  font-weight: 700;
}
.streak-bonus {
  color: var(--text);
  font-weight: 700;
}
.streak-next {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}
.streak-next i {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff5418, #ffc21a) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.1);
}
.streak-card .streak-meta {
  color: var(--muted);
  font-size: 12px;
}
/* Result screen: the day's streak and its extra points */
.over-streak {
  display: grid;
  gap: 4px;
  margin: -10px 0 16px;
  font-weight: 800;
  color: #ffb06a;
}
.over-streak[hidden] {
  display: none;
}
.over-streak span:not(:last-child) {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}
/* Ranking: the flame of a streak of 3+ days */
.rank-flame {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 4px;
  font: 800 italic 14px/1 var(--display);
  color: #ffb06a;
  vertical-align: 1px;
}
.rank-flame .flame {
  width: 14px;
  height: 14px;
}
/* The unlock moment for an outfit: its shirt and shorts */
.unlock-kit {
  position: relative;
  display: block;
  width: min(46vh, 340px);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transform: translateY(60px) rotate(-38deg) scale(0.45);
}
.unlock-kit svg {
  display: block;
  width: 100%;
  height: auto;
}
.unlock.show .unlock-kit {
  animation:
    unlock-racket-in 1s cubic-bezier(0.2, 1.3, 0.4, 1) 0.15s forwards,
    unlock-float 3.2s ease-in-out 1.3s infinite alternate;
}
.unlock-note {
  margin-top: 18px;
  color: var(--muted);
}
/* Six rackets now (the streak's Fire racket) */
.rackets {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* =====================================================================
   Your player (the profile): pick on the left, try it on at the right
   ===================================================================== */
.look-card {
  width: min(980px, 100%);
  padding: 24px 26px 22px;
}
.look-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.look-title {
  margin-right: auto;
}
.look-title h2 {
  margin: 0;
  font-size: 30px;
}
.look-title .profile-sub {
  margin: 4px 0 0;
}
.look-tabs button {
  padding: 8px 14px;
  font-size: 14px;
}
.look-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 22px;
}
.look-body[hidden] {
  display: none;
}
.look-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font: 700 15px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c6d3e1;
}
.look-label + .avatars + .look-label {
  margin-top: 22px;
}
.look-picks {
  display: flex;
  flex-direction: column;
}
.look-label .look-tip {
  margin-left: auto;
}
.look-label small {
  font: 600 13px/1 var(--text-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
/* Avatar: two wide tiles */
.look-avatars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.avatar-btn.look-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: 800 italic 20px/1 var(--display);
  text-transform: uppercase;
  text-align: left;
}
.avatar-btn.look-avatar img {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #294a70, #13263f);
}
.avatar-btn.look-avatar:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}
.avatar-btn.look-avatar.on {
  border-color: var(--ball);
  background: radial-gradient(circle at 20% 50%, rgba(217, 245, 66, 0.16), rgba(217, 245, 66, 0.03) 70%);
  box-shadow: none;
}
/* Outfits: a grid of cards, each drawn in its colors */
.look-kits {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.kit-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 70%);
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.kit-card .kit-art {
  width: 64%;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.kit-card span {
  font: 700 14px/1.1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kit-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
}
.kit-card.on {
  border-color: var(--ball);
  background: radial-gradient(circle at 50% 38%, rgba(217, 245, 66, 0.2), rgba(217, 245, 66, 0.04) 70%);
}
.kit-card .ic {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
}
.kit-card .check {
  display: none;
  background: var(--ball);
  color: var(--navy);
  stroke-width: 3;
}
.kit-card.on .check {
  display: block;
}
.kit-card .lock {
  display: none;
  background: rgba(0, 0, 0, 0.55);
  color: var(--warn);
}
.kit-card.locked .lock {
  display: block;
}
.kit-card.locked .kit-art {
  opacity: 0.5;
  filter: grayscale(0.4) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.kit-card.locked span {
  color: var(--muted);
}
/* The preview: your player on a patch of court, and the outfit's card */
.look-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 470px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 70%, rgba(217, 245, 66, 0.16), transparent 58%),
    linear-gradient(180deg, #12304f, #0a1a2e);
}
.player-stage.look-stage {
  flex: 1;
  min-height: 300px;
  margin: 0;
  border-radius: 0;
  background: none;
}
.look-stage .stage-figure {
  height: 80%;
  bottom: 5%;
}
.look-portrait {
  display: none;
}
.look-stage.no-body .stage-figure,
.look-stage.no-body .stage-floor {
  display: none;
}
.look-stage.no-body .look-portrait {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62%, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--kit);
  background: radial-gradient(circle at 50% 35%, #294a70, #13263f);
  box-shadow: 0 0 60px color-mix(in srgb, var(--kit) 45%, transparent);
  transform: translate(-50%, -50%);
}
.look-info {
  position: relative;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
  background: rgba(5, 13, 24, 0.55);
}
.look-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font: 700 12px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.look-tag.prize {
  background: rgba(217, 245, 66, 0.14);
  color: var(--ball);
}
.look-tag.locked {
  background: rgba(255, 181, 71, 0.14);
  color: var(--warn);
}
.look-tag .ic {
  width: 13px;
  height: 13px;
}
.look-info h3 {
  margin: 8px 0 2px;
  font: 800 italic 30px/1 var(--display);
  text-transform: uppercase;
}
.look-info p {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 14px;
}
.look-colors {
  position: absolute;
  top: 16px;
  right: 18px;
  display: flex;
  gap: 5px;
}
.look-colors i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.look-state {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.look-state.on {
  color: var(--ball);
}
.look-account {
  max-width: 560px;
}
.look-account[hidden] {
  display: none;
}
.look-actions {
  justify-content: flex-end;
  margin-top: 18px;
}
@media (max-width: 820px) {
  .look-body {
    grid-template-columns: 1fr;
  }
  .look-preview {
    order: -1;
    min-height: 360px;
  }
  .look-head {
    flex-wrap: wrap;
  }
}

/* A small country flag next to a name (ranking, rivals) */
.flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  margin-right: 7px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
h2 > .flag {
  width: 28px;
  height: 21px;
  vertical-align: 0;
}

/* The chosen country's flag in its picker (sign-up and your account) */
.select-flag {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.select-flag[hidden] {
  display: none;
}
#account .control.has-flag > .ic {
  display: none;
}
.flag-select {
  position: relative;
  display: block;
}
.acct-form .flag-select.has-flag select {
  padding-left: 44px;
}

/* =====================================================================
   The room with a friend: both players face to face
   ===================================================================== */
.room-only {
  display: none;
}
body.guest .room-only,
body.vs-friend .room-only {
  display: block;
}
/* The face-off: each player's card on their side, both players on the chosen
   court in front of the net, the VS bolt between them. */
.versus {
  position: relative;
  isolation: isolate;
  height: 400px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.14);
  background: #0a1a2e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The stadium of the chosen court (public/img/room, npm run room-images). Only
   that one downloads while the game loads; the others once the lobby is up
   (main.js adds .wp-all, as for the wallpaper), ready to cross-fade. */
.vs-court,
.vs-court i {
  position: absolute;
  inset: 0;
}
.vs-court {
  z-index: -1;
}
.vs-court i {
  background: center 38% / cover no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#menu[data-surface='hard'] .vs-court .hard,
#menu.wp-all .vs-court .hard {
  background-image: url('../img/room/hard.webp');
}
#menu[data-surface='clay'] .vs-court .clay,
#menu.wp-all .vs-court .clay {
  background-image: url('../img/room/clay.webp');
}
#menu[data-surface='grass'] .vs-court .grass,
#menu.wp-all .vs-court .grass {
  background-image: url('../img/room/grass.webp');
}
#menu[data-surface='hard'] .vs-court .hard,
#menu[data-surface='clay'] .vs-court .clay,
#menu[data-surface='grass'] .vs-court .grass {
  opacity: 1;
}
/* Darker behind each card, open in the middle over the net */
.vs-court::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 12, 24, 0.8) 0%, rgba(5, 12, 24, 0.42) 26%, rgba(5, 12, 24, 0.06) 46%, rgba(5, 12, 24, 0.06) 54%, rgba(5, 12, 24, 0.42) 74%, rgba(5, 12, 24, 0.8) 100%),
    linear-gradient(180deg, rgba(5, 12, 24, 0.3) 0%, rgba(5, 12, 24, 0) 28%, rgba(5, 12, 24, 0) 78%, rgba(5, 12, 24, 0.4) 100%);
}
.versus.error .vs-wait small {
  color: #ffb3b3;
}
.vs-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.vs-me {
  left: 0;
}
.vs-them {
  right: 0;
}
/* The players, big, standing on the court (the shadow is the 3D one's) */
.player-stage.vs-stage {
  position: absolute;
  top: 3%;
  bottom: 2%;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
}
.vs-me .vs-stage {
  left: 34%;
  right: -6%;
}
.vs-them .vs-stage {
  left: -6%;
  right: 34%;
}
.vs-stage .stage-floor {
  display: none;
}
.vs-stage .stage-figure {
  height: 86%; /* room above for the racket at the top of the swing */
  bottom: 3%;
}
/* Nobody yet: a dark player lit at the edges, a question mark on the chest */
.vs-stage.ghost .stage-3d {
  filter: drop-shadow(0 0 1.5px rgba(150, 190, 255, 0.85)) drop-shadow(0 0 16px rgba(70, 120, 255, 0.5));
}
/* The pictures (3D off): painted navy, the same light around them */
.vs-stage.ghost:not(.is-3d) .stage-figure {
  filter: brightness(0) invert(0.13) sepia(1) hue-rotate(185deg) saturate(3.2) drop-shadow(0 0 2px rgba(150, 190, 255, 0.95)) drop-shadow(0 0 18px rgba(70, 120, 255, 0.6));
}
.vs-unknown {
  display: none;
}
.vs-stage.ghost .vs-unknown {
  display: block;
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 1;
  transform: translateX(-50%);
  font: 800 italic 62px/1 var(--display);
  color: rgba(190, 210, 245, 0.62);
  text-shadow: 0 0 18px rgba(90, 140, 255, 0.7);
  pointer-events: none;
  animation: vs-ghost 1.8s ease-in-out infinite alternate;
}
@keyframes vs-ghost {
  to {
    color: rgba(215, 228, 255, 0.85);
  }
}

/* A player's card: name, level, what they've won, their racket */
.vs-card {
  position: absolute;
  top: 20px;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 11px;
  width: 214px;
  text-align: left;
}
.vs-me .vs-card {
  left: 22px;
}
.vs-them .vs-card {
  right: 22px;
  justify-items: end;
  text-align: right;
}
.vs-name {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  font: 800 italic 28px/1 var(--display);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.vs-them .vs-name {
  flex-direction: row-reverse;
}
.vs-name .flag {
  flex: none;
  width: 32px;
  height: 22px;
  margin: 0;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.vs-name b {
  min-width: 0;
  overflow: hidden;
  padding-right: 0.08em; /* the italic's last letter */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-name em {
  flex: none;
  padding: 4px 8px 3px;
  border-radius: 5px;
  background: var(--ball);
  color: var(--navy);
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.04em;
  text-shadow: none;
}
/* The level on a shield (in the rank's colors; the frame's own shield if they
   wear one), the rank beside it */
.vs-level {
  --rim-a: #ffc27a;
  --rim-b: #c4621f;
  --fill-a: #7c3a14;
  --fill-b: #4a200b;
  --glow: rgba(255, 140, 60, 0.4);
  display: flex;
  align-items: center;
  height: 42px;
  margin-left: 2px;
}
.vs-level.tier-club {
  --rim-a: #d3deea;
  --rim-b: #6d829a;
  --fill-a: #2f4864;
  --fill-b: #172a42;
  --glow: rgba(150, 180, 220, 0.35);
}
.vs-level.tier-challenger {
  --rim-a: #f4f7fb;
  --rim-b: #94a2b3;
  --fill-a: #586a7e;
  --fill-b: #2c3746;
  --glow: rgba(210, 225, 245, 0.4);
}
.vs-level.tier-pro {
  --rim-a: #ffe38a;
  --rim-b: #cf951b;
  --fill-a: #8d5c0c;
  --fill-b: #4d3104;
  --glow: rgba(255, 200, 60, 0.45);
}
.vs-level.tier-master {
  --rim-a: #f1ff9a;
  --rim-b: #9dbb12;
  --fill-a: #3a4d0b;
  --fill-b: #1a2405;
  --glow: rgba(217, 245, 66, 0.5);
}
.vs-shield {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 37px;
  height: 42px;
  filter: drop-shadow(0 0 7px var(--glow)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.vs-shield::before,
.vs-shield::after {
  content: '';
  position: absolute;
  clip-path: polygon(50% 0, 100% 12%, 100% 50%, 96% 65%, 86% 79%, 70% 91%, 50% 100%, 30% 91%, 14% 79%, 4% 65%, 0 50%, 0 12%);
}
.vs-shield::before {
  inset: 0;
  background: linear-gradient(155deg, var(--rim-a), var(--rim-b) 70%);
}
.vs-shield::after {
  inset: 3px;
  background: linear-gradient(170deg, var(--fill-a), var(--fill-b));
}
.vs-shield b {
  position: relative;
  z-index: 1;
  margin-top: -3px;
  font: 800 italic 22px/1 var(--display);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.vs-shield[class*='shield-'] {
  width: 56px;
  height: 44px;
  margin: 0 -9px 0 -10px;
  background: center / contain no-repeat;
}
.vs-shield[class*='shield-']::before,
.vs-shield[class*='shield-']::after {
  display: none;
}
.vs-shield[class*='shield-'] b {
  margin-top: -2px;
  font-size: 19px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
}
.vs-shield.shield-bronze {
  background-image: url('../img/room/shield-bronze.webp');
}
.vs-shield.shield-silver {
  background-image: url('../img/room/shield-silver.webp');
}
.vs-shield.shield-gold {
  background-image: url('../img/room/shield-gold.webp');
}
.vs-shield.shield-hero {
  background-image: url('../img/room/shield-hero.webp');
}
.vs-shield.shield-racha {
  background-image: url('../img/room/shield-racha.webp');
}
.vs-tier {
  margin-left: -14px;
  padding: 7px 16px 7px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 8px 8px 0;
  background: rgba(4, 10, 20, 0.74);
  font: 700 14px/1 var(--display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #dfe7f2;
}
.vs-them .vs-level {
  flex-direction: row-reverse;
  margin: 0 2px 0 0;
}
.vs-them .vs-tier {
  margin: 0 -14px 0 0;
  padding: 7px 24px 7px 16px;
  border-radius: 8px 0 0 8px;
}
/* What they've won: streak, wins, titles, ranking */
.vs-stats {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.vs-stat {
  display: grid;
  grid-template-columns: 30px auto;
  column-gap: 11px;
  align-items: center;
  justify-content: start;
}
.vs-stat img {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.vs-stat b {
  font: 800 italic 21px/0.95 var(--display);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.vs-stat small {
  font: 700 11px/1.15 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9b8ca;
}
.vs-stat.vs-streak b {
  color: #ffc24a;
}
.vs-stat.vs-rank b {
  color: #8fc1ff;
}
.vs-them .vs-stat {
  grid-template-columns: auto 30px;
  justify-content: end;
}
.vs-them .vs-stat img {
  grid-column: 2;
  grid-row: 1 / span 2;
}
/* Their racket: linked (ready), not yet (warn), in the room (live), elsewhere (busy) */
.vs-ready {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  margin-top: 2px;
  padding: 0 16px 0 7px;
  border: 1.5px solid currentColor;
  border-radius: 9px;
  background: rgba(4, 10, 20, 0.72);
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vs-ready > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-them .vs-ready {
  flex-direction: row-reverse;
  padding: 0 7px 0 16px;
}
.vs-ready .ic {
  width: 23px;
  height: 23px;
  padding: 3px;
  border-radius: 50%;
  stroke-width: 2.6;
}
.vs-ready.ready {
  color: var(--ball);
  box-shadow: 0 0 18px rgba(217, 245, 66, 0.22);
}
.vs-ready.ready .ic {
  background: var(--ball);
  color: var(--navy);
  stroke-width: 3.2;
}
.vs-ready.warn {
  color: var(--warn);
}
.vs-ready.live {
  color: #7be38f;
}
.vs-ready .dot {
  width: 11px;
  height: 11px;
  margin: 0 5px;
  border-radius: 50%;
  background: #4fdc6f;
  box-shadow: 0 0 10px #4fdc6f;
}
.vs-ready.busy {
  color: #8fc1ff;
}
.vs-customize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -3px;
  font-size: 13px;
  color: #c6d3e1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.vs-customize .ic {
  width: 14px;
  height: 14px;
}
.vs-customize:hover {
  color: var(--ball);
}

/* The middle: the VS bolt on a line of light across the court, or the countdown */
.vs-mid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 0;
}
.vs-mid::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -8%;
  bottom: -8%;
  width: 2px;
  background: linear-gradient(transparent, rgba(217, 245, 66, 0.65) 22%, rgba(240, 255, 180, 0.95) 50%, rgba(217, 245, 66, 0.65) 78%, transparent);
  box-shadow: 0 0 12px rgba(217, 245, 66, 0.6);
  transform: rotate(13deg);
  pointer-events: none;
}
.vs-badge {
  position: absolute;
  left: 0;
  top: 46%;
  display: grid;
  place-items: center;
  width: 124px;
  height: 214px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vs-bolt {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s, transform 0.3s;
}
.vs-count {
  position: absolute;
  font: 800 italic 118px/1 var(--display);
  color: var(--ball);
  text-shadow:
    0 0 30px rgba(217, 245, 66, 0.65),
    0 5px 0 rgba(0, 0, 0, 0.35);
}
.vs-count:empty {
  display: none;
}
.vs-badge.counting .vs-bolt {
  opacity: 0.18;
  transform: scale(0.9);
}
.vs-badge.counting .vs-count {
  animation: vs-pulse 1s ease-in-out infinite;
}
@keyframes vs-pulse {
  0% {
    transform: scale(1.18);
  }
  40% {
    transform: scale(1);
  }
}
/* What's missing, at the top between the cards */
.vs-status {
  position: absolute;
  left: 0;
  top: 16px;
  width: max-content;
  max-width: 230px;
  margin: 0;
  padding: 7px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(4, 10, 20, 0.8);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #c6d3e1;
}
.vs-status:empty {
  display: none;
}
.vs-status.ok {
  border-color: rgba(217, 245, 66, 0.35);
  color: var(--ball);
}
#versus .vs-mid .link {
  position: absolute;
  left: 0;
  top: 18px;
  width: max-content;
  transform: translateX(-50%);
  font-size: 13px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Nobody yet on the other side: who's missing, and the invite */
.vs-wait {
  display: none;
}
.vs-them.waiting .vs-card {
  display: none;
}
.vs-them.waiting .vs-wait {
  position: absolute;
  top: 20px;
  right: 16px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 214px;
}
.vs-wait-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-left: 2px;
}
.vs-spinner {
  flex: none;
  width: 32px;
  height: 32px;
  border: 3.5px dotted rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: mm-spin 3s linear infinite;
}
.vs-wait-head b {
  display: block;
  font: 800 italic 27px/1 var(--display);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.vs-wait-head small {
  display: block;
  margin-top: 5px;
  font: 700 13px/1.15 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9b8ca;
}
.vs-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 13px 12px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
body.vs-friend .vs-invite {
  display: grid; /* over .friend-only's block */
}
.vs-invite-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 italic 17px/1 var(--display);
  text-transform: uppercase;
}
.vs-invite-title .ic {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.vs-invite #invite-link {
  display: block;
  overflow: hidden;
  padding: 0 2px;
  font-size: 12px;
  color: #dfe7f2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-invite .invite-row {
  display: flex;
  gap: 8px;
}
.vs-invite .invite-row button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--ball);
  color: var(--navy);
  font: 800 italic 15px/1 var(--display);
  transition: filter 0.15s, transform 0.15s;
}
.vs-invite .invite-row button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.vs-invite .invite-row .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.vs-invite > .link {
  justify-self: center;
  font-size: 13px;
  color: #c6d3e1;
}
/* Laptops (under 960 px high, where the lobby isn't zoomed): a shorter face-off
   and tighter cards, so Play stays on screen. */
@media (max-height: 959px) {
  .versus {
    height: max(300px, calc(100vh - 560px));
  }
  .vs-card {
    top: 14px;
    gap: 7px;
  }
  .vs-me .vs-card {
    left: 18px;
  }
  .vs-them .vs-card {
    right: 18px;
  }
  .vs-name {
    font-size: 24px;
  }
  .vs-level {
    height: 36px;
  }
  .vs-shield {
    width: 32px;
    height: 36px;
  }
  .vs-shield b {
    font-size: 19px;
  }
  .vs-shield[class*='shield-'] {
    width: 48px;
    height: 38px;
  }
  .vs-tier {
    padding-block: 6px;
    font-size: 13px;
  }
  .vs-stats {
    gap: 4px;
    margin: 0;
  }
  .vs-stat {
    grid-template-columns: 24px auto;
    column-gap: 9px;
  }
  .vs-them .vs-stat {
    grid-template-columns: auto 24px;
  }
  .vs-stat img {
    width: 24px;
    height: 24px;
  }
  .vs-stat b {
    font-size: 18px;
  }
  .vs-stat small {
    font-size: 10px;
  }
  .vs-ready {
    height: 32px;
    font-size: 14px;
  }
  .vs-ready .ic {
    width: 21px;
    height: 21px;
  }
  .vs-badge {
    width: 104px;
    height: 180px;
  }
  .vs-count {
    font-size: 96px;
  }
  .vs-them.waiting .vs-wait {
    top: 14px;
    gap: 12px;
  }
}
/* Play while your friend hasn't come in: bright, the invite under it */
body.vs-friend .cta-btn:disabled {
  opacity: 1;
  box-shadow: 0 14px 40px rgba(217, 245, 66, 0.22);
}
.cta-invite {
  display: none;
}
body.room-empty .cta .cta-invite {
  display: block;
}
body.room-empty .cta p:not(.cta-invite) {
  display: none;
}
body.vs-friend .court-info {
  padding: 18px 9px 6px;
}
body.vs-friend .court-info b {
  font-size: 15px;
}
body.vs-friend .court-info small {
  display: none;
}
body.vs-friend .court-card .check {
  bottom: 6px;
  right: 6px;
}
body.vs-friend .rackets {
  grid-auto-rows: 58px;
}


/* Big screens: the lobby, its windows and notices grow with the screen
   (--ui-zoom, set in index.html; 1 up to about 1500×960). */
.topbar,
.menu,
.overlay > .card,
.notice {
  zoom: var(--ui-zoom, 1);
}

/* =====================================================================
   Match setup, by mode: the mode tabs first; then
     Career:  your next rival · you | rackets
     Solo:    you, alive (two rows) | court · difficulty and games · rackets
     Friend:  you | court · the room · games | rackets
     Guest:   you · the room · rackets
   ===================================================================== */
.setup-grid {
  grid-auto-flow: row dense;
}
.setup-grid > .box {
  grid-column: 1 / -1;
}
.setup-grid > #box-player:not(.wide),
body.vs-friend .setup-grid > #box-rules {
  grid-column: span 5;
}
.setup-grid > #box-court,
.setup-grid > #box-rules,
body.vs-career .setup-grid > #box-racket,
body.vs-friend .setup-grid > #box-racket {
  grid-column: span 7;
}
body.vs-career .setup-grid > #career-box {
  order: -1; /* right below the mode tabs */
}
body.has-stage .setup-grid > #box-player {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
/* The mode: three big tabs across, always in the same place */
.setup-grid > #field-opp {
  order: -1;
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  background: none;
}
#field-opp > .box-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.modes {
  gap: 10px;
}
.modes .mode-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.modes .mode-card .mode-ic {
  flex: none;
  width: 28px;
  height: 28px;
}
.modes .mode-card > span {
  min-width: 0;
}
.modes .mode-card b {
  font-size: 20px;
}
.modes .mode-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The chosen one: lime edge and glow (no check: the text needs the room) */
.modes .mode-card.on {
  background: linear-gradient(100deg, rgba(217, 245, 66, 0.18), rgba(217, 245, 66, 0.05));
  box-shadow: 0 0 22px rgba(217, 245, 66, 0.12);
}
.modes .mode-card .check {
  display: none;
}
/* With a friend your streak is on your card in the room. */
body.vs-friend #box-player .streak {
  display: none;
}
@media (max-width: 1080px) {
  .setup-grid > .box,
  .setup-grid > #box-player:not(.wide),
  body.vs-friend .setup-grid > #box-rules,
  .setup-grid > #box-court,
  .setup-grid > #box-rules,
  body.vs-career .setup-grid > #box-racket,
  body.vs-friend .setup-grid > #box-racket {
    grid-column: 1 / -1;
  }
  body.has-stage .setup-grid > #box-player {
    grid-row: auto;
  }
  body.has-stage .court-info small {
    display: inline;
  }
}

/* =====================================================================
   Windows (every modal): one look, square-ish and flat. A dark, blurred
   backdrop; a crisp card with the brand's lime strip at the top left; 6 px
   corners on the card and its tiles, 4 px on fields, tabs and tags.
   ===================================================================== */
.overlay:not(#menu) {
  background: rgba(3, 9, 17, 0.8);
  backdrop-filter: blur(6px);
}
.overlay > .card {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, #10243d 0, #0b1a2d 140px, #0a1727 100%);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.overlay > .card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 3px;
  border-top-left-radius: 5px;
  background: var(--ball);
  pointer-events: none;
}
.overlay.show > .card {
  animation: window-in 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes window-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.show > .card {
    animation: none;
  }
}
/* Close buttons, tabs and segmented choices */
.overlay .rank-close,
.overlay .icon-btn,
.overlay .seg,
.overlay .seg button {
  border-radius: 4px;
}
/* Tiles inside the windows */
.kit-card,
.avatar-btn.look-avatar,
.look-preview,
.help-steps li,
.help-levels > div,
.rank-list li,
.rank-me,
.map-tournament,
.coach,
.career-reward,
.unlock-ability {
  border-radius: 6px;
}
.unlock-ability .ic,
.kit-card .ic,
.look-tag,
.look-colors i {
  border-radius: 3px;
}
.spot .block {
  border-radius: 4px 4px 0 0;
}
/* Your account: square tabs, fields and tags */
.account-card {
  border-radius: 6px;
}
.acct-tabs,
.acct-tabs button,
.acct-thumb {
  border-radius: 4px;
}
.acct-perks li {
  border-radius: 4px;
}
#account .control input,
#account .control select,
#account .acct-error,
.acct-form input:not([type='checkbox']),
.acct-form select {
  border-radius: 4px;
}
#account .acct-eye {
  border-radius: 4px;
}

/* =====================================================================
   Progression: frames, level badges, the level chip, the streak calendar,
   XP on the result screen, the editor's tabs and the ranking's player card
   ===================================================================== */
/* Player card frames (progression.js FRAMES) and the ranking's top 3: the
   artwork around the avatar (public/img/frames, npm run frames), its middle
   empty so each player's own avatar and skin show. --fw / --fh: the picture's
   size in hole widths (printed by the script); the hole is the avatar. */
.frame-bronze {
  --frame: url('../img/frames/bronze.webp');
  --fw: 1.42;
  --fh: 1.446;
}
.frame-silver {
  --frame: url('../img/frames/silver.webp');
  --fw: 1.446;
  --fh: 1.491;
}
.frame-gold {
  --frame: url('../img/frames/gold.webp');
  --fw: 1.42;
  --fh: 1.473;
}
.frame-racha {
  --frame: url('../img/frames/racha.webp');
  --fw: 1.415;
  --fh: 1.446;
}
.frame-hero {
  --frame: url('../img/frames/hero.webp');
  --fw: 1.754;
  --fh: 1.567;
}
.frame-top1 {
  --frame: url('../img/frames/top1.webp');
  --fw: 2.393;
  --fh: 1.674;
}
.frame-top2 {
  --frame: url('../img/frames/top2.webp');
  --fw: 2.295;
  --fh: 1.656;
}
.frame-top3 {
  --frame: url('../img/frames/top3.webp');
  --fw: 2.313;
  --fh: 1.643;
}
.face[class*='frame-']:not(.frame-none) {
  border-color: transparent;
  box-shadow: none;
}
.face[class*='frame-']:not(.frame-none)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(var(--fw) * 102%);
  height: calc(var(--fh) * 102%);
  transform: translate(-50%, -50%);
  background: var(--frame) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* The Racha frame's ball is bottom right: the level goes left. */
.face.frame-racha .lv {
  right: auto;
  left: -6px;
}
/* Room for the frames around a face */
.rank-list li .face[class*='frame-']:not(.frame-none),
.rank-me .face[class*='frame-']:not(.frame-none) {
  margin: 0 6px;
}
.rank-me .face[class*='frame-top']:not(.frame-none) {
  width: 38px;
  height: 38px;
  margin: 0 28px 0 24px;
}
.rank-me .face[class*='frame-top'] .lv {
  display: none;
}
/* The podium: the top 3's own frames (the 1st one has the crown) */
.spot .face[class*='frame-top'] {
  margin: 20px 0 22px;
}
.spot.p1 .face[class*='frame-top'] {
  margin: 28px 0 30px;
}
.spot .face[class*='frame-top'] .lv {
  display: none;
}
/* The level on the ranking's card, in the player's frame color */
.tip-level.frame-bronze b {
  box-shadow: 0 0 0 2px #b8733a;
}
.tip-level.frame-silver b {
  box-shadow: 0 0 0 2px #c9d3dd;
}
.tip-level.frame-gold b {
  box-shadow: 0 0 0 2px #e0b23c;
}
.tip-level.frame-hero b {
  box-shadow: 0 0 0 2px #07121f, 0 0 0 4px var(--ball);
}
.tip-level.frame-racha b {
  box-shadow: 0 0 0 2px #ff6a1a;
}
/* Level badge on a face */
.face .lv {
  position: absolute;
  z-index: 2;
  right: -6px;
  bottom: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font: 800 italic 11px / 18px var(--display);
  text-align: center;
  box-shadow: 0 0 0 2px #0b1a2d;
}

/* Lobby: your level chip, next to the streak's */
.streak {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.level-chip {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(217, 245, 66, 0.35);
  background: rgba(217, 245, 66, 0.08);
  color: var(--text);
  overflow: hidden;
  cursor: pointer;
}
.level-chip[hidden] {
  display: none;
}
.level-chip b {
  font: 800 italic 16px/1 var(--display);
  color: var(--ball);
  white-space: nowrap;
}
.level-chip .tier {
  font: 700 11px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.level-chip .next {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  white-space: nowrap;
}
.level-chip .next small {
  font: 600 12px/1 var(--text-font);
  color: var(--muted);
}
.level-chip:hover {
  background: rgba(217, 245, 66, 0.14);
}
.level-chip .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.level-chip .bar i {
  display: block;
  height: 100%;
  background: var(--ball);
}
.streak-chip[hidden] {
  display: none;
}
.streak .streak-chip {
  border-radius: 6px;
}

/* The streak card's first week */
.streak-cal {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.streak-cal li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  padding: 5px 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.streak-cal li small {
  font: 800 italic 13px/1 var(--display);
  color: var(--muted);
}
.streak-cal li.done small {
  color: #ffb06a;
}
.streak-cal li.done::after {
  content: '✓';
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ff7a1a;
  color: #fff;
  font: 800 9px/1 var(--text-font);
}
.streak-card {
  width: 310px;
  max-width: calc(100vw - 32px);
  border-radius: 6px;
}
.streak-prize {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(255, 122, 26, 0.1);
  font-weight: 700;
}
.streak-card .streak-prize {
  margin-top: 8px;
}
.streak-cal li.done {
  border-color: rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.12);
}
.streak-cal li.now {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}
/* Reward pictures (calendar, level track) */
.rw-color {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.rw-racket {
  width: 18px;
  height: 22px;
  object-fit: contain;
}
.rw-kit .kit-art {
  display: block;
  width: 20px;
  height: auto;
}
.rw-frame {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--frame) center / contain no-repeat, radial-gradient(circle, #1f3a66 34%, transparent 35%);
}
.rw-xp {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 18px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(217, 245, 66, 0.16);
  color: var(--ball);
  font: 800 11px/1 var(--display);
  font-style: normal;
}

/* Result screen: the XP you got and your level's bar */
.over-xp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 10px;
  margin: -8px auto 16px;
  max-width: 340px;
  text-align: left;
}
.over-xp[hidden] {
  display: none;
}
.over-xp .xp-gain {
  font: 800 italic 20px/1 var(--display);
  color: var(--ball);
}
.over-xp .xp-level {
  grid-column: 3;
  font: 800 italic 16px/1 var(--display);
  text-transform: uppercase;
}
.over-xp .xp-bar {
  grid-column: 1 / -1;
}
.over-xp small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}
.over-xp.up .xp-level {
  color: var(--ball);
  animation: level-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes level-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
.xp-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.xp-bar i {
  display: block;
  width: var(--p);
  height: 100%;
  background: linear-gradient(90deg, #9fd91a, var(--ball));
  transition: width 0.8s ease;
}

/* The editor: four tabs, panes on the left */
.look-tabs {
  flex: none;
}
.look-pane[hidden] {
  display: none;
}
.look-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.look-avatar-row .look-avatars {
  flex: 1;
}
.look-avatar-row .avatar-btn.look-avatar {
  padding: 6px 12px 6px 6px;
  font-size: 18px;
}
.look-avatar-row .avatar-btn.look-avatar img {
  width: 48px;
  height: 48px;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.swatch {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--c);
  transition: transform 0.12s, border-color 0.12s;
}
.swatch:hover {
  transform: translateY(-2px);
}
.swatch.on {
  border-color: var(--ball);
  box-shadow: 0 0 0 2px rgba(217, 245, 66, 0.35);
}
.swatch.skin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.swatch.locked {
  opacity: 0.45;
}
.swatch .ic {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.look-kits {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 8px;
}
.look-kits .kit-card {
  padding: 8px 4px 7px;
  gap: 3px;
}
.look-kits .kit-card .kit-art {
  width: 52%;
}
.look-kits .kit-card span {
  font-size: 12px;
}
.garment-tabs {
  margin-bottom: 10px;
}
.garment-tabs button {
  padding: 7px 8px;
  font-size: 13px;
}
.color-swatches {
  gap: 5px;
}
/* Rackets: four across */
.look-rackets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.look-racket {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px 9px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 70%);
  color: var(--text);
}
.look-racket img {
  height: 92px;
  width: auto;
  object-fit: contain;
}
.look-racket span {
  font: 700 13px/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.look-racket:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.look-racket.on {
  border-color: var(--ball);
  background: radial-gradient(circle at 50% 40%, rgba(217, 245, 66, 0.2), rgba(217, 245, 66, 0.04) 70%);
}
.look-racket.locked img {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.look-racket .ic {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--warn);
}
.look-ability {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px !important;
}
.look-ability .ic {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.look-ability b {
  color: var(--text);
}
/* Card: your level, what's next, frames */
.level-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.level-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.level-top b {
  font: 800 italic 30px/1 var(--display);
  color: var(--ball);
}
.level-top span {
  font: 700 14px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.level-top small {
  margin-left: auto;
  color: var(--muted);
}
.level-next {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.level-next li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.level-next li small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
}
.frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.frame-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 4px 8px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}
.frame-btn .face {
  width: 58px;
  height: 58px;
  margin: 10px 0 6px;
  border-color: rgba(255, 255, 255, 0.25);
}
.frame-btn small {
  font-size: 11px;
  font-weight: 700;
}
.frame-btn.on {
  border-color: var(--ball);
}
.frame-btn.locked .face,
.frame-btn.locked small {
  opacity: 0.45;
}
.frame-btn > .ic {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  color: var(--warn);
}
/* Your player card, in place of the player on the Card tab */
.player-card {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 300px;
  text-align: center;
}
.player-card[hidden] {
  display: none;
}
.player-stage[hidden] {
  display: none;
}
.face.big {
  width: 150px;
  height: 150px;
  border-width: 4px;
}
.face.big .lv {
  right: 2px;
  bottom: 2px;
  min-width: 34px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
}
.card-name {
  display: flex;
  align-items: center;
  margin: 12px 0 0;
  font: 800 italic 30px/1 var(--display);
  text-transform: uppercase;
}
.card-tier {
  margin: 0;
  font: 700 15px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ball);
}
.card-tier .flame {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.card-frame {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
/* Ranking: a player's card when you point at them */
.rank-tip {
  position: fixed;
  z-index: 40;
  display: grid;
  grid-template-columns: 150px 210px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(120deg, #13304f, #0a1828 70%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: tip-in 0.18s ease-out;
}
.rank-tip[hidden] {
  display: none;
}
.rank-tip::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 3px;
  background: var(--ball);
}
@keyframes tip-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.player-stage.tip-stage {
  height: 230px;
  margin: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 85%, rgba(217, 245, 66, 0.16), transparent 62%);
}
.tip-stage .stage-figure {
  height: 82%;
  bottom: 5%;
}
.tip-info {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 16px 14px 4px;
}
.tip-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  font: 700 11px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tip-level b {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--ball);
  color: var(--navy);
  font: 800 italic 16px/1 var(--display);
}
.tip-name {
  display: flex;
  align-items: center;
  margin: 0;
  font: 800 italic 22px/1 var(--display);
  text-transform: uppercase;
}
.tip-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tip-tier {
  margin: 0;
  font: 700 12px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ball);
}
.tip-tier .flame {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
.tip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 6px;
}
.tip-stats div {
  display: grid;
  gap: 2px;
}
.tip-stats b {
  font: 800 italic 20px/1 var(--display);
}
.tip-stats b i {
  margin-left: 4px;
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
}
.tip-stats small {
  font-size: 11px;
  color: var(--muted);
}
/* More rackets in the lobby (Carbon, Gold) */
.rackets {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.look-pane {
  display: flex;
  flex-direction: column;
}
.look-pane .look-label:not(:first-child) {
  margin-top: 20px;
}
.look-pane .look-kits {
  flex: none;
}

/* The admin dashboard's door, for admin accounts */
.top-link.top-admin {
  color: var(--ball);
  text-decoration: none;
}
.top-link.top-admin[hidden] {
  display: none;
}

.map-tournament header em.map-countdown {
  color: #6fcf4a;
  font-variant-numeric: tabular-nums;
}

/* Play without a phone: the QR panel calls for attention */
.panel.connect.flash {
  animation: need-phone 1.6s ease-out 2;
}
@keyframes need-phone {
  0%,
  100% {
    box-shadow: none;
  }
  30% {
    box-shadow: 0 0 0 3px var(--ball), 0 0 40px rgba(217, 245, 66, 0.45);
  }
}

/* =====================================================================
   Lobby, game UI: big step numbers, the modes as picture cards, the
   circuit as a strip of tournaments, your card with your portrait
   ===================================================================== */
/* Panel heads: a huge faded number behind the title */
.panel-head.game-head {
  position: relative;
  display: block;
  min-height: 66px;
  margin-bottom: 16px;
}
.game-head .step-num {
  position: absolute;
  left: -8px;
  top: -18px;
  font: 800 italic 112px/1 var(--display);
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
}
.game-head .head-text {
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 104px;
}
.panel-head.game-head h2 {
  margin: 0;
  font-size: 34px;
  line-height: 0.95;
}
.game-head h2 em {
  display: block;
  font-style: italic;
  font-size: 1.3em;
  color: var(--ball);
}
.game-head p {
  margin: 4px 0 0;
  font-size: 15px;
}
.head-kicker {
  font: 700 13px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c6d3e1;
}

/* The modes: three picture cards (public/img/modes, npm run mode-images) */
.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.modes .mode-card.art {
  position: relative;
  isolation: isolate;
  display: block;
  height: auto;
  aspect-ratio: 2.3;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: #0a1828;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mode-card.art .mode-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.72);
  transition: transform 0.45s ease, filter 0.2s;
}
.mode-card.art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(5, 12, 22, 0.9) 0%, rgba(5, 12, 22, 0.45) 40%, rgba(5, 12, 22, 0) 70%),
    linear-gradient(90deg, rgba(5, 12, 22, 0.55), rgba(5, 12, 22, 0) 60%);
}
.mode-card.art .mode-text {
  position: absolute;
  left: 14px;
  right: 40px;
  bottom: 11px;
  display: grid;
  gap: 3px;
}
.modes .mode-card.art b {
  font: 800 italic 27px/0.95 var(--display);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.modes .mode-card.art small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.modes .mode-card.art:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
}
.mode-card.art:hover .mode-art {
  transform: scale(1.05);
  filter: saturate(1) brightness(0.88);
}
.modes .mode-card.art.on {
  border-color: var(--ball);
  background: #0a1828;
  box-shadow: 0 0 0 1px var(--ball), 0 0 28px rgba(217, 245, 66, 0.35);
}
.mode-card.art.on .mode-art {
  filter: none;
}
.modes .mode-card.art.on b {
  color: var(--ball);
}
.modes .mode-card.art .check {
  position: absolute;
  top: 9px;
  right: 9px;
  display: none;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--ball);
  color: var(--navy);
  stroke-width: 3;
}
.modes .mode-card.art.on .check {
  display: block;
}

/* The circuit: tournaments on a line, with their stars or their countdown */
#career-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b1a2c;
}
#career-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../img/modes/career.webp') 80% 30% / cover;
  opacity: 0.6;
}
#career-box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 18, 31, 0.97) 0%, rgba(8, 18, 31, 0.86) 50%, rgba(8, 18, 31, 0.6) 100%);
}
.career-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.career-heading {
  display: grid;
  gap: 3px;
  margin-right: auto;
  min-width: 0;
}
.career-heading small {
  color: var(--muted);
  font-size: 13px;
}
.career-total {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.career-total b {
  font: 800 italic 28px/1 var(--display);
}
.career-total .star {
  color: #ffc21a;
  font-size: 22px;
  font-style: normal;
}
.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 8px 14px;
  border: 2px solid var(--ball);
  border-radius: 6px;
  background: rgba(7, 18, 31, 0.6);
  color: var(--text);
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.map-btn .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}
.map-btn:hover {
  background: var(--ball);
  color: var(--navy);
}
#career-box .career-next {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}
.cs-next {
  flex: 0 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cs-next .rival-pic {
  width: 54px;
  height: 54px;
}
.cs-next > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.cs-next small {
  overflow: hidden;
  font: 700 11px/1.1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ball);
}
.cs-next b {
  display: flex;
  align-items: center;
  overflow: hidden;
  font: 800 italic 21px/1 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-next em {
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.cs-nodes {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-nodes::before {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(217, 245, 66, 0.7) 0 6px, transparent 6px 12px);
}
.node {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  text-align: center;
}
.node-pic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: #16304f center / cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.node[data-surface='hard'] .node-pic {
  background-image: url('../img/courts/hard.webp');
}
.node[data-surface='clay'] .node-pic {
  background-image: url('../img/courts/clay.webp');
}
.node[data-surface='grass'] .node-pic {
  background-image: url('../img/courts/grass.webp');
}
/* The grand final: the trophy from the career picture */
.node.final .node-pic {
  border-color: #e0b23c;
  background-image: url('../img/modes/career.webp');
  background-size: 560% auto;
  background-position: 91% 4%;
}
.node b {
  font: 700 12px/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.node-stars {
  display: flex;
  gap: 1px;
  font-size: 13px;
  line-height: 1;
}
.node-stars .star {
  font-style: normal;
  color: rgba(255, 255, 255, 0.22);
}
.node-stars .star.on {
  color: #ffc21a;
}
.node.won .node-pic {
  border-color: var(--ball);
}
.node.now .node-pic {
  border-color: var(--ball);
  animation: node-now 1.8s ease-in-out infinite;
}
@keyframes node-now {
  50% {
    box-shadow: 0 0 0 5px rgba(217, 245, 66, 0.22), 0 0 22px rgba(217, 245, 66, 0.55);
  }
}
.node.locked .node-pic,
.node.soon .node-pic {
  filter: grayscale(0.55) brightness(0.62);
}
.node.locked .node-pic .ic {
  width: 18px;
  height: 18px;
  color: #fff;
}
.node.locked b,
.node.soon b {
  color: var(--muted);
}
.node-count {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(111, 207, 74, 0.18);
  color: #7fe05a;
  font: 800 italic 12px/1 var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Your card: your portrait in your frame, your name, level and streak */
#box-player .player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.lobby-portrait {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lobby-portrait:has(.face[class*='frame-']:not(.frame-none)) {
  margin: 8px 16px;
}
.lobby-portrait .face {
  width: 86px;
  height: 86px;
  border-width: 3px;
  transition: transform 0.15s;
}
.lobby-portrait:hover .face {
  transform: scale(1.04);
}
.lobby-portrait .face .lv {
  right: -4px;
  bottom: -2px;
  min-width: 24px;
  height: 22px;
  font-size: 14px;
  line-height: 22px;
}
.lobby-portrait .edit-badge {
  z-index: 3;
  top: -2px;
  right: -2px;
  bottom: auto;
  width: 24px;
  height: 24px;
}
.player-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#box-player .name-field {
  flex: 1 1 100%;
  padding: 0 4px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: none;
}
#box-player .name-field:focus-within {
  border-bottom-color: var(--ball);
}
#box-player #player-name {
  padding: 4px 0 6px;
  font: 800 italic 26px/1 var(--display);
  letter-spacing: 0.01em;
}
#box-player .name-field .field-ic {
  width: 16px;
  height: 16px;
}
#box-player .name-status:empty {
  display: none;
}
#box-player .streak {
  display: contents;
}
#box-player .streak[hidden] {
  display: none;
}
#box-player .streak-card {
  top: calc(100% + 6px);
}
.customize-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.15s, background 0.15s;
}
.customize-btn .ic {
  width: 15px;
  height: 15px;
  color: var(--ball);
}
.customize-btn:hover {
  border-color: var(--ball);
  background: rgba(217, 245, 66, 0.1);
}
/* More room for the picture cards and your card */
.menu {
  width: min(1240px, 100%);
}
.menu-grid {
  grid-template-columns: minmax(300px, 360px) 1fr;
}
.modes .mode-card.art {
  aspect-ratio: 2.1;
}
/* Fitting a 900 px high screen in every mode */
.panel-head.game-head {
  min-height: 56px;
  margin-bottom: 12px;
}
.game-head .step-num {
  top: -14px;
  font-size: 96px;
}
.game-head .head-text {
  padding-left: 92px;
}
.panel-head.game-head h2 {
  font-size: 30px;
}
.game-head h2 em {
  font-size: 1.25em;
}
.modes .mode-card.art {
  aspect-ratio: 2.35;
}
.lobby-portrait .face {
  width: 72px;
  height: 72px;
}
#box-player .player-row {
  gap: 14px;
}
#box-player #player-name {
  font-size: 24px;
  padding: 2px 0 4px;
}
/* Solo: your player a little shorter, and the rackets */
body.has-stage #box-player .player-stage {
  min-height: 150px;
  margin-top: 4px;
}
body:not(.vs-friend):not(.vs-career) .rackets {
  grid-auto-rows: 76px;
}
/* Solo: two columns under the modes, your card down the left (name, level,
   your player), the match on the right (court, difficulty, racket). */
body.vs-solo .setup-grid > #field-opp {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.vs-solo .setup-grid > #box-player {
  display: flex;
  flex-direction: column;
  grid-column: 1 / span 5;
  grid-row: 2 / span 3;
}
body.vs-solo #box-player .player-stage {
  flex: 1;
  min-height: 170px;
}
body.vs-solo .setup-grid > #box-court {
  grid-column: 6 / -1;
  grid-row: 2;
}
body.vs-solo .setup-grid > #box-rules {
  grid-column: 6 / -1;
  grid-row: 3;
}
body.vs-solo .setup-grid > #box-racket {
  grid-column: 6 / -1;
  grid-row: 4;
}
body.vs-solo .rackets {
  grid-auto-rows: 70px;
}
/* With a friend: the room right under the modes (it shows you and your
   friend), then the court and your racket side by side. */
body.vs-friend .setup-grid > #field-opp {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.vs-friend .setup-grid > #versus {
  grid-column: 1 / -1;
  grid-row: 2;
}
body.vs-friend .setup-grid > #box-player,
body.vs-friend .setup-grid > #box-rules {
  display: none;
}
body.vs-friend .setup-grid > #box-court {
  grid-column: 1 / span 6;
  grid-row: 3;
}
body.vs-friend .setup-grid > #box-racket {
  grid-column: 7 / -1;
  grid-row: 3;
}
body.vs-friend #box-court .courts {
  height: 100%;
}
@media (max-width: 1080px) {
  body.vs-solo .setup-grid > #box-player,
  body.vs-solo .setup-grid > #box-court,
  body.vs-solo .setup-grid > #box-rules,
  body.vs-solo .setup-grid > #box-racket,
  body.vs-friend .setup-grid > #box-court,
  body.vs-friend .setup-grid > #box-racket {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* The circuit's own picture behind it (public/img/lobby-circuit.webp, from
   brand/source/circuit-background.png: cwebp -q 80 -resize 1600 0), dark on
   the left where the text is, open on the right. */
#career-box::before {
  background: url('../img/lobby-circuit.webp') 60% 42% / cover;
  opacity: 1;
}
#career-box::after {
  background:
    linear-gradient(90deg, rgba(8, 18, 31, 0.96) 0%, rgba(8, 18, 31, 0.82) 38%, rgba(8, 18, 31, 0.45) 72%, rgba(8, 18, 31, 0.3) 100%),
    linear-gradient(0deg, rgba(8, 18, 31, 0.55), rgba(8, 18, 31, 0) 60%);
}
/* The lobby's section titles: plain words, no icons */
.setup .box-label > .ic {
  display: none;
}
#career-box .box-label {
  font: 800 italic 22px/1 var(--display);
  letter-spacing: 0.02em;
  color: var(--text);
}

/* Finding a rival: the countdown ring (10 s searching, then 3, 2, 1) */
.mm-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
}
.mm-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.mm-ring circle {
  fill: none;
  stroke-width: 3;
}
.mm-ring .track {
  stroke: rgba(255, 255, 255, 0.12);
}
.mm-ring .left {
  stroke: #9fb2c6;
  stroke-dasharray: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}
.mm-count {
  font: 800 italic 19px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.mm-status.found .mm-ring .left {
  stroke: var(--ball);
  transition: stroke-dashoffset 0.9s linear;
}
.mm-status.found .mm-count {
  color: var(--ball);
  animation: mm-beat 1s ease-out infinite;
}
@keyframes mm-beat {
  0% {
    transform: scale(1.35);
  }
  40% {
    transform: scale(1);
  }
}

/* Your photo: a third tile next to the two avatars */
.look-avatar-row .look-avatars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.photo-btn .photo-face {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 50% 35%, #294a70, #13263f);
}
.photo-btn .photo-face .ic {
  width: 22px;
  height: 22px;
  color: var(--ball);
}
.photo-btn .photo-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-btn .photo-face img:not([hidden]) + .ic {
  display: none;
}
.photo-btn.on .photo-face {
  border-style: solid;
  border-color: var(--ball);
}
.photo-btn > span:last-child {
  display: grid;
  gap: 2px;
}
.avatar-btn.look-avatar.photo-btn b {
  font: 800 italic 18px/1 var(--display);
}
.avatar-btn.look-avatar.photo-btn small {
  font: 600 11px/1 var(--text-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
/* The three portraits on one line, the skin tones below */
.look-avatar-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.look-avatar-row .look-avatars {
  flex: none;
}

/* =====================================================================
   A win, celebrated (victory.js): a flash, light rays, the title bouncing
   in with a shine, confetti; the splash clears so the result card shows
   ===================================================================== */
.victory {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.victory-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #fff, rgba(255, 255, 255, 0.6) 40%, rgba(217, 245, 66, 0.25));
  opacity: 0;
  animation: victory-flash 0.5s ease-out;
}
@keyframes victory-flash {
  12% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
.victory-rays {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 220vmax;
  height: 220vmax;
  margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(rgba(217, 245, 66, 0.13) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.6) 22%, transparent 48%);
  mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.6) 22%, transparent 48%);
  animation:
    victory-spin 14s linear infinite,
    victory-in 0.5s ease-out;
  transition: opacity 0.6s ease;
}
@keyframes victory-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes victory-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
.victory-text {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 8vh;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.victory-title {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(64px, 13vw, 210px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #d9f542;
  -webkit-text-stroke: 3px #07121f;
  paint-order: stroke fill;
  text-shadow:
    0 0 28px rgba(217, 245, 66, 0.65),
    0 8px 0 #07121f,
    0 18px 40px rgba(0, 0, 0, 0.55);
  animation:
    victory-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both,
    victory-pulse 1.6s ease-in-out 0.9s infinite;
}
/* A shine sweeping across the letters */
.victory-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.95) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: victory-shine 1.8s ease-in-out 0.6s infinite;
}
@keyframes victory-pop {
  0% {
    opacity: 0;
    transform: scale(3) rotate(-8deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.92) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
}
@keyframes victory-pulse {
  50% {
    transform: scale(1.05) rotate(-3deg);
  }
  0%,
  100% {
    transform: scale(1) rotate(-3deg);
  }
}
@keyframes victory-shine {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -60% 0;
  }
}
.victory-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 64px);
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  animation: victory-rise 0.6s ease-out 0.45s both;
}
@keyframes victory-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.victory-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The splash clears for the result card; the confetti keeps falling */
.victory.out .victory-text {
  opacity: 0;
  transform: scale(1.15) translateY(-6vh);
}
.victory.out .victory-rays,
.victory.out .victory-flash {
  opacity: 0;
}
.victory.gone {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.victory.calm .victory-rays,
.victory.calm .victory-flash {
  display: none;
}
.victory.calm .victory-title {
  animation: victory-rise 0.6s ease-out both;
}
.victory.calm .victory-title::after {
  animation: none;
}
body.celebrating #over > .card {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
}
#over > .card {
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* =====================================================================
   Seasonal event (main.js openEvent): the poster, with a real button where
   its drawn one was, and your pumpkins under it
   ===================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.event-pop {
  z-index: 35;
  background: radial-gradient(ellipse at center, rgba(30, 10, 50, 0.72), rgba(6, 4, 14, 0.94));
}
.event-card {
  position: relative;
  flex: none;
  /* The poster's own shape (2:3), as tall as the screen allows */
  width: min(100%, calc(min(calc(92vh / var(--ui-zoom, 1)), 900px) * 2 / 3));
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  overflow: hidden;
  container-type: inline-size;
  box-shadow:
    0 0 0 1px rgba(255, 138, 26, 0.35),
    0 0 60px rgba(155, 77, 255, 0.35),
    0 30px 80px rgba(0, 0, 0, 0.6);
}
.event-pop.show .event-card {
  animation: event-in 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@keyframes event-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(14px);
  }
}
.event-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-x {
  position: absolute;
  top: 2.4%;
  right: 3.4%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(8, 6, 18, 0.6);
  color: #fff;
  backdrop-filter: blur(4px);
}
.event-x:hover {
  background: rgba(8, 6, 18, 0.85);
  border-color: rgba(255, 255, 255, 0.5);
}
.event-x .ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
/* Sizes in cqw (the card's width), so it all scales with the poster */
.event-foot {
  position: absolute;
  left: 0;
  right: 0;
  top: 83.6%;
  display: grid;
  justify-items: center;
  gap: 1.6cqw;
}
.event-go {
  width: 61%;
  height: 12.7cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  padding: 0;
  border: 0.5cqw solid #ffd27a;
  border-radius: 2.6cqw;
  background: linear-gradient(180deg, #ffc23d, #ff8a1a 55%, #f26a0c);
  color: #1a0f05;
  font-family: var(--display);
  font-weight: 800;
  font-size: 5.6cqw;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 3cqw rgba(255, 138, 26, 0.75),
    0 0 9cqw rgba(255, 106, 12, 0.4),
    inset 0 0.4cqw 0 rgba(255, 255, 255, 0.45);
  animation: event-glow 2.2s ease-in-out infinite;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.event-go .ic {
  width: 6cqw;
  height: 6cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.event-go:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}
.event-go:active {
  transform: scale(0.98);
}
.event-go:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@keyframes event-glow {
  50% {
    box-shadow:
      0 0 4.5cqw rgba(255, 138, 26, 0.95),
      0 0 12cqw rgba(255, 106, 12, 0.55),
      inset 0 0.4cqw 0 rgba(255, 255, 255, 0.45);
  }
}
.event-progress {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  color: #f3e8ff;
}
.event-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.2cqw;
}
.event-days li {
  width: 7cqw;
  height: 7cqw;
}
.pumpkin {
  display: block;
  width: 100%;
  height: 100%;
}
/* Not lit yet: a dim pumpkin, outlined */
.pumpkin .body {
  fill: rgba(255, 138, 26, 0.2);
  stroke: rgba(255, 176, 96, 0.65);
  stroke-width: 1.2;
}
.pumpkin .stem {
  fill: rgba(140, 190, 110, 0.55);
}
.pumpkin .face {
  fill: rgba(10, 6, 16, 0.85);
}
.event-days li.lit {
  filter: drop-shadow(0 0 1.6cqw rgba(255, 138, 26, 0.9));
}
.event-days li.lit .body,
.event-chip .body {
  fill: #ff8a1a;
  stroke: #ffc36b;
}
.event-days li.lit .stem,
.event-chip .stem {
  fill: #5a9a34;
}
.event-days li.lit .face {
  fill: #ffe066;
}
/* The one you light today */
.event-days li.next {
  animation: pumpkin-wait 1.6s ease-in-out infinite;
}
.event-days li.next .body {
  stroke: #ffb347;
  stroke-dasharray: 3 2;
}
@keyframes pumpkin-wait {
  50% {
    transform: translateY(-0.6cqw);
    filter: drop-shadow(0 0 1.2cqw rgba(255, 138, 26, 0.55));
  }
}
.event-status {
  margin: 0;
  display: grid;
  gap: 0.4cqw;
  font-size: 3.1cqw;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.event-status span {
  font-weight: 700;
}
.event-status small {
  color: #c9a8ff;
  font-size: 2.7cqw;
}
@media (prefers-reduced-motion: reduce) {
  .event-go,
  .event-days li.next,
  .event-pop.show .event-card {
    animation: none;
  }
}
/* The pumpkin next to your streak: the event's days so far */
.event-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 138, 26, 0.55);
  background: linear-gradient(90deg, rgba(64, 22, 96, 0.92), rgba(42, 16, 30, 0.92));
  color: #ffd9a8;
  font: 800 13px/1 var(--text-font);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(155, 77, 255, 0.35);
  transition: border-color 0.15s;
}
.event-chip[hidden] {
  display: none;
}
.event-chip:hover {
  border-color: #ffb347;
}
.event-chip .pumpkin {
  width: 20px;
  height: 20px;
}
.event-chip .face {
  fill: #2a1206;
}
/* The play button lit up a moment (the event's button sends you to it) */
#play.nudge {
  animation: play-nudge 1.2s ease-out 2;
}
@keyframes play-nudge {
  20% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 6px rgba(217, 245, 66, 0.35),
      0 0 30px rgba(217, 245, 66, 0.6);
  }
}

/* However many rackets there are (an event's too): one row */
.rackets {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* A racket with a flame (Halloween): it burns in the lobby's hand too, a purple
   glow around it that flickers like fire */
.stage-racket[src*='halloween'] {
  animation: racket-flame 1.6s linear infinite;
}
@keyframes racket-flame {
  0%,
  100% {
    filter: drop-shadow(0 0 2px #c9a2ff) drop-shadow(0 0 6px rgba(155, 77, 255, 0.95)) drop-shadow(0 0 14px rgba(128, 50, 240, 0.7));
  }
  18% {
    filter: drop-shadow(0 0 3px #d8b8ff) drop-shadow(0 -2px 9px rgba(170, 95, 255, 1)) drop-shadow(0 -3px 20px rgba(140, 60, 255, 0.85));
  }
  31% {
    filter: drop-shadow(0 0 2px #c9a2ff) drop-shadow(0 0 5px rgba(150, 70, 250, 0.85)) drop-shadow(0 0 11px rgba(128, 50, 240, 0.6));
  }
  52% {
    filter: drop-shadow(0 0 3px #dcc0ff) drop-shadow(0 -2px 10px rgba(175, 100, 255, 1)) drop-shadow(0 -4px 24px rgba(145, 65, 255, 0.9));
  }
  70% {
    filter: drop-shadow(0 0 2px #c9a2ff) drop-shadow(0 0 7px rgba(155, 77, 255, 0.9)) drop-shadow(0 -2px 16px rgba(128, 50, 240, 0.75));
  }
  84% {
    filter: drop-shadow(0 0 3px #d2b0ff) drop-shadow(0 -1px 8px rgba(165, 90, 255, 1)) drop-shadow(0 -3px 19px rgba(135, 55, 245, 0.8));
  }
}

/* Locked rackets keep their secret: a shadow until you win them (admins see them) */
.look-racket.locked img,
.racket-card.locked img {
  filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.45));
  opacity: 0.75;
}
.look-mystery {
  display: block;
  height: 120px;
  margin: 8px 0 2px;
  filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
  opacity: 0.85;
}