*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Arial para todo; Racing Sans One solo en: PLAY, nombre del jugador, GAME OVER,
   JUGAR OTRA VEZ e INICIO. Racing Sans One solo tiene peso normal (sin bold). */
:root {
  --font: Arial, Helvetica, sans-serif;
  --font-display: "Racing Sans One", Arial, Helvetica, sans-serif;
}

body,
button,
input {
  font-family: var(--font);
}

.btn,
.player-name,
.name-panel input,
.gameover h2,
.pause h2,
.leader-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Escenario vertical: ocupa todo el alto y conserva la proporción del fondo (941x1672) */
.stage {
  position: relative;
  height: 100dvh;
  width: min(100vw, calc(100dvh * 941 / 1672));
  margin: 0 auto;
  container-type: size;
  overflow: hidden;
  background: #2a52b8;
}

.screen {
  position: absolute;
  inset: 0;
  background: center bottom / cover no-repeat;
}

.screen--start {
  background-image: url("images/background/Estadio%20retro%20frente%20al%20mar.png");
}

/* Fondo al 75%: una capa negra al 25% sobre el estadio y las nubes
   (debajo del título, el botón y Billie) */
.screen--start::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
  pointer-events: none;
}

/* Oscurece suavemente solo la parte de arriba (cielo y nubes) para que el título resalte */
.screen--start::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(to bottom,
    rgba(8, 18, 60, 0.55) 0%,
    rgba(8, 18, 60, 0.3) 45%,
    rgba(8, 18, 60, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.screen--game {
  cursor: pointer;
}

/* Fondo del juego ampliado un poco desde el montículo (62% del alto), así el pitcher
   no se mueve y home queda más abajo, justo debajo de Billie */
.screen--game::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/background/mainfield.png") center bottom / cover no-repeat;
  transform: scale(1.22);
  transform-origin: 50% 62%;
  pointer-events: none;
}

/* ---------- Nubes ---------- */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* El PNG de la nube es cuadrado con mucho espacio vacío; se recorta al área de la nube */
.cloud {
  position: absolute;
  aspect-ratio: 1215 / 710;
  object-fit: cover;
  object-position: 50% 55.7%;
  animation: cloud-drift var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: translate;
}

.cloud--1 { left: -8%;  top: 6%;  width: 40%; --dur: 6s;  --delay: 0s; }
.cloud--2 { right: -6%; top: 3%;  width: 37%; scale: -1 1; --dur: 7.5s; --delay: -3s; }
.cloud--3 { left: -11%; top: 17%; width: 46%; scale: -1 1; --dur: 7s; --delay: -6s; }
.cloud--4 { right: -10%; top: 24%; width: 45%; --dur: 8s; --delay: -2s; }

@keyframes cloud-drift {
  from { translate: -3cqw 0; }
  to   { translate: 3cqw 0; }
}

/* ---------- Botones (pill) ---------- */
/* Todos los botones: pill roja plana, borde blanco delgado, leve inclinación y sombra difusa */
.btn {
  border: 1cqw solid #fff;
  border-radius: 999px;
  background: #e10600;
  color: #fff;
  padding: 3cqw 8cqw;
  font: 400 6.5cqw / 1 var(--font-display);
  letter-spacing: 0.06em;
  transform: rotate(-3deg);
  box-shadow:
    0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.12),
    0 2cqw 4cqw rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
}

.btn:active {
  transform: rotate(-3deg) scale(0.97);
  box-shadow:
    0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.12),
    0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.2);
}

/* Variante amarilla (mismo amarillo que GAME OVER), con texto oscuro para que se lea */
.btn--yellow {
  background: #ffd23f;
  color: #1a1a1a;
}

/* Botón principal de la pantalla de inicio: más grande, centrado y flotando */
.play-btn {
  position: absolute;
  left: 50%;
  top: 41%;
  width: 40%;
  aspect-ratio: 2.6 / 1;
  padding: 0;
  font-size: 7.5cqw;
  transform: translate(-50%, -50%) rotate(-3deg);
  z-index: 3;
  animation: pill-float 4s ease-in-out infinite;
}

@keyframes pill-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50%      { transform: translate(-50%, -52%) rotate(-2.5deg); }
}

.play-btn:active {
  animation: none;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.97);
}

/* Botón TOP 10: más chico, debajo de JUGAR */
.top-btn {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-3deg);
  padding: 2cqw 5cqw;
  font-size: 4.6cqw;
  z-index: 3;
}

.top-btn:active {
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.97);
}

/* ---------- Créditos ---------- */
/* Enlace discreto en la esquina inferior derecha de la pantalla de inicio */
.credits-link {
  position: absolute;
  right: 3cqw;
  bottom: calc(2.5cqw + env(safe-area-inset-bottom, 0px));
  padding: 1.2cqw 2.4cqw;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 20, 60, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font: 400 3cqw / 1 var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 3;
}

