/* Snooker+ landing page (/home). Scoped: every selector starts with .lp or an lp- class.
   Colour values follow the modern Snooker+ tokens defined inline in frontend/index.html
   (background 220 16% 8%, card 220 14% 12%, primary 158 99% 33% = #01AB7A, accent 45 93% 58%).
   This file is the only stylesheet the page loads. */

.lp {
    --lp-night: #121418;
    --lp-slate: #1a1d23;
    --lp-slate-2: #22262e;
    --lp-line: #2c313a;
    --lp-felt: #0f241c;
    --lp-felt-2: #133126;
    --lp-chalk: #f8f7f4;
    --lp-muted: #a3a9b4;
    --lp-green: #01ab7a;
    --lp-green-hi: #18c792;
    --lp-gold: #f5c542;

    --lp-red: #d7263d;
    --lp-yellow: #f2c230;
    --lp-ballgreen: #1e9e5a;
    --lp-brown: #8a5a2b;
    --lp-blue: #2563c9;
    --lp-pink: #e8799f;
    --lp-black: #050505;

    --lp-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --lp-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --lp-wrap: 1180px;
    --lp-gutter: clamp(20px, 4vw, 40px);
    --lp-section: clamp(72px, 10vw, 128px);

    margin: 0;
    background: var(--lp-night);
    color: var(--lp-chalk);
    font-family: var(--lp-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(.lp) *, :where(.lp) *::before, :where(.lp) *::after { box-sizing: border-box; }
/* Resets use :where() (zero specificity) so every lp- component class overrides them. */
:where(.lp) img { display: block; max-width: 100%; height: auto; }
:where(.lp) a { color: inherit; }
:where(.lp) :is(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
:where(.lp) :is(ol, ul) { padding: 0; list-style: none; }
.lp :focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; border-radius: 4px; }
html:has(body.lp) { scroll-behavior: smooth; scroll-padding-top: 76px; }

.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 16px; background: var(--lp-gold); color: #111; font-weight: 700; border-radius: 6px; text-decoration: none; }
.lp-skip:focus { top: 12px; }
.lp-wrap { width: 100%; max-width: var(--lp-wrap); margin: 0 auto; padding: 0 var(--lp-gutter); }

/* ---------- Snooker balls (the page's chapter markers) ---------- */
.lp-ball {
    --lp-ball: var(--lp-red);
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.75) 0 9%, rgba(255,255,255,0) 26%), var(--lp-ball);
    box-shadow: inset -3px -4px 7px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.35);
}
.lp-ball--red { --lp-ball: var(--lp-red); }
.lp-ball--yellow { --lp-ball: var(--lp-yellow); }
.lp-ball--green { --lp-ball: var(--lp-ballgreen); }
.lp-ball--brown { --lp-ball: var(--lp-brown); }
.lp-ball--blue { --lp-ball: var(--lp-blue); }
.lp-ball--pink { --lp-ball: var(--lp-pink); }
.lp-ball--black { --lp-ball: var(--lp-black); box-shadow: inset -3px -4px 7px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.18); }
.lp-marker { width: 26px; height: 26px; margin-bottom: 18px; }

