:root {
    --fn-font: 'Nexa', sans-serif;
    --fn-weight-thin: 100;
    --fn-weight-light: 300;
    --fn-weight-regular: 400;
    --fn-weight-medium: 500;
    --fn-weight-bold: 700;
    --fn-weight-heavy: 800;
    --fn-weight-black: 900;

    --fn-heavy-size: 44px;
    --fn-h1-size: 32px;
    --fn-h2-size: 30px;
    --fn-h3-size: 22px;
    --fn-h4-size: 18px;
    --fn-h5-size: 16px;
    --fn-h6-size: 14px;

    --fn-body-size: 14px;
    --fn-small-size: 13px;
    --fn-xs-size: 12px;

    --fn-lh-tight: 1.05;
    --fn-lh-normal: 1.2;
    --fn-lh-relaxed: 1.35;

    --fn-black: #0a0a0a;
    --fn-purple: #7b68ee;
    --fn-blue: #3C4399;
    --fn-gray: #C6C6D0;
    --fn-light-gray: #EFEFF5;

    /* Brand accent */
    --fn-brand: #E2FF31;
    --fn-brand-hover: #D3F01F;
    /* Brand at low opacity — a hover that previews a selection without looking selected. */
    --fn-brand-soft: rgba(226, 255, 49, .38);
    /* Darkened brand green — legible as text/links on the light canvas. */
    --fn-brand-dark: #46700A;
    --fn-brand-dark-hover: #365607;

    /* Neutrals / surfaces */
    --fn-white: #FFFFFF;
    --fn-dark: #14191D;        /* primary dark surface (ticker, football, cards) */
    --fn-dark-ink: #14161A;    /* dark text on the brand accent */
    --fn-ink: #1A1A1A;         /* headings / strong body text */
    --fn-near-black: #060606;  /* video section background */
    --fn-bg: #D9D9D9;          /* app canvas / gradient base */
    --fn-bg-muted: #D6D6D6;    /* slightly lighter canvas */
    --fn-muted: #6D6D6D;       /* secondary / muted text */
    --fn-footer-color: #0D0E0F;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nexa', sans-serif;
    display: flex;
    justify-content: center;
    background: var(--fn-bg);
}

p, span, li, a, button {
    font-weight: var(--fn-weight-regular);
}

a {
    text-decoration: none;
    color: var(--fn-black);
}

.fn-app {
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    /*padding-bottom: 40px;*/
    display: flex;
    flex-direction: column;
    /* The app is a fixed-width mobile frame; intentional bleeds (hero/football/reading
       images, rotated ticker, full-bleed sliders) can extend past the right edge and
       cause horizontal scroll ("empty space on the right"). Clip x-overflow to the frame.
       `clip` avoids becoming a scroll container (keeps sticky + vertical scroll intact);
       `hidden` is the fallback for browsers without `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

h1 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-black);
    font-size: var(--fn-h1-size);
    line-height: var(--fn-lh-tight);
    margin: 0;
}

h2 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-heavy);
    font-size: var(--fn-h2-size);
    line-height: var(--fn-lh-tight);
    margin: 0;
}

h3 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-bold);
    font-size: var(--fn-h3-size);
    line-height: var(--fn-lh-normal);
    margin: 0;
}

h4 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-regular);
    font-size: var(--fn-h4-size);
    margin: 0;
}

h5 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-regular);
    font-size: var(--fn-h5-size);
    margin: 0;
}

h6 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-light);
    font-size: var(--fn-h6-size);
    margin: 0;
}

.ft-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ft-header h3 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-heavy);
    font-size: var(--fn-h3-size);
    line-height: 1;
}

.ft-close {
    background: #E6E6F0;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    cursor: pointer;
}

.ft-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.ft-progress-fill {
    height: 100%;
    background: var(--fn-blue);
}

main {
    flex: 1;
    display: block;
}

main.error-bg {
    padding: 0;
}

/* NAVBAR */
.fn-navbar {
    display: flex;
    padding: 0% 5% 0% 5%;
    align-items: center;
    background: transparent;
}

.fn-navbar-left,
.fn-navbar-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

.fn-navbar-logo {
    /* Was `padding: 15%`. Percentage padding on this shrink-to-fit (flex: 0 0 auto) column created
       a circular width dependency that iOS/WebKit resolved differently before vs. after a reflow —
       the logo jumped 182->200px and the navbar 98->106px on the first tap. Fixed padding removes
       the circularity. Adjust to taste. */
    padding: 39px 0;
    display: block;
}

.fn-navbar-logo img {
    height: 13px;
    width: auto;
    display: block;
}

/* LANGUAGE SELECTOR */
.fn-navbar-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.fn-navbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.fn-lang-wrapper {
    position: relative;
}

.fn-lang-btn .fn-lang-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fn-blue);
    margin-top: 2px;
}