.credits {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 20, 60, 0.6);
  z-index: 5;
}

.credits-card {
  width: 84%;
  gap: 3cqw;
  padding: 7cqw 6cqw 6cqw;
  text-align: center;
}

.credits-card h2 {
  margin: 0;
  font: 400 10cqw / 1 var(--font-display);
  color: #e10600;
}

.credits-card h3 {
  margin: 0 0 1.5cqw;
  font-size: 3.4cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
}

.credits-card p {
  margin: 0;
  font-size: 3.8cqw;
  line-height: 1.45;
  color: #1b2a5c;
}

.credits-card a {
  color: #e10600;
  font-weight: 700;
}

.credits-note {
  display: block;
  margin-top: 1cqw;
  font-size: 3.2cqw;
  color: #777;
}

/* ---------- Ranking global ---------- */
.leaderboard {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 20, 60, 0.6);
  z-index: 5;
}

.leader-card {
  width: 84%;
  max-height: 86%;
  gap: 2cqw;
  padding: 6cqw 5cqw 5.5cqw;
}

.leader-card h2 {
  margin: 0;
  font-size: 11cqw;
  line-height: 1;
  color: #e10600;
}

.leader-status {
  margin: 0;
  font-size: 3.8cqw;
  font-weight: 700;
  color: #777;
  text-align: center;
}

.leader-status:empty {
  display: none;
}

.leader-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.leader-list li {
  display: grid;
  grid-template-columns: 8cqw 1fr auto;
  align-items: center;
  gap: 2cqw;
  padding: 1.4cqw 2cqw;
  border-radius: 1.4cqw;
  font-size: 4.2cqw;
  font-weight: 700;
  color: #1b2a5c;
}

.leader-list li:nth-child(odd):not(.is-me):not(.gap) {
  background: rgba(27, 42, 92, 0.06);
}

.leader-list .rank {
  color: #777;
  text-align: right;
}

.leader-list li:nth-child(-n+3) .rank {
  color: #e10600;
}

