/* Padelistan v3 · one fold per section (desktop and tablet landscape).
   Every section is exactly one screen tall; type and phones scale with the screen's height (vh), so the
   whole section is visible at once on a 768 px laptop as on a 1080 px monitor. */
@media (min-width: 1101px) {
  :root { --fold-pad: clamp(56px, 9vh, 96px); }

  .sec {
    min-height: 100svh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--fold-pad) + 3.2vw); padding-bottom: var(--fold-pad);
  }
  .sec > .wrap { width: 100%; }
  .sec h2 { font-size: min(clamp(46px, 6vw, 92px), 8.6vh); }
  .head { margin-bottom: min(clamp(36px, 5vh, 56px), 4vh); }
  .lede { font-size: min(clamp(17px, 1.3vw, 20px), 2.3vh); }

  /* ---------- The app: heading and tabs on the left, the phone on the right ---------- */
  .app { height: auto; display: block; padding: 0; }
  .pin-in { height: 100svh; min-height: 0; padding: calc(var(--fold-pad) * .8 + 3.2vw) 0 calc(var(--fold-pad) * .6); }
  .pin-in > .wrap {
    height: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto; column-gap: clamp(30px, 5vw, 80px);
  }
  .pin-in .showcase { display: contents; }
  .pin-in .head { grid-column: 1; grid-row: 1; margin-bottom: 3vh; }
  .pin-in .tabs { grid-column: 1; grid-row: 2; align-self: start; gap: 1vh; }
  .pin-in .stage { grid-column: 2; grid-row: 1 / 4; min-height: 0; height: 100%; }
  .pin-in .cta-row { grid-column: 1; grid-row: 3; margin-top: 2vh; }
  .tabs button { padding: 1.5vh 18px; }
  .tabs button b { font-size: min(24px, 3vh); }
  .tabs button span { font-size: min(15px, 1.9vh); }
  .app .big-phone { width: auto; height: calc(100svh - var(--fold-pad) * 1.6 - 3.2vw); max-height: 680px; aspect-ratio: 390 / 844; }
  .stage .panel { width: 150%; max-width: 520px; height: 82%; }
  .hud-tab { top: 14%; left: calc(50% + 14vh); }

  /* ---------- Find your name ---------- */
  .results { min-height: 0; }
  .results li { padding: 1vh 6px; }
  .search-card { padding: 2.4vh 22px; }

  /* ---------- How it works ---------- */
  .steps3 { padding-bottom: 0; }
  .steps3 li { padding: 3vh 26px; }
  .steps3 .num { font-size: min(96px, 10vh); }
  .steps3 li:nth-child(2) { margin-top: 3vh; }
  .steps3 li:nth-child(3) { margin-top: 6vh; }

  /* ---------- Ranking ---------- */
  .scoreboard li { padding: min(11px, 1.2vh) 18px; }
  .rules { margin-top: 2.4vh; gap: 1.2vh; }
  .cats { margin-top: 3vh; }
  .cat b { font-size: min(40px, 4.6vh); }

  /* ---------- Tournaments: the three screens sized to the height left ---------- */
  .tour-in { align-items: center; }
  .fan { height: calc(100svh - var(--fold-pad) * 2 - 3.2vw - 15vh); min-height: 380px; }
  .fan .phone { width: auto; height: 82%; aspect-ratio: 390 / 844; }
  .fan .f2 { width: auto; height: 94%; }
  .feat li { padding: 1.8vh 20px; }

  /* ---------- Clubs ---------- */
  .split-shot { height: calc(100svh - var(--fold-pad) * 2 - 3.2vw); min-height: 460px; }
  .split-shot .desk { width: auto; height: 100%; aspect-ratio: 390 / 844; }
  .nums { margin: 2vh 0 3vh; }
  .nums li { padding: 1.6vh 0 1.6vh 52px; }

  /* ---------- Final ---------- */
  .final { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--fold-pad) 0; }
}
@media (min-width: 1101px) and (max-height: 900px) {
  .scoreboard li:nth-child(n+6) { display: none; }
  .rules li:nth-child(3) { display: none; }
  .fan { height: calc(100svh - var(--fold-pad) * 2 - 3.2vw - 19vh); }
}

/* ==========================================================================
   Final: get on the board. Words left, the Passport on the panel right.
   ========================================================================== */
.final { text-align: left; }
.final-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.final h2 { font-size: min(clamp(60px, 8vw, 140px), 13vh); }
.final .lede b { color: var(--lime); font: italic 800 1.25em/1 var(--display); }
.final .acts { justify-content: flex-start; margin-top: 3.4vh; }
.final-shot { position: relative; height: min(70vh, 640px); min-height: 460px; }
.final-shot .panel { left: 8%; right: 0; top: 6%; bottom: 6%; transform: rotate(3deg); }
.final-shot .chain { right: -4%; top: 0; width: 22%; height: 55%; }
.final-phone { position: absolute; left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: 390 / 844; transform: translateX(-46%); z-index: 2; }
.hud-pass { left: -4%; top: 18%; z-index: 3; display: flex; align-items: center; gap: 12px; }
.hud-pass b { display: block; font: italic 800 20px/1 var(--display); text-transform: uppercase; }
.hud-pass small { font-size: 12.5px; color: var(--soft); }
.hud-partner { right: -4%; bottom: 8%; z-index: 3; width: 250px; padding: 16px 44px 16px 18px; transition: border-color .3s, transform .3s; }
.hud-partner small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.hud-partner b { display: block; margin-top: 6px; font: italic 800 21px/1.05 var(--display); text-transform: uppercase; }
.hud-partner .arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--lime); transition: transform .3s; }
.hud-partner:hover { border-color: var(--lime); }
.hud-partner:hover .arrow { transform: translate(4px, -50%); }
@media (max-width: 1100px) {
  .final-in { grid-template-columns: 1fr; }
  .final-shot { height: 520px; max-width: 560px; width: 100%; margin: 20px auto 0; }
}
@media (max-width: 640px) {
  .final { padding: 80px 0 60px; }
  .final h2 { font-size: clamp(54px, 15vw, 76px); }
  .final-shot { height: 460px; }
  .hud-pass { left: 0; top: 6%; padding: 10px 12px; }
  .hud-pass b { font-size: 16px; }
  .hud-partner { right: 0; bottom: 0; width: 220px; }
}

/* Sharp screens: phones stand upright (rotation resamples the image); side phones are dimmed with an
   overlay, never a filter (filters rasterise the image soft) */
.hp-side, .fan .phone, .final-phone { filter: none !important; }
.hp-l, .hp-r { transform: none !important; top: 16% !important; }
.hp-side::after { content: ""; position: absolute; inset: 7px; border-radius: 31px; background: rgba(5, 10, 8, .28); pointer-events: none; }
.fan .f1, .fan .f3 { transform: translateY(-44%) !important; }
.fan .f2 { transform: translate(-50%, -54%) !important; }
.phone img { image-rendering: auto; }
.hud-pass { top: auto; bottom: 34%; left: -10%; }
@media (max-width: 640px) { .hud-pass { left: 0; bottom: 30%; } }