/* Página de Padel Club (los tokens y la pista vienen de /assets/site.css).
   La portada es el propio club: el mapa del juego a pantalla completa con el marcador del juego encima. */

/* ---------- Portada: el mapa ---------- */
.world {
  position: relative; overflow: hidden;
  height: min(100svh, 940px); min-height: 640px;
  background: #8fa83c;
}
.world > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 40%;
  image-rendering: pixelated;
}
.world .night { opacity: 0; transition: opacity 1.4s ease; }
.world.lit .night { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world .night { transition: none; } }

.world .studio-bar { position: relative; z-index: 2; }
.world .studio-bar a:first-child { text-shadow: 0 2px 0 var(--ink); }
.world .studio-bar .btn-ghost { background: var(--ink); }

/* El marcador del juego: azul noche, borde blanco, esquinas de 14 px */
.hud {
  position: absolute; z-index: 1;
  left: clamp(16px, 5vw, 72px); bottom: clamp(20px, 6vh, 64px);
  width: min(560px, calc(100% - 32px));
  background: var(--ink); border: 4px solid var(--line); border-radius: 16px;
  padding: 26px 30px 30px;
}
.hud-name { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 3px solid rgba(211, 228, 255, .3); }
.hud-name img { width: 64px; height: 64px; border: 3px solid var(--line); border-radius: 10px; background: #e14b4b; flex: none; }
.hud h1 { font-size: clamp(52px, 6.4vw, 84px); line-height: .88; }
.lead { font: 700 clamp(24px, 2.4vw, 30px)/1.12 "Barlow Condensed", sans-serif; margin: 20px 0 10px; }
.hud .soft { font-size: 17px; }
.hud .btn { margin-top: 6px; }

/* Interruptor de los focos, como los botones redondos del lateral del juego */
.lights {
  position: absolute; z-index: 1; right: clamp(16px, 4vw, 56px); bottom: clamp(20px, 6vh, 64px);
  display: grid; justify-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--line);
}
.lights .knob {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--line); border: 5px solid var(--ink);
  display: grid; place-items: center;
}
.lights .knob svg { width: 38px; height: 38px; fill: var(--ink); }
.world.lit .lights .knob { background: var(--ball); box-shadow: 0 0 0 10px rgba(230, 242, 30, .25); }
.lights .label {
  font: 700 18px/1 "Barlow Condensed", sans-serif;
  background: var(--ink); border-radius: 8px; padding: 6px 10px;
}

/* ---------- Tu club ---------- */
.club h2 { margin-bottom: 56px; max-width: 12ch; }
.rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.row:nth-child(2) { margin-top: 64px; }
.row:nth-child(3) { margin-top: 128px; }
.shot { width: 100%; aspect-ratio: 600 / 1300; object-fit: cover; border: 4px solid var(--line); border-radius: 16px; background: var(--ink); }
/* El título de cada una es un aviso amarillo como los del juego */
.row h3 {
  display: inline-block; margin: -26px 0 14px 14px; position: relative;
  background: var(--ball); color: var(--ink); font-size: 26px;
  padding: 8px 12px 6px; border-radius: 8px; transform: rotate(-2deg);
}
.row p { font-size: 17px; }

/* ---------- La gira: cuadro del torneo con el monumento de cada ciudad ---------- */
.gira-head { margin-bottom: 40px; }
.gira-head h2 { margin-bottom: 18px; }
.draw { list-style: none; margin: 0; padding: 0; border: 4px solid var(--line); border-radius: 16px; background: var(--ink); overflow: hidden; }
.draw li { display: grid; grid-template-columns: 76px 1fr 150px; align-items: end; gap: 18px; padding: 10px 24px 0; min-height: 96px; }
.draw li + li { border-top: 2px solid rgba(211, 228, 255, .25); }
.draw li > span { padding-bottom: 16px; }
.cat { font: 800 30px "Barlow Condensed"; color: var(--ball); }
.city { font: 800 clamp(30px, 4vw, 44px)/1 "Barlow Condensed"; }
.rival { display: block; font: 400 16px/1.3 "Barlow", sans-serif; color: var(--glass); margin-top: 4px; }
.draw .lm { height: 86px; width: 150px; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.draw .last { background: var(--ball); color: var(--ink); }
.draw .last .cat, .draw .last .rival { color: var(--ink); }

/* ---------- La final ---------- */
.final { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.final h2 { margin-bottom: 18px; }

@media (max-width: 820px) {
  .half { padding-top: 64px; padding-bottom: 64px; }
  /* En el móvil el mapa ocupa la parte de arriba y el marcador va debajo, montado sobre su borde */
  .world { height: auto; min-height: 0; background: var(--turf); }
  .world > img { height: 480px; object-position: 36% 50%; }
  .hud { position: relative; left: auto; bottom: auto; margin: 340px 16px 0; width: auto; padding: 20px 20px 24px; }
  .hud-name img { width: 48px; height: 48px; }
  .lights { top: 88px; bottom: auto; }
  .rows { grid-template-columns: 1fr; gap: 48px; }
  .row:nth-child(2), .row:nth-child(3) { margin-top: 0; }
  .shot { width: min(300px, 80vw); }
  .final { grid-template-columns: 1fr; }
  .final .phone { width: min(280px, 78vw); margin: 0 auto; order: 2; }
  .draw li { grid-template-columns: 52px 1fr 84px; gap: 12px; padding: 8px 14px 0; }
  .draw .lm { width: 84px; height: 60px; }
}