.leader-list .who {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.leader-list .who small {
  font-size: 3.2cqw;
  color: #888;
}

.leader-list .pts {
  font: 400 5cqw / 1 var(--font-display);
  color: #e10600;
}

/* Tu fila: resaltada en amarillo */
.leader-list li.is-me {
  background: #ffd23f;
  color: #1a1a1a;
}

.leader-list li.is-me .rank,
.leader-list li.is-me .who small {
  color: #1a1a1a;
}

/* Separador "···" entre el top 10 y tu lugar */
.leader-list li.gap {
  display: block;
  padding: 0;
  text-align: center;
  color: #999;
  letter-spacing: 0.3em;
}

.leader-card .btn {
  margin-top: 2cqw;
}

/* ---------- Título (estilo logo) ---------- */
/* Letras blancas con un contorno de color (--gap) y otro contorno blanco grueso por
   fuera, como un logo recortado. Son 3 capas del mismo texto; los contornos se hacen
   con sombras en círculo para que las esquinas queden redondeadas (text-stroke deja picos).
   --outer y --inner se escalan con el tamaño de cada línea (em). */
.title {
  --gap: #FFD447;
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
  z-index: 3;
  pointer-events: none;
}

.title .line-1 { font-size: 14cqw; }
.title .line-2 { font-size: 21cqw; }

.logo-text {
  --outer: 0.165em;  /* hasta dónde llega el contorno blanco exterior */
  --inner: 0.075em;  /* grosor del contorno de color */
  display: grid;
}

.logo-text::before,
.logo-text::after,
.logo-text > span {
  grid-area: 1 / 1;
  position: relative;
}

/* Capa 1: contorno blanco exterior */
.logo-text::before {
  content: attr(data-text);
  z-index: 0;
  text-shadow:
    calc(var(--outer) * 1.0) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * 0.991) calc(var(--outer) * 0.131) 0 #fff,
    calc(var(--outer) * 0.966) calc(var(--outer) * 0.259) 0 #fff,
    calc(var(--outer) * 0.924) calc(var(--outer) * 0.383) 0 #fff,
    calc(var(--outer) * 0.866) calc(var(--outer) * 0.5) 0 #fff,
    calc(var(--outer) * 0.793) calc(var(--outer) * 0.609) 0 #fff,
    calc(var(--outer) * 0.707) calc(var(--outer) * 0.707) 0 #fff,
    calc(var(--outer) * 0.609) calc(var(--outer) * 0.793) 0 #fff,
    calc(var(--outer) * 0.5) calc(var(--outer) * 0.866) 0 #fff,
    calc(var(--outer) * 0.383) calc(var(--outer) * 0.924) 0 #fff,
    calc(var(--outer) * 0.259) calc(var(--outer) * 0.966) 0 #fff,
    calc(var(--outer) * 0.131) calc(var(--outer) * 0.991) 0 #fff,
    calc(var(--outer) * 0.0) calc(var(--outer) * 1.0) 0 #fff,
    calc(var(--outer) * -0.131) calc(var(--outer) * 0.991) 0 #fff,
    calc(var(--outer) * -0.259) calc(var(--outer) * 0.966) 0 #fff,
    calc(var(--outer) * -0.383) calc(var(--outer) * 0.924) 0 #fff,
    calc(var(--outer) * -0.5) calc(var(--outer) * 0.866) 0 #fff,
    calc(var(--outer) * -0.609) calc(var(--outer) * 0.793) 0 #fff,
    calc(var(--outer) * -0.707) calc(var(--outer) * 0.707) 0 #fff,
    calc(var(--outer) * -0.793) calc(var(--outer) * 0.609) 0 #fff,
    calc(var(--outer) * -0.866) calc(var(--outer) * 0.5) 0 #fff,
    calc(var(--outer) * -0.924) calc(var(--outer) * 0.383) 0 #fff,
    calc(var(--outer) * -0.966) calc(var(--outer) * 0.259) 0 #fff,
    calc(var(--outer) * -0.991) calc(var(--outer) * 0.131) 0 #fff,
    calc(var(--outer) * -1.0) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * -0.991) calc(var(--outer) * -0.131) 0 #fff,
    calc(var(--outer) * -0.966) calc(var(--outer) * -0.259) 0 #fff,
    calc(var(--outer) * -0.924) calc(var(--outer) * -0.383) 0 #fff,
    calc(var(--outer) * -0.866) calc(var(--outer) * -0.5) 0 #fff,
    calc(var(--outer) * -0.793) calc(var(--outer) * -0.609) 0 #fff,
    calc(var(--outer) * -0.707) calc(var(--outer) * -0.707) 0 #fff,
    calc(var(--outer) * -0.609) calc(var(--outer) * -0.793) 0 #fff,
    calc(var(--outer) * -0.5) calc(var(--outer) * -0.866) 0 #fff,
    calc(var(--outer) * -0.383) calc(var(--outer) * -0.924) 0 #fff,
    calc(var(--outer) * -0.259) calc(var(--outer) * -0.966) 0 #fff,
    calc(var(--outer) * -0.131) calc(var(--outer) * -0.991) 0 #fff,
    calc(var(--outer) * -0.0) calc(var(--outer) * -1.0) 0 #fff,
    calc(var(--outer) * 0.131) calc(var(--outer) * -0.991) 0 #fff,
    calc(var(--outer) * 0.259) calc(var(--outer) * -0.966) 0 #fff,
    calc(var(--outer) * 0.383) calc(var(--outer) * -0.924) 0 #fff,
    calc(var(--outer) * 0.5) calc(var(--outer) * -0.866) 0 #fff,
    calc(var(--outer) * 0.609) calc(var(--outer) * -0.793) 0 #fff,
    calc(var(--outer) * 0.707) calc(var(--outer) * -0.707) 0 #fff,
    calc(var(--outer) * 0.793) calc(var(--outer) * -0.609) 0 #fff,
    calc(var(--outer) * 0.866) calc(var(--outer) * -0.5) 0 #fff,
    calc(var(--outer) * 0.924) calc(var(--outer) * -0.383) 0 #fff,
    calc(var(--outer) * 0.966) calc(var(--outer) * -0.259) 0 #fff,
    calc(var(--outer) * 0.991) calc(var(--outer) * -0.131) 0 #fff,
    calc(var(--outer) * 0.66) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * 0.654) calc(var(--outer) * 0.086) 0 #fff,
    calc(var(--outer) * 0.638) calc(var(--outer) * 0.171) 0 #fff,
    calc(var(--outer) * 0.61) calc(var(--outer) * 0.253) 0 #fff,
    calc(var(--outer) * 0.572) calc(var(--outer) * 0.33) 0 #fff,
    calc(var(--outer) * 0.524) calc(var(--outer) * 0.402) 0 #fff,
    calc(var(--outer) * 0.467) calc(var(--outer) * 0.467) 0 #fff,
    calc(var(--outer) * 0.402) calc(var(--outer) * 0.524) 0 #fff,
    calc(var(--outer) * 0.33) calc(var(--outer) * 0.572) 0 #fff,
    calc(var(--outer) * 0.253) calc(var(--outer) * 0.61) 0 #fff,
    calc(var(--outer) * 0.171) calc(var(--outer) * 0.638) 0 #fff,
    calc(var(--outer) * 0.086) calc(var(--outer) * 0.654) 0 #fff,
    calc(var(--outer) * 0.0) calc(var(--outer) * 0.66) 0 #fff,
    calc(var(--outer) * -0.086) calc(var(--outer) * 0.654) 0 #fff,
    calc(var(--outer) * -0.171) calc(var(--outer) * 0.638) 0 #fff,
    calc(var(--outer) * -0.253) calc(var(--outer) * 0.61) 0 #fff,
    calc(var(--outer) * -0.33) calc(var(--outer) * 0.572) 0 #fff,
    calc(var(--outer) * -0.402) calc(var(--outer) * 0.524) 0 #fff,
    calc(var(--outer) * -0.467) calc(var(--outer) * 0.467) 0 #fff,
    calc(var(--outer) * -0.524) calc(var(--outer) * 0.402) 0 #fff,
    calc(var(--outer) * -0.572) calc(var(--outer) * 0.33) 0 #fff,
    calc(var(--outer) * -0.61) calc(var(--outer) * 0.253) 0 #fff,
    calc(var(--outer) * -0.638) calc(var(--outer) * 0.171) 0 #fff,
    calc(var(--outer) * -0.654) calc(var(--outer) * 0.086) 0 #fff,
    calc(var(--outer) * -0.66) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * -0.654) calc(var(--outer) * -0.086) 0 #fff,
    calc(var(--outer) * -0.638) calc(var(--outer) * -0.171) 0 #fff,
    calc(var(--outer) * -0.61) calc(var(--outer) * -0.253) 0 #fff,
    calc(var(--outer) * -0.572) calc(var(--outer) * -0.33) 0 #fff,
    calc(var(--outer) * -0.524) calc(var(--outer) * -0.402) 0 #fff,
    calc(var(--outer) * -0.467) calc(var(--outer) * -0.467) 0 #fff,
    calc(var(--outer) * -0.402) calc(var(--outer) * -0.524) 0 #fff,
    calc(var(--outer) * -0.33) calc(var(--outer) * -0.572) 0 #fff,
    calc(var(--outer) * -0.253) calc(var(--outer) * -0.61) 0 #fff,
    calc(var(--outer) * -0.171) calc(var(--outer) * -0.638) 0 #fff,
    calc(var(--outer) * -0.086) calc(var(--outer) * -0.654) 0 #fff,
    calc(var(--outer) * -0.0) calc(var(--outer) * -0.66) 0 #fff,
    calc(var(--outer) * 0.086) calc(var(--outer) * -0.654) 0 #fff,
    calc(var(--outer) * 0.171) calc(var(--outer) * -0.638) 0 #fff,
    calc(var(--outer) * 0.253) calc(var(--outer) * -0.61) 0 #fff,
    calc(var(--outer) * 0.33) calc(var(--outer) * -0.572) 0 #fff,
    calc(var(--outer) * 0.402) calc(var(--outer) * -0.524) 0 #fff,
    calc(var(--outer) * 0.467) calc(var(--outer) * -0.467) 0 #fff,
    calc(var(--outer) * 0.524) calc(var(--outer) * -0.402) 0 #fff,
    calc(var(--outer) * 0.572) calc(var(--outer) * -0.33) 0 #fff,
    calc(var(--outer) * 0.61) calc(var(--outer) * -0.253) 0 #fff,
    calc(var(--outer) * 0.638) calc(var(--outer) * -0.171) 0 #fff,
    calc(var(--outer) * 0.654) calc(var(--outer) * -0.086) 0 #fff,
    calc(var(--outer) * 0.33) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * 0.327) calc(var(--outer) * 0.043) 0 #fff,
    calc(var(--outer) * 0.319) calc(var(--outer) * 0.085) 0 #fff,
    calc(var(--outer) * 0.305) calc(var(--outer) * 0.126) 0 #fff,
    calc(var(--outer) * 0.286) calc(var(--outer) * 0.165) 0 #fff,
    calc(var(--outer) * 0.262) calc(var(--outer) * 0.201) 0 #fff,
    calc(var(--outer) * 0.233) calc(var(--outer) * 0.233) 0 #fff,
    calc(var(--outer) * 0.201) calc(var(--outer) * 0.262) 0 #fff,
    calc(var(--outer) * 0.165) calc(var(--outer) * 0.286) 0 #fff,
    calc(var(--outer) * 0.126) calc(var(--outer) * 0.305) 0 #fff,
    calc(var(--outer) * 0.085) calc(var(--outer) * 0.319) 0 #fff,
    calc(var(--outer) * 0.043) calc(var(--outer) * 0.327) 0 #fff,
    calc(var(--outer) * 0.0) calc(var(--outer) * 0.33) 0 #fff,
    calc(var(--outer) * -0.043) calc(var(--outer) * 0.327) 0 #fff,
    calc(var(--outer) * -0.085) calc(var(--outer) * 0.319) 0 #fff,
    calc(var(--outer) * -0.126) calc(var(--outer) * 0.305) 0 #fff,
    calc(var(--outer) * -0.165) calc(var(--outer) * 0.286) 0 #fff,
    calc(var(--outer) * -0.201) calc(var(--outer) * 0.262) 0 #fff,
    calc(var(--outer) * -0.233) calc(var(--outer) * 0.233) 0 #fff,
    calc(var(--outer) * -0.262) calc(var(--outer) * 0.201) 0 #fff,
    calc(var(--outer) * -0.286) calc(var(--outer) * 0.165) 0 #fff,
    calc(var(--outer) * -0.305) calc(var(--outer) * 0.126) 0 #fff,
    calc(var(--outer) * -0.319) calc(var(--outer) * 0.085) 0 #fff,
    calc(var(--outer) * -0.327) calc(var(--outer) * 0.043) 0 #fff,
    calc(var(--outer) * -0.33) calc(var(--outer) * 0.0) 0 #fff,
    calc(var(--outer) * -0.327) calc(var(--outer) * -0.043) 0 #fff,
    calc(var(--outer) * -0.319) calc(var(--outer) * -0.085) 0 #fff,
    calc(var(--outer) * -0.305) calc(var(--outer) * -0.126) 0 #fff,
    calc(var(--outer) * -0.286) calc(var(--outer) * -0.165) 0 #fff,
    calc(var(--outer) * -0.262) calc(var(--outer) * -0.201) 0 #fff,
    calc(var(--outer) * -0.233) calc(var(--outer) * -0.233) 0 #fff,
    calc(var(--outer) * -0.201) calc(var(--outer) * -0.262) 0 #fff,
    calc(var(--outer) * -0.165) calc(var(--outer) * -0.286) 0 #fff,
    calc(var(--outer) * -0.126) calc(var(--outer) * -0.305) 0 #fff,
    calc(var(--outer) * -0.085) calc(var(--outer) * -0.319) 0 #fff,
    calc(var(--outer) * -0.043) calc(var(--outer) * -0.327) 0 #fff,
    calc(var(--outer) * -0.0) calc(var(--outer) * -0.33) 0 #fff,
    calc(var(--outer) * 0.043) calc(var(--outer) * -0.327) 0 #fff,
    calc(var(--outer) * 0.085) calc(var(--outer) * -0.319) 0 #fff,
    calc(var(--outer) * 0.126) calc(var(--outer) * -0.305) 0 #fff,
    calc(var(--outer) * 0.165) calc(var(--outer) * -0.286) 0 #fff,
    calc(var(--outer) * 0.201) calc(var(--outer) * -0.262) 0 #fff,
    calc(var(--outer) * 0.233) calc(var(--outer) * -0.233) 0 #fff,
    calc(var(--outer) * 0.262) calc(var(--outer) * -0.201) 0 #fff,
    calc(var(--outer) * 0.286) calc(var(--outer) * -0.165) 0 #fff,
    calc(var(--outer) * 0.305) calc(var(--outer) * -0.126) 0 #fff,
    calc(var(--outer) * 0.319) calc(var(--outer) * -0.085) 0 #fff,
    calc(var(--outer) * 0.327) calc(var(--outer) * -0.043) 0 #fff;
}