.fn-lang-btn.active .fn-lang-arrow {
    border-top: none;
    border-bottom: 6px solid var(--fn-blue);
}

/* LANGUAGE DROPDOWN */
.fn-lang-dropdown {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;

    width: 100%;
    background: var(--fn-white);

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;

    border-radius: 0 0 10px 10px;

    padding: 6px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);

    z-index: 20;
}

.fn-lang-dropdown.show {
    display: block;
}

.fn-lang-dropdown a {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    color: var(--fn-blue);
}

.fn-lang-dropdown a:hover {
    background: rgba(85, 54, 255, 0.06);
}

.fn-lang-btn {
    background: var(--fn-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 16px;
    color: var(--fn-blue);
    display: flex;
    align-items: center;
    gap: 6px;

    /* iOS Safari: prevent double-tap / focus zoom on tap */
    touch-action: manipulation;

    z-index: 21;
    position: relative;
}

.fn-lang-btn.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* END LANGUAGE DROPDOWN */

.fn-menu-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;

    /* iOS Safari: prevent double-tap zoom on tap */
    touch-action: manipulation;
}

.fn-menu-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* SIDE MENU */
.fn-side-menu {
    font-family: 'Raleway', sans-serif;
    position: fixed;
    top: 0;
    left: -86%;
    width: 84%;
    max-width: 340px;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--fn-bg-muted);
    z-index: 999;
    padding: 56px 24px 44px;
    border-bottom-right-radius: 28px;
    transition: left 0.3s ease;
}

.fn-side-menu.open {
    left: 0;
}

.fn-side-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.fn-side-close img {
    width: 22px;
    height: 22px;
}

.fn-menu-nav {
    display: flex;
    flex-direction: column;
}

.fn-menu-section {
    margin-bottom: 26px;
}

.fn-menu-section:last-of-type {
    margin-bottom: 0;
}

.fn-menu-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: #9a9a9a;
}

.fn-menu-item {
    display: block;
    padding: 3px 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--fn-ink);
    text-decoration: none;
}

.fn-menu-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 3px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--fn-ink);
    cursor: pointer;
}

.fn-menu-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--fn-ink);
    transition: transform 0.2s ease;
}

.fn-menu-accordion.open .fn-menu-toggle-item {
    font-weight: 700;
}

.fn-menu-accordion.open .fn-menu-chevron {
    transform: rotate(180deg);
}

.fn-menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.fn-menu-accordion.open .fn-menu-sub {
    grid-template-rows: 1fr;
}

.fn-menu-sub-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 6px 0 4px 34px;
}

.fn-menu-subitem {
    padding: 8px 0;
    font-size: 16px;
    font-weight: 400;
    color: #2a2a2a;
    text-decoration: none;
}

/* Neon brand "X" watermark, bled into the panel's bottom-right corner and clipped by it. */
.fn-menu-x {
    display: block;
    width: 60%;
    aspect-ratio: 1 / 1;
    max-height: 300px;
    margin: 24px -24px -44px auto;
    background-color: var(--fn-brand);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    pointer-events: none;
}

