/* Padpoint para jugadores v2 */
.theme-players { --nav-bg: #141419; --footer-bg: #141419; }
.theme-players .nav { background: transparent; }
.theme-players .nav.is-scrolled { background: rgb(20 20 25 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.theme-players .nav:has(~ .menu.open) { background: var(--nav-bg); }

/* Hero */
.phero { position: relative; display: grid; align-items: end; min-height: max(640px, calc(100svh - 40px)); margin-top: calc(var(--nav-h) * -1); padding-block: calc(var(--nav-h) + 48px) clamp(48px, 8vh, 96px); background: #0b0d14; color: #fff; overflow: hidden; }
.phero-media { position: absolute; inset: 0; transform: scale(calc(1.02 + var(--p, 0) * .16)); will-change: transform; }
.phero-media video { width: 100%; height: 100%; object-fit: cover; }
.phero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 10 18 / .5) 0%, rgb(8 10 18 / .08) 30%, rgb(8 10 18 / .78) 100%), linear-gradient(90deg, rgb(8 10 18 / .55), transparent 62%); }
.phero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 24px; }
.phero-copy { display: grid; justify-items: start; gap: clamp(20px, 2.2vw, 30px); transform: translateY(calc(var(--p, 0) * -80px)); opacity: calc(1 - var(--p, 0) * 1.6); }
.phero-copy h1 .line:last-child { color: #b9ceff; }
.phero-copy .t-lead { max-width: 26em; color: rgb(255 255 255 / .9); }
.phero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.phero-phone { position: relative; height: 0; justify-self: end; transform: translateY(calc(var(--p, 0) * -22vh)) rotate(calc(5deg - var(--p, 0) * 9deg)); will-change: transform; }
.phero-phone img { position: absolute; right: -7vw; bottom: -34vh; width: min(78vh, 48vw); max-width: none; filter: drop-shadow(0 50px 60px rgb(0 0 0 / .45)); }
html.motion .phero-phone img { animation: float 7s var(--ease-in-out) infinite alternate; }
@keyframes float { from { transform: translateY(-10px); } to { transform: translateY(12px); } }
.film-pause { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 20px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(20 20 25 / .5); color: #fff; transition: background-color .3s; }
.film-pause:hover { background: rgb(20 20 25 / .8); }
.film-pause svg { width: 14px; height: 14px; }
.film-pause .play, .film-pause[aria-pressed='true'] .pause { display: none; }
.film-pause[aria-pressed='true'] .play { display: block; }

/* Drawn visuals. The page shows no portraits: players appear as initials or open slots,
   courts are measured plans (10 × 20 m, service lines 6.95 m from the net). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.slot { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; color: var(--blue); font-family: var(--display); font-weight: 500; font-size: 1em; line-height: 1; letter-spacing: -.01em; }
.slot svg { width: 1.05em; height: 1.05em; }
.slot--open { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.slot--open:not(.slot--you) { opacity: .7; }
.slot--you::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 1.5px currentColor; opacity: .5; }
html.motion .slot--you::after { animation: beacon 2.4s var(--ease-out) infinite; }
@keyframes beacon { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
.art-chip { display: inline-flex; align-items: center; gap: .45em; padding: .5em .9em; border-radius: 99px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: .86em; line-height: 1.1; white-space: nowrap; box-shadow: 0 6px 18px rgb(4 21 74 / .16); }
.art-chip svg { width: 1.15em; height: 1.15em; color: var(--blue); }

/* App mockups in HTML. Every size inside is in em, and the screen's em follows the phone width. */
.device { container-type: inline-size; position: relative; aspect-ratio: 1 / 2.06; border-radius: 15% / 7.3%; background: #17181e; box-shadow: inset 0 0 0 2px #45485a, 0 0 0 1.5px #cfd4df; }
.device-screen { position: absolute; inset: 3.3cqw; display: flex; flex-direction: column; border-radius: 12cqw; overflow: hidden; background: #f2f4f8; color: var(--ink); font-size: 3.9cqw; line-height: 1.25; }
.ui svg { width: 1em; height: 1em; flex: none; }
.ui small { font-size: .82em; color: var(--ink-mute); }
.ui-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.15em 2em .5em 2.4em; background: #fff; font-weight: 500; font-size: 1.05em; }
.ui-island { position: absolute; left: 50%; top: .7em; width: 7.6em; height: 2.1em; border-radius: 2em; background: #0b0b0e; transform: translateX(-50%); }
.ui-battery { width: 1.9em; height: .95em; border-radius: .3em; background: var(--ink); }
.ui-head { display: flex; align-items: center; gap: .7em; padding: .7em 1.1em .9em; background: #fff; }
.ui-head > div { flex: 1; display: grid; gap: .1em; min-width: 0; }
.ui-head b { font-family: var(--display); font-weight: 500; font-size: 1.45em; line-height: 1.1; }
.ui-head small { display: flex; align-items: center; gap: .3em; }
.ui-logo { flex: none; width: 1.9em; height: 2.1em; background: var(--blue); -webkit-mask: url('/assets/padpoint-mark.svg') center / contain no-repeat; mask: url('/assets/padpoint-mark.svg') center / contain no-repeat; }
.ui-round { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: #eef1f6; }
.ui-round svg { width: 1.2em; height: 1.2em; }
.ui-body { flex: 1; display: grid; align-content: start; gap: .8em; min-height: 0; padding: .9em .9em 0; overflow: hidden; }
.ui-match { display: grid; gap: .55em; padding: .65em; border-radius: 1.4em; background: #fff; box-shadow: 0 .2em .8em rgb(4 21 74 / .06); }
.ui-thumb { position: relative; aspect-ratio: 2.25; border-radius: 1em; overflow: hidden; background: linear-gradient(160deg, #0c2b8c, var(--blue-night)); --court-fill: #1f5cf2; --court-line: rgb(255 255 255 / .9); }
.ui-thumb--alt { background: linear-gradient(160deg, #23305a, #0b1230); --court-fill: #2f4fa8; }
.ui .ui-court { position: absolute; left: 10%; top: 14%; width: 80%; height: 72%; }
.ui-badge, .ui-time { position: absolute; display: inline-flex; align-items: center; gap: .3em; padding: .3em .65em; border-radius: 99px; font-size: .8em; white-space: nowrap; }
.ui-badge { left: .6em; top: .6em; background: #fff; color: var(--blue); font-weight: 500; }
.ui-time { right: .6em; bottom: .6em; background: rgb(255 255 255 / .92); color: var(--ink-soft); }
.ui-meta { display: flex; justify-content: space-between; gap: .5em; font-size: .85em; color: var(--ink-mute); }
.ui-meta span { display: inline-flex; align-items: center; gap: .3em; }
.ui-club { font-weight: 500; font-size: 1.05em; }
.ui-teams { display: flex; align-items: center; justify-content: center; gap: .35em; padding-block: .25em; }
.ui-teams em { margin-inline: .7em; font-style: normal; font-size: .85em; color: var(--ink-mute); }
.ui .slot { background: var(--blue); color: #fff; font-size: .92em; }
.ui .slot--open { background: #eef1f6; color: var(--ink-mute); box-shadow: none; opacity: 1; }
.ui-foot { display: flex; align-items: center; gap: .4em; font-size: .85em; }
.ui-foot > span:first-child { margin-right: auto; }
.ui-chip { display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: 99px; background: #eef1f6; color: var(--ink-soft); }
.ui-chip--blue { background: var(--ice); color: var(--blue); }
.ui-join { padding: .45em 1em; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 500; }
.ui-signal, .ui-fab { position: absolute; bottom: 6.3em; display: inline-flex; align-items: center; gap: .45em; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.ui-signal { left: 1.1em; padding: .8em 1.1em; background: #fff; box-shadow: 0 .4em 1.4em rgb(4 21 74 / .16); }
.ui-signal svg { width: 1.25em; height: 1.25em; color: var(--blue); }
.ui-fab { right: 1.1em; padding: .85em 1.3em; background: var(--blue); color: #fff; font-size: 1.12em; box-shadow: 0 .5em 1.4em rgb(6 73 237 / .35); }
.ui-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .8em .3em 1.9em; background: #fff; box-shadow: 0 -1px 0 #e7eaf1; font-size: .74em; color: var(--ink-mute); }
.ui-tabs span { display: grid; justify-items: center; gap: .35em; white-space: nowrap; }
.ui-tabs svg { width: 1.75em; height: 1.75em; }
.ui-tabs .on { color: var(--ink); font-weight: 500; }
.ui-label { display: flex; align-items: center; gap: .35em; font-weight: 500; font-size: .92em; }
.ui-label svg { color: var(--blue); }
.ui-label small { font-weight: 400; }
.ui-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; align-items: start; }
.ui-podium > span { display: grid; justify-items: center; gap: .15em; padding: 1em .3em .8em; border-radius: 2em; background: #e9ecf2; font-size: .8em; line-height: 1.2; text-align: center; }
.ui-podium .p1 { background: var(--ice); box-shadow: inset 0 0 0 1.5px #a9c0ff; }
.ui-podium .p2 { margin-top: 1.4em; }
.ui-podium .p3 { margin-top: 2.6em; }
.ui-podium b { margin-top: .5em; font-family: var(--display); font-weight: 500; font-size: 1.5em; }
.ui-podium .slot { width: 3.2em; height: 3.2em; margin-bottom: .45em; font-size: 1.05em; }
.ui-podium .slot i { position: absolute; right: -.25em; bottom: -.25em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; color: var(--blue); font-style: normal; font-size: .62em; box-shadow: 0 1px 4px rgb(4 21 74 / .2); }
.ui-me { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .3em .7em; padding: .8em 1em; border-radius: 1.6em; background: #d3dfff; color: var(--blue-deep); }
.ui-me > small { grid-column: 1 / -1; color: var(--blue); font-weight: 500; }
.ui-me > b { font-family: var(--display); font-weight: 500; font-size: 1.4em; }
.ui-me .slot { background: #fff; color: var(--blue); font-size: .78em; }
.ui-me span small, .ui-row span small { display: block; }
.ui-row { display: grid; grid-template-columns: 1.2em auto minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .65em 1em; border-radius: 1.4em; background: #fff; }
.ui-row > b:last-child { display: grid; justify-items: end; font-weight: 500; }
.ui-row > b:first-child { color: var(--ink-mute); font-weight: 400; }
.ui-row--date { grid-template-columns: auto minmax(0, 1fr); }
.ui-row--date .slot { border-radius: 30%; background: var(--ice); color: var(--blue); }
.ui-sheet { position: absolute; left: .6em; right: .6em; bottom: .6em; display: grid; justify-items: center; gap: .6em; padding: .8em 1.4em 1.4em; border-radius: 2.2em; background: #fff; box-shadow: 0 0 0 60em rgb(20 20 25 / .3), 0 -1em 3em rgb(4 21 74 / .18); }
.ui-grab { width: 3em; height: .35em; border-radius: 1em; background: var(--line); }
.ui-avatar { display: grid; place-items: center; width: 4.4em; height: 4.4em; margin-top: .3em; border-radius: 32%; background: linear-gradient(150deg, var(--blue), var(--blue-deep)); color: #fff; font-family: var(--display); font-weight: 500; font-size: 1.35em; }
.ui-sheet > b { font-family: var(--display); font-weight: 500; font-size: 1.3em; }
.ui-stats { display: flex; gap: 2.2em; }
.ui-stats span { display: grid; justify-items: center; font-size: 1.15em; }
.ui-follow { justify-self: stretch; padding: .85em; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 500; font-size: 1.05em; text-align: center; }

/* App film: one sticky scene, seven chapters */
.film { position: relative; background: #f2f2f3; }
.film-stage { position: relative; }
.film-media video { width: 100%; height: 100%; object-fit: cover; }
.film-head h2 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.1; letter-spacing: -.02em; }
.film-caption { display: grid; gap: 14px; }
.film-caption h3 { font-size: clamp(32px, 4vw, 60px); line-height: 1; letter-spacing: -.032em; color: var(--blue); }
.film-caption p { max-width: 20em; font-size: clamp(17px, 1.4vw, 21px); color: var(--ink-soft); }
.film-steps { display: flex; font-family: var(--display); font-weight: 500; }
.film-steps a { position: relative; color: var(--ink-mute); transition: color .4s; white-space: nowrap; }
.film-steps a[aria-current='true'] { color: var(--ink); }
.film-replay { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px; }
.film-replay:hover { color: var(--blue); }
.film-error { padding: 16px var(--gutter); text-align: center; color: var(--ink-soft); }
html.motion .film:not(.has-error) { height: calc(100vh + 7 * 64vh); }
html.motion .film:not(.has-error) .film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.motion .film:not(.has-error) .film-media { position: absolute; inset: 0; }
html.motion .film:not(.has-error) .film-head { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 32px); }
html.motion .film:not(.has-error) .film-captions { position: absolute; left: var(--gutter); top: 50%; width: min(31vw, 440px); transform: translateY(-50%); display: grid; }
html.motion .film:not(.has-error) .film-caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(34px); transition: opacity .5s, transform .8s var(--ease-out), visibility 0s .5s; }
html.motion .film:not(.has-error) .film-caption.active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s .15s, transform .9s var(--ease-out) .15s, visibility 0s; }
html.motion .film:not(.has-error) .film-steps { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 6px; font-size: 17px; }
html.motion .film:not(.has-error) .film-steps a { display: flex; align-items: center; gap: 12px; padding-block: 6px; }
html.motion .film:not(.has-error) .film-steps a::after { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; transition: width .6s var(--ease-out), opacity .4s, background-color .4s; }
html.motion .film:not(.has-error) .film-steps a[aria-current='true']::after { width: 46px; opacity: 1; background: var(--blue); }
html.motion .film:not(.has-error) .film-replay { position: absolute; right: var(--gutter); bottom: 32px; }
html.motion .film:not(.has-error) .film-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--blue); transform: scaleX(var(--p, 0)); transform-origin: left; }
/* Static fallback: poster on top, every chapter readable. */
html:not(.motion) .film, .film.has-error { padding-block: var(--section); }
html:not(.motion) .film-stage, .film.has-error .film-stage { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; gap: 32px; }
html:not(.motion) .film-media, .film.has-error .film-media { aspect-ratio: 16 / 9; max-height: 70vh; border-radius: var(--radius); overflow: hidden; }
html:not(.motion) .film-captions, .film.has-error .film-captions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
html:not(.motion) .film-caption h3, .film.has-error .film-caption h3 { font-size: 26px; }
html:not(.motion) .film-steps, html:not(.motion) .film-replay, .film.has-error .film-steps, .film.has-error .film-replay { display: none; }

/* Ways to play */
.play { padding-block: var(--section) clamp(60px, 7vw, 110px); }
.gallery { display: flex; gap: clamp(8px, .9vw, 14px); height: clamp(440px, 66vh, 680px); margin-top: clamp(44px, 5vw, 80px); padding-inline: var(--gutter); }
.play-card { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius); overflow: hidden; color: #fff; isolation: isolate; transition: flex-grow .9s var(--ease-out); }
.play-art { position: absolute; inset: 0; z-index: -2; padding: clamp(26px, 2.8vw, 42px) clamp(16px, 1.8vw, 28px) 0; background: var(--art-bg, var(--blue)); font-size: clamp(13px, 1.05vw, 16px); transition: transform 1.4s var(--ease-out), filter .6s; }
.play-art--usual { --art-bg: #1d1e27; }
.play-art--today { --art-bg: var(--blue-deep); }
.play-art--rank { --art-bg: var(--blue-night); }
/* Open match: a measured court plan with three players placed and one free side. */
.court-plan { position: relative; height: 56%; aspect-ratio: 110 / 210; margin-inline: auto; --court-fill: #2a63f6; --court-line: #fff; }
.court-plan .court-svg { width: 100%; height: 100%; }
.court-plan .slot, .court-plan .art-chip, .radar > .slot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.court-plan .slot { box-shadow: 0 6px 16px rgb(4 21 74 / .28); }
.court-plan .slot--open { color: #fff; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px #fff; }
/* The usual match: last result and the set still to play. */
.score { display: grid; gap: .55em; width: min(100%, 300px); margin: 6% auto 0; font-variant-numeric: tabular-nums; }
.score-head, .score-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 2.2em); align-items: center; gap: .3em; }
.score-head { padding-inline: .9em; font-size: .82em; color: rgb(255 255 255 / .62); }
.score-head span + span { text-align: center; }
.score-row { padding: .75em .9em; border-radius: 16px; background: rgb(255 255 255 / .07); }
.score-row b { font-family: var(--display); font-weight: 500; font-size: 1.9em; line-height: 1; text-align: center; }
.score-row .dim { color: rgb(255 255 255 / .45); }
.score-row .next { align-self: stretch; display: grid; place-items: center; margin-block: -.15em; border-radius: 10px; background: rgb(185 206 255 / .16); color: #b9ceff; }
.pair { display: flex; }
.pair .slot { font-size: .9em; box-shadow: 0 0 0 3px #2b2c35; }
.pair .slot + .slot { margin-left: -.25em; }
/* A court for today: the evening's slots, one picked. */
.times { display: grid; gap: .55em; width: min(100%, 290px); margin: 4% auto 0; font-variant-numeric: tabular-nums; }
.times-day { display: flex; align-items: center; gap: .5em; margin-bottom: .3em; font-family: var(--display); font-weight: 500; font-size: 1.15em; }
.times-day svg { width: 1em; height: 1em; }
.time { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9em; padding: .85em 1.1em; border-radius: 16px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .82); }
.time b { font-family: var(--display); font-weight: 500; font-size: 1.45em; color: #fff; }
.time::after { content: 'Libre'; font-size: .82em; }
.time.is-taken { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: rgb(255 255 255 / .5); }
.time.is-taken b { color: rgb(255 255 255 / .5); }
.time.is-taken::after { content: 'Ocupado'; }
.time.is-picked { background: #fff; color: var(--ink-soft); box-shadow: 0 14px 30px rgb(2 10 40 / .3); }
.time.is-picked b { color: var(--blue); }
.time.is-picked::after { content: none; }
.time.is-picked svg { width: 1.3em; height: 1.3em; color: var(--blue); }
/* A new challenge: the podium. */
.podium { display: flex; align-items: stretch; gap: .5em; width: min(100%, 300px); height: 54%; margin: 2% auto 0; border-bottom: 1.5px solid rgb(255 255 255 / .22); }
.step { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .8em; }
.step b { display: grid; place-items: start center; width: 100%; height: var(--h); padding-top: .35em; border-radius: 16px 16px 0 0; background: rgb(255 255 255 / .1); font-family: var(--display); font-weight: 500; font-size: 2em; color: rgb(255 255 255 / .85); }
.step--1 { --h: 66%; }
.step--2 { --h: 46%; }
.step--3 { --h: 32%; }
.step--1 b { background: var(--blue); color: #fff; }
.step--1 .slot { width: 3.1em; height: 3.1em; font-size: 1.1em; box-shadow: 0 0 0 5px rgb(6 73 237 / .45); }
.play-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 38%, rgb(6 9 20 / .86)); }
.play-card-copy { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: clamp(20px, 2.2vw, 34px); }
.play-card-copy .more { display: grid; grid-template-rows: 1fr; min-width: 0; }
.play-card-copy .more > div { display: grid; justify-items: start; gap: 10px; min-height: 0; overflow: hidden; }
.play-card-copy p { color: rgb(255 255 255 / .88); }
.play-card-copy span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; }
.play-card-copy svg { width: 15px; height: 15px; transition: transform .5s var(--ease-out); }
.gallery-controls { display: none; justify-content: center; gap: 10px; margin-top: 18px; }
.gallery-controls button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); color: var(--blue); }
.gallery-controls svg { width: 16px; height: 16px; }
@media (hover: hover) and (min-width: 900px) {
  /* At rest a card shows its title; hover or focus opens it and reveals the rest. */
  .play-card-copy .more { grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-out); }
  .play-card-copy .more > div { width: clamp(250px, 27vw, 400px); opacity: 0; transition: opacity .4s; }
  .gallery:hover .play-card:not(:hover) .play-art, .gallery:focus-within .play-card:not(:focus-visible) .play-art { filter: saturate(.35) brightness(.72); }
  .play-card:hover, .play-card:focus-visible { flex-grow: 2.3; }
  .play-card:hover .play-art, .play-card:focus-visible .play-art { transform: scale(1.04); }
  .play-card:hover .more, .play-card:focus-visible .more { grid-template-rows: 1fr; }
  .play-card:hover .more > div, .play-card:focus-visible .more > div { opacity: 1; transition-delay: .15s; }
  .play-card:hover svg { transform: translate(3px, -3px); }
}

/* Community collage */
.community { padding-block: clamp(60px, 7vw, 110px) var(--section); overflow: hidden; }
.collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(60px, 8vw, 130px); align-items: start; }
.collage-col > div { display: grid; gap: clamp(12px, 1.6vw, 24px); transform: translateY(calc((.5 - var(--p, .5)) * var(--shift, 0px))); will-change: transform; }
.collage figure { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ice); }
.collage .art { display: grid; place-items: center; padding: clamp(18px, 2vw, 32px); font-size: clamp(13px, 1.05vw, 16px); }
.collage .art--blue { background: var(--blue); color: #fff; }
.collage .art--lilac { background: #c9d7ff; color: var(--blue); }
.collage .art--deep { background: var(--blue-deep); }
.collage .short.art { place-items: start center; padding-top: 15%; }
.collage .art--lilac { place-items: start center; }
/* Your group: the invitation list. */
.invite { display: grid; gap: .55em; width: min(100%, 330px); }
.invite-title { margin-bottom: .35em; font-family: var(--display); font-weight: 500; font-size: 1.3em; letter-spacing: -.01em; }
.invite-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; padding: .65em .9em .65em .65em; border-radius: 16px; background: #fff; line-height: 1.25; }
.invite-row small { display: block; font-size: .84em; color: var(--ink-mute); }
.invite .slot { background: var(--blue); color: #fff; font-size: .95em; }
.invite .ok, .invite .wait { width: 1.35em; height: 1.35em; color: var(--blue); }
.invite .wait { color: var(--ink-mute); }
.invite-add { background: transparent; box-shadow: inset 0 0 0 1.5px #9db8ff; color: var(--blue); font-family: var(--display); font-weight: 500; }
.invite-add .slot { background: transparent; color: var(--blue); opacity: 1; }
/* A free place in a 2 vs 2. */
.versus { display: flex; align-items: center; gap: .4em; font-size: 1.15em; }
.versus em { margin-inline: .5em; font-style: normal; font-size: .85em; color: rgb(255 255 255 / .72); }
.versus .slot--you { color: #fff; }
/* Signal on: nearby players who also want to play. */
.radar { position: relative; width: 92%; aspect-ratio: 1; margin-top: 2%; }
.radar i { position: absolute; inset: var(--r, 0); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(6 73 237 / .28); }
.radar i:nth-child(2) { --r: 17%; }
.radar i:nth-child(3) { --r: 34%; }
html.motion .radar i { inset: 0; animation: radar 4.8s var(--ease-out) infinite; animation-delay: calc(var(--n, 0) * -1.6s); }
html.motion .radar i:nth-child(2) { --n: 1; }
html.motion .radar i:nth-child(3) { --n: 2; }
@keyframes radar { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.radar > .slot { box-shadow: 0 6px 16px rgb(4 21 74 / .14); }
.radar-me { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: .6em; transform: translate(-50%, -32%); }
.radar-me .slot { width: 3.2em; height: 3.2em; background: var(--blue); color: #fff; font-size: 1.1em; box-shadow: 0 0 0 6px rgb(6 73 237 / .18); }
/* The next match: an open card to join. */
.mini-match { display: grid; gap: .6em; width: min(100%, 330px); padding: .75em; border-radius: 20px; background: #fff; color: var(--ink); font-size: 1em; box-shadow: 0 24px 50px rgb(2 10 40 / .35); }
.mini-match .ui-teams { padding-block: .5em; }
.collage .tall { aspect-ratio: 3 / 4; }
.collage .short { aspect-ratio: 4 / 3; }
.collage figcaption { position: absolute; left: 14px; bottom: 14px; padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.2; }
.collage figcaption.dark { background: var(--ink); color: #fff; }
.note { display: grid; gap: 10px; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--radius); background: var(--ice); scroll-margin-top: calc(var(--nav-h) + 40px); }
.note.blue { background: var(--blue); color: #fff; }
.note p { color: var(--ink-soft); }
.note.blue p { color: rgb(255 255 255 / .88); }

/* Journey: four steps that slide sideways while the page scrolls down */
.journey { position: relative; background: var(--ink); color: #fff; }
.journey-stage { padding-block: var(--section); }
.journey-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(14px, 2vw, 28px); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.journey-intro { grid-column: 1 / -1; display: grid; gap: 22px; max-width: 760px; margin-bottom: 20px; }
.journey-intro .t-lead { color: rgb(255 255 255 / .8); }
.journey-step { display: grid; gap: 12px; align-content: start; }
.journey-step figure { position: relative; display: grid; place-items: center; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 10px; padding: 8%; background: #22232b; font-size: clamp(13px, 1vw, 16px); }
.jcourt { position: absolute; left: 8%; top: -6%; width: 84%; height: 112%; --court-fill: transparent; --court-line: rgb(255 255 255 / .14); --court-net: rgb(185 206 255 / .32); }
.jpanel { position: relative; display: grid; gap: .6em; width: min(100%, 300px); padding: 1.2em; border-radius: 18px; background: #fff; color: var(--ink); line-height: 1.25; box-shadow: 0 30px 60px rgb(0 0 0 / .35); font-variant-numeric: tabular-nums; }
.jpanel svg { width: 1em; height: 1em; flex: none; }
.jlabel { display: flex; align-items: center; gap: .4em; font-size: .82em; color: var(--ink-mute); }
.jpanel .slot { background: var(--blue); color: #fff; font-size: .95em; }
.jpanel .slot--you { color: var(--blue); background: transparent; }
.filters .jlabel:not(:first-child) { margin-top: .35em; }
.field { display: flex; align-items: center; gap: .5em; padding: .7em .9em; border-radius: 12px; background: var(--ice-soft); box-shadow: inset 0 0 0 1px var(--line); }
.field svg { color: var(--blue); }
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.days span { display: grid; justify-items: center; padding: .5em 0; border-radius: 12px; background: var(--ice-soft); font-size: .85em; color: var(--ink-soft); }
.days b { font-family: var(--display); font-weight: 500; font-size: 1.5em; line-height: 1.1; color: var(--ink); }
.days .on { background: var(--blue); color: rgb(255 255 255 / .85); }
.days .on b { color: #fff; }
.segment { display: grid; grid-template-columns: 1fr 1fr; padding: .25em; border-radius: 99px; background: var(--ice-soft); box-shadow: inset 0 0 0 1px var(--line); }
.segment span { padding: .55em; border-radius: 99px; font-size: .9em; text-align: center; color: var(--ink-soft); }
.segment .on { background: var(--blue); color: #fff; font-weight: 500; }
.booking { grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: .45em; }
.booking .jlabel { justify-content: center; }
.booking .jlabel:nth-child(4n + 5) { justify-content: start; padding-right: .3em; }
.booking i { display: grid; place-items: center; aspect-ratio: 1.15; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.booking i.taken { background: #e7eaf1; box-shadow: none; }
.booking i.picked { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgb(6 73 237 / .3); }
.booking i svg { width: 1.3em; height: 1.3em; }
.group { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .7em .5em; }
.group .pips, .group .jlabel, .invite-btn { grid-column: 1 / -1; }
.pips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3em; }
.pips i { height: .4em; border-radius: 1em; background: var(--line); }
.pips .on { background: var(--blue); }
.team { display: flex; justify-content: center; gap: .3em; }
.group em { font-style: normal; font-size: .85em; color: var(--ink-mute); }
.invite-btn { display: flex; justify-content: center; align-items: center; gap: .4em; margin-top: .4em; padding: .8em; border-radius: 99px; background: var(--blue); color: #fff; font-family: var(--display); font-weight: 500; }
.agenda .jlabel { margin-bottom: .2em; font-size: .95em; color: var(--ink); font-family: var(--display); font-weight: 500; }
.agenda .jlabel svg { color: var(--blue); }
.agenda-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9em; padding: .55em; border-radius: 14px; background: var(--ice-soft); font-family: var(--display); font-weight: 500; font-size: 1.05em; }
.agenda-row small { display: block; font-family: var(--text); font-weight: 400; font-size: .8em; color: var(--ink-mute); }
.date { display: grid; justify-items: center; width: 3.1em; padding: .35em 0; border-radius: 10px; background: #fff; font-family: var(--text); font-weight: 400; font-size: .76em; color: var(--ink-mute); }
.date b { font-family: var(--display); font-weight: 500; font-size: 1.7em; line-height: 1.05; color: var(--ink); }
.agenda-row.on { background: var(--blue); color: #fff; }
.agenda-row.on small { color: rgb(255 255 255 / .78); }
.agenda-row.on .date { background: rgb(255 255 255 / .16); color: rgb(255 255 255 / .8); }
.agenda-row.on .date b { color: #fff; }
.journey-step p { color: rgb(255 255 255 / .78); max-width: 26em; }
.journey-bar { display: none; }
.journey.is-pinned .journey-stage { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; height: 100svh; padding-block: var(--nav-h) 24px; overflow: hidden; }
.journey.is-pinned .journey-track { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); width: max-content; margin: 0; padding-inline: var(--gutter); transform: translate3d(calc(var(--p, 0) * var(--distance, 0px) * -1), 0, 0); will-change: transform; }
.journey.is-pinned .journey-intro { flex: 0 0 min(44vw, 640px); margin: 0 clamp(20px, 4vw, 80px) 0 0; }
.journey.is-pinned .journey-step { flex: 0 0 clamp(300px, 27vw, 420px); }
.journey.is-pinned .journey-step figure { aspect-ratio: auto; height: min(52vh, 520px); }
.journey.is-pinned .jcourt { transform: translateX(calc((var(--p, 0) - .5) * -14%)); }
.journey.is-pinned .journey-bar { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; height: 2px; background: rgb(255 255 255 / .18); }
.journey.is-pinned .journey-bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Profile & ranking */
.profile { position: relative; padding-block: var(--section); background: var(--ice); overflow: hidden; }
.profile .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.profile-copy { display: grid; justify-items: start; gap: clamp(18px, 2vw, 28px); }
.profile-phones { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.profile-phones img { width: 128%; max-width: none; filter: drop-shadow(0 40px 50px rgb(4 21 74 / .22)); will-change: transform; }
.profile-phones img:first-child { justify-self: end; margin-right: -24%; transform: translateY(calc((.5 - var(--p, .5)) * 110px)); }
.profile-phones img:last-child { margin-left: -14%; margin-top: 16%; transform: translateY(calc((.5 - var(--p, .5)) * -90px)); }

/* Guide */
.guide { padding-block: var(--section); }
.guide .heading h2 { font-size: clamp(32px, 3.8vw, 58px); line-height: 1.03; letter-spacing: -.03em; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.guide-steps article { position: relative; display: grid; align-content: start; justify-items: start; gap: 12px; padding-top: 26px; }
.guide-steps article::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) calc(var(--i, 0) * 130ms + 200ms); }
.guide-steps.in article::before, html:not(.motion) .guide-steps article::before { transform: scaleX(1); }
.guide-steps p { color: var(--ink-soft); }
.guide-steps .link-arrow { color: var(--blue); }
.faq--tint { background: var(--ice-soft); }

/* Closing strip: padel geometry, no photographs */
.strip { padding: 16px var(--gutter); background: var(--footer-bg); }
.strip-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile { --tile-bg: var(--blue); display: grid; place-items: center; flex: none; width: 100%; min-width: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--tile-bg); font-size: clamp(15px, 1.6vw, 24px); }
.tile--court { --tile-bg: var(--blue-deep); --court-fill: var(--blue); }
.tile--court svg { width: 64%; height: 84%; }
.tile--ball { --tile-bg: #c9d7ff; }
.tile--ball img { width: 46%; }
.tile--score { --tile-bg: #fff; align-content: center; gap: .1em; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 5.4vw, 84px); line-height: 1; letter-spacing: -.03em; color: var(--line); font-variant-numeric: tabular-nums; }
.tile--score .on { color: var(--blue); }
.tile--racket { --tile-bg: var(--ice); color: var(--blue); }
.tile--racket svg { width: auto; height: 78%; }
.tile--slots { grid-template-columns: auto auto; align-content: center; justify-content: center; gap: .6em; color: #fff; }
.tile--slots .slot { font-size: 1.15em; }

/* Download dialog */
.dl { width: min(880px, 100% - 32px); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--ink); overflow: hidden; opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .35s, transform .6s var(--ease-out), overlay .6s allow-discrete, display .6s allow-discrete; }
.dl[open] { opacity: 1; transform: none; }
@starting-style { .dl[open] { opacity: 0; transform: translateY(26px) scale(.97); } }
.dl::backdrop { background: rgb(8 10 18 / 0); transition: background-color .5s, overlay .5s allow-discrete, display .5s allow-discrete; }
.dl[open]::backdrop { background: rgb(8 10 18 / .62); }
@starting-style { .dl[open]::backdrop { background: rgb(8 10 18 / 0); } }
.dl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: stretch; }
.dl-copy { display: grid; justify-items: start; align-content: center; gap: 18px; padding: clamp(28px, 5vw, 56px); }
.dl-copy h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -.03em; }
.dl-copy p { color: var(--ink-soft); }
.dl-links { display: grid; gap: 10px; }
.dl .btn--outline { color: var(--ink); }
.dl .btn--outline .arrow { background: var(--ice); color: var(--blue); }
.dl .btn--outline:hover { background: var(--ice-soft); }
.dl-art { background: var(--ice); display: grid; place-items: center; overflow: hidden; min-height: 380px; }
.dl-art img { width: 150%; max-width: none; }
.dl-close { position: absolute; right: 16px; top: 16px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 1px var(--line); }
.dl-close svg { width: 14px; height: 14px; }

@media (max-width: 1040px) {
  .phero-grid { grid-template-columns: 1fr; }
  .phero-phone { display: none; }
}
@media (max-width: 899px) {
  /* Film: media on top, caption and chapters below it. */
  html.motion .film:not(.has-error) .film-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: calc(var(--nav-h) + 10px) 0 16px; }
  html.motion .film:not(.has-error) .film-head, html.motion .film:not(.has-error) .film-captions, html.motion .film:not(.has-error) .film-steps, html.motion .film:not(.has-error) .film-media { position: static; transform: none; width: auto; }
  html.motion .film:not(.has-error) .film-head { grid-row: 1; padding: 0 var(--gutter) 10px; }
  html.motion .film:not(.has-error) .film-media { grid-row: 2; min-height: 0; }
  html.motion .film:not(.has-error) .film-captions { grid-row: 3; padding: 16px var(--gutter) 0; min-height: 132px; align-content: start; }
  .film-caption { gap: 8px; }
  .film-caption h3 { font-size: clamp(26px, 7.4vw, 34px); }
  html.motion .film:not(.has-error) .film-steps { grid-row: 4; flex-direction: row; align-items: center; gap: 20px; padding: 12px var(--gutter) 6px; font-size: 16px; overflow-x: auto; scrollbar-width: none; }
  html.motion .film:not(.has-error) .film-steps a::after { display: none; }
  html.motion .film:not(.has-error) .film-steps a[aria-current='true'] { color: var(--blue); }
  html.motion .film:not(.has-error) .film-replay { display: none; }

  .gallery { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gallery::-webkit-scrollbar, .film-steps::-webkit-scrollbar { display: none; }
  .play-card { flex: 0 0 min(78vw, 360px); aspect-ratio: 3 / 4.2; scroll-snap-align: center; }
  .gallery-controls { display: flex; }
  .collage { grid-template-columns: 1fr 1fr; }
  .collage-col:last-child { grid-column: 1 / -1; }
  .collage-col:last-child > div { grid-template-columns: 1fr 1fr; align-items: start; }
  .collage-col > div { --shift: 0px !important; }
  .profile .wrap { grid-template-columns: 1fr; }
  .profile-phones { margin-top: 10px; }
  .guide-steps { grid-template-columns: 1fr; }
  .dl-body { grid-template-columns: 1fr; }
  .dl-art { display: none; }
}
@media (max-width: 560px) {
  .phero { min-height: max(600px, calc(100svh - 40px)); }
  .collage { grid-template-columns: 1fr; }
  .collage-col:last-child > div { grid-template-columns: 1fr; }
  .journey-track { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .strip-track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip-track .tile { grid-column: span 2; }
  .strip-track .tile:nth-child(n + 4) { grid-column: span 3; }
}