/* Capa 2: contorno de color entre la letra y el borde blanco */
.logo-text::after {
  content: attr(data-text);
  z-index: 1;
  color: var(--gap);
  text-shadow:
    calc(var(--inner) * 1.0) calc(var(--inner) * 0.0) 0 var(--gap),
    calc(var(--inner) * 0.981) calc(var(--inner) * 0.195) 0 var(--gap),
    calc(var(--inner) * 0.924) calc(var(--inner) * 0.383) 0 var(--gap),
    calc(var(--inner) * 0.831) calc(var(--inner) * 0.556) 0 var(--gap),
    calc(var(--inner) * 0.707) calc(var(--inner) * 0.707) 0 var(--gap),
    calc(var(--inner) * 0.556) calc(var(--inner) * 0.831) 0 var(--gap),
    calc(var(--inner) * 0.383) calc(var(--inner) * 0.924) 0 var(--gap),
    calc(var(--inner) * 0.195) calc(var(--inner) * 0.981) 0 var(--gap),
    calc(var(--inner) * 0.0) calc(var(--inner) * 1.0) 0 var(--gap),
    calc(var(--inner) * -0.195) calc(var(--inner) * 0.981) 0 var(--gap),
    calc(var(--inner) * -0.383) calc(var(--inner) * 0.924) 0 var(--gap),
    calc(var(--inner) * -0.556) calc(var(--inner) * 0.831) 0 var(--gap),
    calc(var(--inner) * -0.707) calc(var(--inner) * 0.707) 0 var(--gap),
    calc(var(--inner) * -0.831) calc(var(--inner) * 0.556) 0 var(--gap),
    calc(var(--inner) * -0.924) calc(var(--inner) * 0.383) 0 var(--gap),
    calc(var(--inner) * -0.981) calc(var(--inner) * 0.195) 0 var(--gap),
    calc(var(--inner) * -1.0) calc(var(--inner) * 0.0) 0 var(--gap),
    calc(var(--inner) * -0.981) calc(var(--inner) * -0.195) 0 var(--gap),
    calc(var(--inner) * -0.924) calc(var(--inner) * -0.383) 0 var(--gap),
    calc(var(--inner) * -0.831) calc(var(--inner) * -0.556) 0 var(--gap),
    calc(var(--inner) * -0.707) calc(var(--inner) * -0.707) 0 var(--gap),
    calc(var(--inner) * -0.556) calc(var(--inner) * -0.831) 0 var(--gap),
    calc(var(--inner) * -0.383) calc(var(--inner) * -0.924) 0 var(--gap),
    calc(var(--inner) * -0.195) calc(var(--inner) * -0.981) 0 var(--gap),
    calc(var(--inner) * -0.0) calc(var(--inner) * -1.0) 0 var(--gap),
    calc(var(--inner) * 0.195) calc(var(--inner) * -0.981) 0 var(--gap),
    calc(var(--inner) * 0.383) calc(var(--inner) * -0.924) 0 var(--gap),
    calc(var(--inner) * 0.556) calc(var(--inner) * -0.831) 0 var(--gap),
    calc(var(--inner) * 0.707) calc(var(--inner) * -0.707) 0 var(--gap),
    calc(var(--inner) * 0.831) calc(var(--inner) * -0.556) 0 var(--gap),
    calc(var(--inner) * 0.924) calc(var(--inner) * -0.383) 0 var(--gap),
    calc(var(--inner) * 0.981) calc(var(--inner) * -0.195) 0 var(--gap),
    calc(var(--inner) * 0.5) calc(var(--inner) * 0.0) 0 var(--gap),
    calc(var(--inner) * 0.49) calc(var(--inner) * 0.098) 0 var(--gap),
    calc(var(--inner) * 0.462) calc(var(--inner) * 0.191) 0 var(--gap),
    calc(var(--inner) * 0.416) calc(var(--inner) * 0.278) 0 var(--gap),
    calc(var(--inner) * 0.354) calc(var(--inner) * 0.354) 0 var(--gap),
    calc(var(--inner) * 0.278) calc(var(--inner) * 0.416) 0 var(--gap),
    calc(var(--inner) * 0.191) calc(var(--inner) * 0.462) 0 var(--gap),
    calc(var(--inner) * 0.098) calc(var(--inner) * 0.49) 0 var(--gap),
    calc(var(--inner) * 0.0) calc(var(--inner) * 0.5) 0 var(--gap),
    calc(var(--inner) * -0.098) calc(var(--inner) * 0.49) 0 var(--gap),
    calc(var(--inner) * -0.191) calc(var(--inner) * 0.462) 0 var(--gap),
    calc(var(--inner) * -0.278) calc(var(--inner) * 0.416) 0 var(--gap),
    calc(var(--inner) * -0.354) calc(var(--inner) * 0.354) 0 var(--gap),
    calc(var(--inner) * -0.416) calc(var(--inner) * 0.278) 0 var(--gap),
    calc(var(--inner) * -0.462) calc(var(--inner) * 0.191) 0 var(--gap),
    calc(var(--inner) * -0.49) calc(var(--inner) * 0.098) 0 var(--gap),
    calc(var(--inner) * -0.5) calc(var(--inner) * 0.0) 0 var(--gap),
    calc(var(--inner) * -0.49) calc(var(--inner) * -0.098) 0 var(--gap),
    calc(var(--inner) * -0.462) calc(var(--inner) * -0.191) 0 var(--gap),
    calc(var(--inner) * -0.416) calc(var(--inner) * -0.278) 0 var(--gap),
    calc(var(--inner) * -0.354) calc(var(--inner) * -0.354) 0 var(--gap),
    calc(var(--inner) * -0.278) calc(var(--inner) * -0.416) 0 var(--gap),
    calc(var(--inner) * -0.191) calc(var(--inner) * -0.462) 0 var(--gap),
    calc(var(--inner) * -0.098) calc(var(--inner) * -0.49) 0 var(--gap),
    calc(var(--inner) * -0.0) calc(var(--inner) * -0.5) 0 var(--gap),
    calc(var(--inner) * 0.098) calc(var(--inner) * -0.49) 0 var(--gap),
    calc(var(--inner) * 0.191) calc(var(--inner) * -0.462) 0 var(--gap),
    calc(var(--inner) * 0.278) calc(var(--inner) * -0.416) 0 var(--gap),
    calc(var(--inner) * 0.354) calc(var(--inner) * -0.354) 0 var(--gap),
    calc(var(--inner) * 0.416) calc(var(--inner) * -0.278) 0 var(--gap),
    calc(var(--inner) * 0.462) calc(var(--inner) * -0.191) 0 var(--gap),
    calc(var(--inner) * 0.49) calc(var(--inner) * -0.098) 0 var(--gap);
}