.fn-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 18, 22, 0.55);
    z-index: 998;
}

.fn-overlay.show {
    display: block;
}

/* END NAVBAR */

/* END PLAN PAGE ------------------------- */

/* ================================
   SWIPE CONTAINER
================================ */
/* NEW: wrapper that allows vertical overflow */

/* Actual swipe zone */
.fn-horizontal-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    padding-top: 55px;
}

.fn-horizontal-scroll::-webkit-scrollbar {
    display: none;
}

/* Swipe card full width */
.fn-card-full {
    min-width: 92%;
    max-width: 92%;
    height: 300px;
    border-radius: 24px;
    position: relative;
    overflow: visible;
    scroll-snap-align: start;
    padding: 26px 22px;
    color: white;
}

.fn-dot {
    width: 6px;
    height: 6px;
    background: #D0D0D8;
    border-radius: 50%;
    transition: 0.25s ease;
}

.fn-dot.active {
    width: 22px;
    border-radius: 6px;
    background: #000;
}

/* UTILITIES ------------------------- */

.hidden {
    display: none !important;
}

/* ERROR PAGE ------------------------- */

/* Faded grayscale background — same layered composition as the homepage
   (.fn-app::before in home.css): a transparent→var(--fn-bg) gradient over the image,
   desaturated and dimmed. Scoped via :has() so only the error page is affected. */
.fn-app:has(.fn-error-page) {
    position: relative;
    background-image: none;
}

.fn-app:has(.fn-error-page)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(to bottom, rgba(217, 217, 217, 0) 30%, var(--fn-bg) 100%), var(--fn-error-bg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%, 140% auto;
    filter: grayscale(1);
    opacity: 0.2;
}

/* Overlay the global navbar on top of the background instead of pushing the
   content down, so the image bleeds up behind the hamburger + logo. */
.fn-app:has(.fn-error-page) .fn-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.fn-error-page {
    position: relative;
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    overflow: hidden;
}

.fn-error-content {
    position: relative;
    z-index: 3;
    text-align: center;
    /* Clears the overlaid navbar (~91px) plus breathing room. */
    padding: 140px 28px 0;
}

.fn-error-content h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 96px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: #0a0a0a;
    margin-bottom: 8px;
}

.fn-error-content h3 {
    font-size: 30px;
    font-weight: 400;
    color: var(--fn-ink);
    margin-bottom: 16px;
}

.fn-error-text {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 auto 36px;
    max-width: 300px;
}

.fn-error-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 18px 28px;
    background: var(--fn-brand);
    color: var(--fn-dark-ink);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.fn-error-btn:hover,
.fn-error-btn:focus,
.fn-error-btn:active {
    background: var(--fn-brand-hover);
    color: var(--fn-dark-ink);
}

/* ACCOUNT PAGE ------------------------- */

.fn-subscription-card {
    background: var(--fn-white);
    border-radius: 12px;
    padding: 20px 18px;
    margin-top: 14px;
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.07);
    font-size: 14px;
    line-height: 1.45;
}

.fn-subscription-card a {
    color: var(--fn-blue);
    font-weight: 600;
    text-decoration: underline;
}