/* ---------- Type ---------- */
.lp-h2 {
    font-family: var(--lp-display);
    font-weight: 400;
    font-size: clamp(44px, 6.2vw, 84px);
    line-height: 0.95;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    max-width: 14ch;
}
.lp-lead { margin-top: 22px; max-width: 56ch; color: #d6d9de; font-size: clamp(17px, 1.6vw, 19px); }
.lp-caption { margin-top: 14px; color: var(--lp-muted); font-size: 14px; }

.lp-h2, .lp-h3, .lp-hero__lede, .lp-hero__tag, .lp-door__text, .lp-outcome__title { text-wrap: balance; }
.lp-lead, .lp-outcome p, .lp-points dd { text-wrap: pretty; }

.lp-lead--strong { color: #fff; font-weight: 600; font-size: clamp(19px, 1.9vw, 22px); }
figure .lp-caption { text-align: center; }
.lp-talk { margin-top: 16px; color: var(--lp-muted); font-size: 15px; }
.lp-talk a { color: #fff; font-weight: 700; }
.lp-talk a:hover { color: var(--lp-green-hi); }

/* ---------- Buttons ---------- */
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-actions--center { justify-content: center; }
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 22px;
    border-radius: 999px; border: 1px solid transparent;
    font-family: var(--lp-body); font-size: 15px; font-weight: 700; letter-spacing: 0.1px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lp-btn--primary { background: var(--lp-green); color: #04120d; }
.lp-btn--primary:hover { background: var(--lp-green-hi); }
.lp-btn--ghost { border-color: #3a414c; color: var(--lp-chalk); background: transparent; }
.lp-btn--ghost:hover { border-color: var(--lp-chalk); }

/* ---------- Navigation ---------- */
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(18,20,24,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.lp-nav__inner { max-width: var(--lp-wrap); margin: 0 auto; padding: 0 var(--lp-gutter); height: 68px; display: flex; align-items: center; gap: 28px; }
.lp-nav__brand { flex: 0 0 auto; }
.lp-nav__brand img { width: 150px; }
.lp-nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.lp-nav__links a { text-decoration: none; color: #cdd1d8; font-size: 15px; font-weight: 500; }
.lp-nav__links a:hover { color: #fff; }
.lp-nav__live { display: inline-flex; align-items: center; gap: 8px; }
.lp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green-hi); box-shadow: 0 0 0 0 rgba(24,199,146,0.6); animation: lp-live 2s ease-out infinite; }
@keyframes lp-live { 0% { box-shadow: 0 0 0 0 rgba(24,199,146,0.55); } 70% { box-shadow: 0 0 0 8px rgba(24,199,146,0); } 100% { box-shadow: 0 0 0 0 rgba(24,199,146,0); } }
.lp-nav__actions { display: flex; align-items: center; gap: 10px; }
.lp-nav__cta { min-height: 40px; padding: 0 18px; font-size: 14px; }

.lp-login { position: relative; }
.lp-login__btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a414c; background: transparent; color: var(--lp-chalk); font: 600 14px var(--lp-body); cursor: pointer; }
.lp-login__btn:hover { border-color: var(--lp-chalk); }
.lp-login__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px; background: var(--lp-slate); border: 1px solid var(--lp-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.lp-login__menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.lp-login__menu a:hover { background: var(--lp-slate-2); }

.lp-nav__toggle { display: none; width: 42px; height: 40px; padding: 0 10px; border: 1px solid #3a414c; border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.lp-nav__toggle span { display: block; height: 2px; background: var(--lp-chalk); border-radius: 2px; }

/* ---------- Hero ---------- */
.lp-hero {
    position: relative; overflow: hidden;
    padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
    background:
        radial-gradient(ellipse 70% 60% at 78% 40%, rgba(1,171,122,0.20), rgba(1,171,122,0) 70%),
        radial-gradient(ellipse 90% 80% at 80% 50%, var(--lp-felt) 0%, rgba(15,36,28,0) 72%),
        var(--lp-night);
}
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(32px, 5vw, 64px); }
.lp-hero__title {
    font-family: var(--lp-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(64px, min(12.4vw, 15vh), 176px); line-height: 0.84; letter-spacing: 1px;
}
.lp-hero__title > span { display: block; }
.lp-hero__stop { width: 0.2em; height: 0.2em; margin-left: 0.06em; vertical-align: 0.02em; }
.lp-hero__lede { margin-top: 26px; font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; color: #fff; }
.lp-hero__tag { margin-top: 6px; font-size: clamp(17px, 1.6vw, 19px); color: var(--lp-gold); font-weight: 600; letter-spacing: 0.3px; }
.lp-hero__already { margin-top: 18px; color: var(--lp-muted); font-size: 15px; }
.lp-hero__already a { color: #e7e9ec; font-weight: 600; }

.lp-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; max-width: 620px; }
.lp-door {
    display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center;
    padding: 18px 18px 20px; border-radius: 16px; text-decoration: none;
    background: rgba(26,29,35,0.82); border: 1px solid var(--lp-line);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-door:hover { background: rgba(34,38,46,0.95); }
.lp-door--player:hover { border-color: var(--lp-red); }
.lp-door--club:hover { border-color: var(--lp-yellow); }
.lp-door .lp-ball { width: 22px; height: 22px; }
.lp-door__title { font-family: var(--lp-display); font-size: 30px; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase; }
.lp-door__text { grid-column: 1 / -1; color: var(--lp-muted); font-size: 15px; line-height: 1.45; margin-top: 6px; }

.lp-hero__visual { position: relative; }
.lp-hero__scene { width: 100%; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(1,171,122,0.08); }

/* ---------- Device frames ---------- */
.lp-phone { padding: 8px; border-radius: 34px; background: #0a0b0d; border: 1px solid #3a3f47; box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 2px #1d2026; }
.lp-phone img { border-radius: 26px; }
.lp-phone--large { width: min(340px, 100%); margin: 0 auto; }
.lp-frame { overflow: hidden; border-radius: 14px; background: #0b0c0f; border: 1px solid #343a43; box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.lp-frame__bar { display: flex; gap: 6px; padding: 10px 12px; background: #1b1e24; border-bottom: 1px solid #2a2f37; }
.lp-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a404a; }

/* ---------- Story: one frame, three outcomes ---------- */
.lp-story {
    padding: var(--lp-section) 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(1,171,122,0.12), rgba(1,171,122,0) 70%),
        linear-gradient(180deg, var(--lp-felt) 0%, #0c1d17 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lp-story__head { max-width: 760px; }
.lp-story__answer { margin-top: 18px; font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; color: #fff; }
.lp-story__sub { margin-top: clamp(48px, 7vw, 80px); max-width: 640px; }
.lp-h3 { font-family: var(--lp-display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; }
.lp-story__sub p { margin-top: 12px; color: #cfd6d2; }
.lp-story__head .lp-h2 { max-width: none; }
.lp-story__track { --lp-story-gap: clamp(18px, 3vw, 36px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-story-gap); margin-top: clamp(40px, 6vw, 64px); }
.lp-story__rail { position: absolute; left: 22px; right: calc((100% - 2 * var(--lp-story-gap)) / 3); top: 21px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.28) 0 8px, rgba(255,255,255,0) 8px 16px); }
.lp-story__cue { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 18%, #e9e7e1 45%, #c9c6bd 100%); box-shadow: 0 0 14px rgba(255,255,255,0.45); opacity: 0; }
.lp-outcome { position: relative; padding-top: 64px; }
.lp-outcome__num {
    position: absolute; top: 0; left: 0;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--lp-display); font-size: 24px; line-height: 1;
    background: var(--lp-felt-2); border: 2px solid rgba(255,255,255,0.22); color: #cfd6d2;
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.lp-outcome__title { font-family: var(--lp-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; letter-spacing: 0.4px; text-transform: uppercase; }
.lp-outcome p { margin-top: 10px; color: #cfd6d2; font-size: 16px; max-width: 34ch; }
.lp-outcome__img { margin-top: 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 44px rgba(0,0,0,0.4); }
.lp-outcome.is-lit .lp-outcome__num { background: var(--lp-green); border-color: var(--lp-green-hi); color: #04120d; }

/* the single orchestrated motion: the cue ball runs the rail and lights each outcome */
.lp-story__track.is-playing .lp-story__cue { animation: lp-cue 2.4s cubic-bezier(.45,.05,.25,1) forwards; }
@keyframes lp-cue { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 16px); opacity: 0.95; } }

/* ---------- Generic sections & split layout ---------- */
.lp-section { padding: var(--lp-section) 0; }
.lp-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(36px, 6vw, 88px); }
.lp-split--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.lp-split--reverse .lp-split__media { order: 2; }
.lp-points { margin-top: 30px; display: grid; gap: 18px; max-width: 58ch; }
.lp-points > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--lp-line); }
.lp-points dt { font-weight: 700; color: #fff; }
.lp-points dd { color: #c9cdd4; }

.lp-players { background: linear-gradient(180deg, var(--lp-night), #15171c); }
.lp-clubs { background: #15171c; }

/* ---------- Competition ---------- */
.lp-compete { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(245,197,66,0.08), rgba(245,197,66,0) 70%), var(--lp-night); }
.lp-compete__head { max-width: 720px; }
.lp-compete__head .lp-h2 { max-width: none; }
.lp-scene { margin-top: 44px; }
.lp-scene img { width: 100%; border-radius: 22px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.lp-scene--network { width: 100%; max-width: 980px; margin-top: 52px; }

/* ---------- Purpose ---------- */
.lp-purpose { background: linear-gradient(180deg, #15171c, var(--lp-night)); text-align: center; }
.lp-purpose__inner { max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.lp-purpose .lp-h2 { max-width: 16ch; }
.lp-purpose .lp-lead { margin-top: 18px; }
.lp-purpose .lp-h2 + .lp-lead { margin-top: 26px; }
.lp-purpose__line { margin-top: 36px; font-family: var(--lp-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: 0.4px; color: var(--lp-gold); text-transform: uppercase; }

.lp-purpose__line span { display: block; }

/* ---------- Proof ---------- */
.lp-proof { background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(37,99,201,0.14), rgba(37,99,201,0) 70%), var(--lp-night); }
.lp-proof__band { max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-proof__band .lp-h2 { max-width: none; }
.lp-proof__band .lp-btn { gap: 10px; }

/* ---------- Final CTA ---------- */
.lp-join { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(1,171,122,0.16), rgba(1,171,122,0) 70%), var(--lp-felt); border-top: 1px solid rgba(255,255,255,0.05); }
.lp-join .lp-h2 { max-width: none; }
.lp-join__doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.lp-join__door { padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: rgba(18,20,24,0.72); border: 1px solid rgba(255,255,255,0.1); }
.lp-join__door .lp-ball { width: 24px; height: 24px; }
.lp-join__door h3 { margin-top: 14px; font-family: var(--lp-display); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; }
.lp-join__door p { margin-top: 10px; color: #cfd6d2; max-width: 40ch; }
.lp-join__door .lp-actions { margin-top: 22px; }
.lp-join__help { margin-top: 28px; color: #cfd6d2; }
.lp-join__help a { color: #fff; font-weight: 700; }

/* ---------- Footer ---------- */
.lp-footer { padding: 64px 0 28px; background: #08090b; border-top: 1px solid #1d2026; }
.lp-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.lp-footer__brand img { width: 170px; }
.lp-footer__brand p { margin-top: 14px; max-width: 32ch; color: var(--lp-muted); font-size: 15px; }
.lp-footer h2 { margin-bottom: 12px; font-size: 14px; font-weight: 700; color: #fff; }
.lp-footer nav a { display: block; padding: 5px 0; color: var(--lp-muted); text-decoration: none; font-size: 15px; }
.lp-footer nav a:hover { color: #fff; }
.lp-footer__base { margin-top: 48px; padding-top: 20px; border-top: 1px solid #1d2026; color: #7d838d; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (min-width: 1041px) and (max-height: 860px) {
    .lp-hero { padding-top: 36px; }
    .lp-hero__lede { margin-top: 18px; }
    .lp-doors { margin-top: 24px; }
}

@media (max-width: 1040px) {
    .lp-nav__links { gap: 18px; }
    .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .lp-hero__visual { max-width: 680px; width: 100%; margin: 8px auto 0; }
}

@media (max-width: 880px) {
    .lp-nav__toggle { display: inline-flex; }
    .lp-nav__links {
        position: absolute; left: 0; right: 0; top: 68px; margin: 0;
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px var(--lp-gutter) 18px; background: rgba(18,20,24,0.98); border-bottom: 1px solid var(--lp-line);
    }
    .lp-nav__links.is-open { display: flex; }
    .lp-nav__links a { padding: 14px 0; border-bottom: 1px solid #23272e; font-size: 17px; }
    .lp-split, .lp-split--reverse { grid-template-columns: minmax(0, 1fr); }
    .lp-split--reverse .lp-split__media { order: 0; }
    .lp-story__track { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .lp-story__rail { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.28) 0 8px, rgba(255,255,255,0) 8px 16px); }
    .lp-story__cue { display: none; }
    .lp-outcome { padding: 0 0 0 64px; }
    .lp-outcome__img { max-width: min(420px, 100%); }
    .lp-join__doors { grid-template-columns: minmax(0, 1fr); }
    .lp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .lp { font-size: 16px; }
    .lp-nav__inner { height: 60px; gap: 10px; }
    .lp-nav__links { top: 60px; }
    .lp-nav__brand img { width: 118px; }
    .lp-nav__cta { display: none; }
    .lp-doors { grid-template-columns: minmax(0, 1fr); }
    .lp-door__title { font-size: 28px; }
    .lp-points > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .lp-actions .lp-btn { flex: 1 1 auto; }
    .lp-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.lp) { scroll-behavior: auto; }
    .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
    .lp-story__cue { display: none; }
}