/* Capa 3: letras blancas */
.logo-text > span {
  z-index: 2;
}

/* ---------- Marco de tarjeta de beisbol (panel del nombre y score final) ---------- */
/* Cartulina blanca con filo oscuro, marco rojo interior con una línea fina azul
   y una leve inclinación. */
.card-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5cqw;
  padding: 7cqw 7cqw 6.5cqw;
  background: #fdf3d0;
  border: 2cqw solid #fffdf6;
  border-radius: 3cqw;
  box-shadow:
    0 0 0 0.4cqw #1a1a1a,
    0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.15),
    0 2.4cqw 5cqw rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
  font-family: var(--font);
  color: #1a1a1a;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.card-frame::before,
.card-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Marco rojo interior */
.card-frame::before {
  inset: 1.2cqw;
  border: 0.9cqw solid #e10600;
  border-radius: 1.6cqw;
}

/* Línea fina azul dentro del marco rojo */
.card-frame::after {
  inset: 3cqw;
  border: 0.3cqw solid #1b2a5c;
  border-radius: 1cqw;
  opacity: 0.6;
}

.card-frame > * {
  position: relative;
  z-index: 1;
}

/* ---------- Nombre del jugador ---------- */
.name-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 78%;
  z-index: 4;
}

.name-panel label {
  font-size: 6.5cqw;
  font-weight: 700;
}