/* CONTACT_US PAGE ------------------------- */
.fn-input {
    background: var(--fn-white);
    border: none;
    padding: 14px;
    border-radius: 12px;
    width: 100%;
    font-size: 15px;
    color: var(--fn-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fn-input::placeholder {
    color: #8a8a8a;
}

.fn-label {
    margin-top: 24px;
    margin-bottom: 8px;
    font-family: NexaBold, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: #333333;
}

.fn-select {
    background: var(--fn-white);
    border-radius: 12px;
    padding: 14px;
    border: none;
    font-size: 15px;
    width: 100%;
    color: var(--fn-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

textarea.fn-input {
    height: 160px;
    resize: none;
}

.fn-label-required {
    color: var(--fn-ink);
    font-size: 14px;
    margin-top: -6px;
    display: block;
}

/* File upload: white filename field + dark "Browse" button, joined into one control. */
.fn-upload {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fn-upload-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 14px;
    background: var(--fn-white);
    color: #8a8a8a;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fn-upload-btn {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 14px 28px;
    background: #1A1D21;
    color: var(--fn-white);
    font-size: 15px;
    cursor: pointer;
}

.fn-send-btn {
    background: var(--fn-brand);
    color: var(--fn-ink);
    font-weight: 700;
    width: 100%;
    padding: 14px;
    font-size: 18px;
    border: none;
    border-radius: 14px;
    margin-top: 25px;
    box-shadow: 0 8px 20px rgba(226, 255, 49, 0.35);
}

.fn-thanks-title {
    margin: 12px 0 16px;
    font-family: NexaBold, sans-serif;
    font-size: var(--fn-h1-size);
    color: var(--fn-black);
}

.fn-thanks-text {
    margin: 0 0 6px;
    font-family: 'Nexa', sans-serif;
    font-size: var(--fn-body-size);
    color: #333333;
}

/* The brand CTA is normally a full-width <button>; as an <a> it needs an
   explicit block display for the width/padding to apply. */
a.fn-send-btn {
    display: block;
    text-align: center;
}

/* TERMS PAGE ------------------------- */
.terms-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.terms-title {
    font-size: 17px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    line-height: 1.3;
}

.terms-text {
    font-size: 15px;
    line-height: 1.55;
    color: #333;
    white-space: pre-line;
}

/* Inline links inside info-page copy (T&C / FAQ / privacy …) use the brand accent.
   The global `a` rule sets --fn-black, so these need the explicit override. */
.terms-text a,
.faq-answer a {
    color: var(--fn-brand-dark);
    text-decoration: underline;
}

.terms-text a:hover,
.terms-text a:focus,
.terms-text a:active,
.faq-answer a:hover,
.faq-answer a:focus,
.faq-answer a:active {
    color: var(--fn-brand-dark-hover);
}

/* END FAQ PAGE ------------------------- */
.faq-accordion .accordion-item {
    background: transparent !important;
    border: none !important;
    margin-bottom: 4px;
}

.faq-btn {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 0;
    padding-right: 0;
}

.accordion-button::after {
    display: none !important;
}

.faq-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--fn-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--fn-dark);
    margin-right: 10px;
}

.faq-question-text {
    flex: 1;
    white-space: normal;
    word-break: break-word;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.accordion-button:not(.collapsed) .faq-question-text {
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    color: #000 !important;
    background: transparent !important;
}

.faq-answer {
    color: #555;
    font-size: 14px;
    margin-top: 6px;
    margin-left: 8px;
}

/* FOOTER ------------------------- */
.fn-footer {
    margin-top: 40px;
    text-align: center;
    color: var(--fn-muted);
    font-family: var(--fn-font);
}

.fn-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 18px;
}

.fn-footer-links a {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: var(--fn-footer-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Vertical "|" divider between links, centered in the gap. */
.fn-footer-links a:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--fn-muted);
}

.fn-footer-links a:hover {
    opacity: .7;
}

.fn-footer-copy {
    font-size: 12px;
    opacity: .75;
    letter-spacing: 0.3px;
}

.fn-footer[dir="rtl"] {
    direction: rtl;
    text-align: center;
}

.fn-footer[dir="rtl"] .fn-footer-links {
    flex-direction: row-reverse;
}

/* MODAL ------------------------- */
.modal.show {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

#aiFitnessTestModal .modal-dialog {
    max-width: 390px;
    margin: 0 auto;
}

#aiFitnessTestModal .modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.modal .fn-card-full {
    min-width: 100%;
    max-width: 100%;
}

/* LOGIN PAGE ------------------------- */
.fn-login-top {
    position: relative;
    overflow: hidden;
    background: transparent; /* inherit the app's var(--fn-bg) body background */
    height: 420px;
}

.fn-login-hero-img {
    position: absolute;
    top: 0;
    width: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

[dir="rtl"] .fn-login-hero-img {
    right: auto;
    left: -24px;
    transform: scaleX(-1);
}

.fn-login-title {
    position: absolute;
    left: 16px;
    bottom: 18px;
    z-index: 2;
}

.fn-login-title h1 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-light);
    font-size: var(--fn-h2-size);
    line-height: var(--fn-lh-tight);
}