.name-panel input {
  width: 100%;
  padding: 1.5cqw 0;
  border: none;
  border-bottom: 0.8cqw solid #1a1a1a;
  background: transparent;
  color: #e10600;
  font: 400 13cqw / 1 var(--font-display);
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}

.name-panel input::placeholder {
  color: rgba(26, 26, 26, 0.18);
}

.name-panel .name-hint {
  margin: 0;
  font: 700 3.6cqw / 1.2 var(--font);
  color: #555;
}

.name-panel.is-invalid input {
  animation: shake 0.35s ease-out;
  border-bottom-color: #e10600;
}

/* ---------- Billie ---------- */
.billie {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 82%;
  transform: translate(-50%, 37%);
  /* Contorno blanco tipo sticker + sombra suave para que se despegue del fondo */
  filter:
    drop-shadow(0.7cqw 0 0 #fff)
    drop-shadow(-0.7cqw 0 0 #fff)
    drop-shadow(0 0.7cqw 0 #fff)
    drop-shadow(0 -0.7cqw 0 #fff)
    drop-shadow(0 1.5cqw 2.5cqw rgba(0, 0, 0, 0.45));
  z-index: 2;
  pointer-events: none;
}

/* ---------- Juego activo ---------- */

/* Pitcher: pequeño y a lo lejos, con los pies sobre el montículo (~62% del alto del fondo).
   Los pies están al 95% del alto del PNG, por eso se compensa el bottom. */
.pitcher {
  position: absolute;
  left: 50%;
  bottom: 38%;
  height: 11%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Billie: al centro en primer plano, de la cabeza a la cadera, parada sobre home
   (el fondo está ampliado para que home quede debajo de ella) */
.batter {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72%;
  transform: translate(-50%, 46%);
  /* Contorno blanco tipo sticker + sombra suave, igual que en la pantalla de inicio */
  filter:
    drop-shadow(0.7cqw 0 0 #fff)
    drop-shadow(-0.7cqw 0 0 #fff)
    drop-shadow(0 0.7cqw 0 #fff)
    drop-shadow(0 -0.7cqw 0 #fff)
    drop-shadow(0 1.5cqw 2.5cqw rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Alineación de las poses respecto a pose1: mismo pie de atrás y pies en el piso
   (desplazamientos medidos en cada ilustración, en % del tamaño de la imagen) */
.batter[data-pose="1"] { translate: 11% 8.3%; }
.batter[data-pose="2"] { translate: -13.5% 3.5%; }

/* Capa donde se dibujan pelotas y efectos */
.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: 2.5cqh;
  left: 4cqw;
  right: 4cqw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  font: 700 7cqw / 1 var(--font);
  color: #fff;
  -webkit-text-stroke: 0.5cqw #1a1a1a;
  paint-order: stroke fill;
  text-shadow: 0 0.8cqw 0 #1a1a1a;
}

.hud-left {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.player-name {
  font-size: 4.5cqw;
  letter-spacing: 0.12em;
  color: #ffd23f;
}

/* El #número del jugador: más chico, delgado y en Arial */
.player-tag {
  font: 400 3.2cqw / 1 var(--font);
  letter-spacing: 0.04em;
  -webkit-text-stroke-width: 0.2cqw;
  text-shadow: 0 0.4cqw 0 #1a1a1a;
}

/* Mejor score del jugador; cambia a dorado al superarlo */
.hud-best {
  font-size: 3.6cqw;
  letter-spacing: 0.06em;
  -webkit-text-stroke-width: 0.35cqw;
  text-shadow: 0 0.5cqw 0 #1a1a1a;
  opacity: 0.85;
}

.hud-best.is-record {
  color: #ffd23f;
  opacity: 1;
}

/* Racha: pop-up que aparece unos segundos al conectar y se desvanece solo.
   El color sube con el multiplicador. */
.streak {
  position: absolute;
  left: 50%;
  top: 15%;
  padding: 1.4cqw 3.6cqw;
  border: 0.6cqw solid #1a1a1a;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font: 400 5cqw / 1 var(--font-display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 0.6cqw 0 #1a1a1a;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -2cqw) scale(0.6) rotate(-4deg);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.streak.is-show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(-4deg);
  transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.streak[data-mult="2"] { background: #ffd23f; }
.streak[data-mult="3"] { background: #ff8a1f; color: #fff; }
.streak[data-mult="4"] {
  background: #e10600;
  color: #fff;
  box-shadow: 0 0.6cqw 0 #1a1a1a, 0 0 3cqw rgba(255, 75, 62, 0.9);
}

/* Rebote al mostrar "¡NUEVO RÉCORD!" en el game over */
@keyframes streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.strikes {
  display: flex;
  gap: 2cqw;
}

.strike {
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  border: 0.7cqw solid #1a1a1a;
  background: #fff;
  box-shadow: 0 0.6cqw 0 #1a1a1a;
}

.strike.is-on {
  background: #e10600;
}

/* ---------- Pausa ---------- */
/* Botón redondo blanco con el ícono de pausa, al centro del HUD */
.pause-btn {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 10cqw;
  height: 10cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4cqw;
  padding: 0;
  border: 0.7cqw solid #1a1a1a;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.8cqw 0 #1a1a1a;
  cursor: pointer;
  pointer-events: auto;
}

.pause-btn span {
  width: 1.5cqw;
  height: 4cqw;
  border-radius: 0.4cqw;
  background: #1a1a1a;
}

.pause-btn:active {
  transform: translateX(-50%) translateY(0.6cqw);
  box-shadow: 0 0.2cqw 0 #1a1a1a;
}

.pause {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 20, 60, 0.55);
  z-index: 6;
}

.pause-card {
  width: 70%;
  gap: 4cqw;
  padding: 8cqw 6cqw 8cqw;
}

.pause h2 {
  margin: 0 0 1cqw;
  font-size: 13cqw;
  line-height: 1;
  color: #e10600;
}

.pause-card .btn {
  width: 92%;
  padding-inline: 0;
  font-size: 6cqw;
}

/* ---------- Game over ---------- */
.gameover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  background: rgba(10, 20, 60, 0.55);
  color: #fff;
  font-family: var(--font);
  -webkit-text-stroke: 0.5cqw #1a1a1a;
  paint-order: stroke fill;
  text-align: center;
  z-index: 5;
}

.gameover h2 {
  margin: 0;
  font-size: 13cqw;
  line-height: 1;
  color: #ffd23f;
  text-shadow: 0 1.2cqw 0 #1a1a1a;
}

/* Score final dentro del marco de tarjeta */
.score-card {
  width: 62%;
  gap: 1.5cqw;
  padding: 6cqw 6cqw 5.5cqw;
}

.score-card p {
  margin: 0;
  font-size: 6cqw;
  font-weight: 700;
}

.score-card .final-score {
  font: 400 22cqw / 1 var(--font-display);
  color: #e10600;
}

.score-card .record-msg.is-record {
  font: 400 5.6cqw / 1 var(--font-display);
  color: #e10600;
  white-space: nowrap;
  animation: streak-pop 0.5s ease-out 2;
}


.score-card .record-msg:empty {
  display: none;
}

/* Sacudida en home run */
.shake {
  animation: shake 0.45s ease-out;
}

@keyframes shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -1.5cqw 1cqw; }
  40% { translate: 1.5cqw -1cqw; }
  60% { translate: -1cqw 0.5cqw; }
  80% { translate: 1cqw 0; }
}