.fn-login-title h2 {
    font-family: var(--fn-font);
    font-weight: var(--fn-weight-bold);
    font-size: var(--fn-h2-size);
}

[dir="rtl"] .fn-login-title {
    left: auto;
    right: 16px;
    text-align: right;
}

.fn-login-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to top, var(--fn-bg) 25%, rgba(217, 217, 217, 0) 100%);
    z-index: 1;
}

/* Overlay the login header on top of the hero image instead of pushing it down.
   Scoped via :has() so only the login page's .fn-app becomes the positioning
   context — the global navbar on other pages is untouched. */
.fn-app:has(.fn-login-navbar) {
    position: relative;
}

.fn-login-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

/* Brand light-green login button (matches the app's var(--fn-brand) accent). */
.fn-btn-login {
    background-color: var(--fn-brand);
    color: var(--fn-dark-ink);
    border: none;
}

.fn-btn-login:hover,
.fn-btn-login:focus,
.fn-btn-login:active {
    background-color: var(--fn-brand-hover);
    color: var(--fn-dark-ink);
}

/* END LOGIN PAGE ------------------------- */

/* LOAD MORE BUTTON ------------------------
   One control for every "load more" in the app — the video grid, the player's
   related rail, the highlight list — so they share a shape, a size and a hover.
   Lives here rather than in a page stylesheet because it is used on pages that do
   not share one (highlight.css vs category.css).

   Markup: a centring block plus the button itself. The block keeps bootstrap's
   d-flex/d-none in the markup and deliberately sets no `display` of its own —
   those utilities are !important, so a display here would either be ignored or
   fight the show/hide logic in the player rail.

       <div class="fn-load-more-block d-flex">
           <button type="button" class="fn-load-more">Load more</button>
       </div> */

.fn-load-more-block {
    margin: 20px 0;
    justify-content: center;
    align-items: center;
}

:root {
    --fn-load-more-ink: var(--fn-dark);
    --fn-load-more-line: var(--fn-dark);
}

/* Dark surfaces: the dark outline and ink are invisible against them. */
.player-modal {
    --fn-load-more-ink: #fff;
    --fn-load-more-line: rgba(255, 255, 255, .55);
}

.fn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 15px 42px;

    border: 1px solid;
    border-radius: 9px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

/* Chevron, drawn from borders so it needs no glyph and no asset. currentColor ties
   it to the label, so it follows the colour change on hover for free. */
.fn-load-more::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}

.fn-load-more:hover,
.fn-load-more:focus-visible {
    background-color: var(--fn-brand);
    border-color: var(--fn-brand);
    color: var(--fn-dark-ink);
    transform: translateY(-1px);
}

/* The chevron drops on hover — the direction the list is about to grow. */
.fn-load-more:hover::after,
.fn-load-more:focus-visible::after {
    transform: rotate(45deg) translate(1px, 1px);
}

.fn-load-more:focus-visible {
    outline: 2px solid var(--fn-brand-dark);
    outline-offset: 2px;
}

.fn-load-more:active {
    background-color: var(--fn-brand-hover);
    border-color: var(--fn-brand-hover);
    transform: translateY(0);
}

/* While a batch is in flight. The skeletons carry the progress signal, so this only
   has to stop looking clickable — and must not answer the hover. */
.fn-load-more[disabled],
.fn-load-more.is-loading {
    opacity: .5;
    cursor: default;
    transform: none;
}

.fn-load-more[disabled]:hover,
.fn-load-more.is-loading:hover {
    background: none;
    border-color: var(--fn-load-more-line);
    color: var(--fn-load-more-ink);
    transform: none;
}

.fn-load-more[disabled]:hover::after,
.fn-load-more.is-loading:hover::after {
    transform: rotate(45deg) translate(-1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
    .fn-load-more,
    .fn-load-more::after {
        transition: none;
    }

    /* Colour still changes on hover; only the movement goes. */
    .fn-load-more:hover,
    .fn-load-more:focus-visible {
        transform: none;
    }

    .fn-load-more:hover::after,
    .fn-load-more:focus-visible::after {
        transform: rotate(45deg) translate(-1px, -1px);
    }
}

/* END LOAD MORE BUTTON -------------------- */

/* SKELETON PLACEHOLDERS -------------------
   Stand-ins for content being fetched into a page that is already on screen: a
   load-more batch, the player's related rail. Built by fnSkeleton in
   public/js/scripts.js.

   NOT for full-page navigation — that wait belongs to the loader overlay, and two
   "we are waiting" signals for one wait read as a glitch.

   The shapes reuse the real cards' class names (.video-element,
   .video-preview-image-container, .highlight-item, ...) so they inherit whatever
   layout the surrounding context imposes — the two-column grid, the .nv-page
   single-column row, the modal rail — and cannot drift from it. Only the painted
   blocks below are skeleton-specific. */

:root {
    --fn-skel-base: rgba(20, 25, 29, .10);
    --fn-skel-sheen: rgba(255, 255, 255, .45);
}

/* Dark surfaces: ink-on-light is invisible against them. */
.player-modal {
    --fn-skel-base: rgba(255, 255, 255, .13);
    --fn-skel-sheen: rgba(255, 255, 255, .22);
}

.fn-skel-box,
.fn-skel-line {
    position: relative;
    overflow: hidden;
    background-color: var(--fn-skel-base);
    border-radius: 6px;
}

.fn-skel-line {
    display: block;
    height: .75em; /* em, so each line tracks the font-size of the text it stands in for */
}

/* The sheen is a pseudo-element so only `transform` animates — no per-frame
   repaint of a background-position, and nothing that triggers layout. */
.fn-skel-box::after,
.fn-skel-line::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--fn-skel-sheen), transparent);
    animation: fnSkelSheen 1.5s ease-in-out infinite;
}

@keyframes fnSkelSheen {
    to {
        transform: translateX(100%);
    }
}

/* Video card: .video-preview-image-container already carries the 16/9 box (and the
   48% width in .nv-page), so the skeleton only needs to paint it. */
.fn-skel--video .fn-skel-box {
    /* No height here on purpose: the container's own aspect-ratio sets it, and a
       height would have to fight that. */
    border-radius: 10px;
}

.fn-skel--video .video-preview-title {
    /* Approximately the height a real title row occupies, so swapping the real card
       in does not shift the rows below it. */
    min-height: 1.6em;
}

.fn-skel--video .video-preview-title .fn-skel-line {
    width: 78%;
}

/* Highlight row: 50px league logo, two team lines, the league/date line, score. */
.fn-skel--highlight .fn-skel-logo {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.fn-skel--highlight .teams-list p:nth-child(1) .fn-skel-line {
    width: 46%;
}

.fn-skel--highlight .teams-list p:nth-child(2) .fn-skel-line {
    width: 38%;
}

.fn-skel--highlight .highlight-time .fn-skel-line {
    width: 62%;
}

.fn-skel--highlight .score .fn-skel-line {
    width: 60px;
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the blocks, drop the travelling sheen. */
    .fn-skel-box::after,
    .fn-skel-line::after {
        display: none;
    }
}

/* END SKELETON PLACEHOLDERS --------------- */