/*
 * MakeTheClub player site — all colors, spacing, and shape live here.
 * Change a --s-* variable in :root to restyle the whole site from one place.
 */
:root {
    --s-primary: #2b3fa8;
    --s-primary-dark: #141b42;
    --s-primary-light: #4d63d6;
    --s-secondary: #7a1fae;
    --s-secondary-light: #9b2fd1;
    --s-accent: #7a1fae;
    --s-bg: #f4f5fa;
    --s-surface: #ffffff;
    --s-border: #e7e8f2;
    --s-text: #171933;
    --s-text-muted: #6b7089;
    --s-radius-sm: 10px;
    --s-radius-md: 16px;
    --s-radius-lg: 26px;
    --s-shadow-sm: 0 1px 3px rgba(23, 25, 51, .06);
    --s-shadow-md: 0 10px 30px -12px rgba(23, 25, 51, .18);
    --s-shadow-lg: 0 30px 60px -20px rgba(43, 63, 168, .35);
    --s-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
[dir="rtl"] { --s-font: 'Cairo', system-ui, sans-serif; }
/* Negative letter-spacing is tuned for the Latin heading font and visibly
   collides Arabic's connected letterforms in Cairo — neutralize it in RTL. */
[dir="rtl"] .site-brand,
[dir="rtl"] .hero-inner h1,
[dir="rtl"] .stat-value,
[dir="rtl"] .s-metric-value,
[dir="rtl"] .s-match-score,
[dir="rtl"] .s-match-hero__score-value {
    letter-spacing: normal;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body.site-body {
    background: transparent;
    color: #fff;
    font-family: var(--s-font);
}
/* Everything that lives on its own opaque light surface (cards, form
   fields, dropdowns handled by Bootstrap already) needs to stay dark —
   only bare text sitting directly on the new stadium backdrop should
   pick up the page's light default above. .s-club-strip-item has no
   surface of its own (it sits right on the backdrop until hovered), so
   it's deliberately left out here — its :hover rule already darkens it
   to match the light background it gains on hover.
   !important because several of these cards double as the clickable
   link (Bootstrap's .text-reset on the very same element sets
   color:inherit !important, which would otherwise skip straight past
   this rule to the page's light default). */
.s-card, .s-alert, .s-stat-card, .s-metric-card, .s-detail-card,
.s-finance-card, .s-owner-card, .s-mc {
    color: var(--s-text) !important;
}

/* Site-wide stadium backdrop: a fixed full-viewport layer that sits
   behind everything (page content stays on its own opaque cards, so
   this only ever shows through the gaps and margins around them) —
   a real position:fixed element rather than background-attachment:fixed
   on the body, since the latter is unreliable on mobile Safari. Corner
   glows in the brand colours give the edges of the site a lit, premium
   feel instead of a flat photo. */
.s-page-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #05060f;
    background-image:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(77, 99, 214, .5), transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 0%, rgba(155, 47, 209, .45), transparent 70%),
        radial-gradient(ellipse 60% 55% at 0% 100%, rgba(122, 31, 174, .4), transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(43, 63, 168, .45), transparent 70%),
        linear-gradient(rgba(6, 8, 20, .74), rgba(6, 8, 20, .84)),
        url('/images/soccer-background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.s-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .s-container { padding-inline: 2rem; } }

/* Header */
.site-header {
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--s-border);
    position: fixed; top: 0; inset-inline: 0; z-index: 1030;
}
@media (min-width: 768px) {
    body.has-sidebar .site-header { inset-inline-start: var(--web-sidebar-width); }
}
.site-header-inner { display: flex; align-items: center; gap: 1rem; height: 68px; position: relative; }
main.flex-grow-1 { padding-top: 68px; }
.site-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.2rem; color: var(--s-text); text-decoration: none; letter-spacing: -.02em; }
.site-brand:hover { color: var(--s-text); }
.site-logo { height: 60px; width: auto; display: block; }
.site-logo-lg { height: 96px; }

/* Top header brand only: rendered larger than the bar and nudged down so
   the crest visibly hangs past the header's bottom edge — the baked-in
   tagline in logo.png is illegible at the bar's own compact height, and
   the fixed header is the one spot on the site with room for the mark to
   breathe. Scoped to .site-header-inner so the shared .site-brand/.site-logo
   classes used in the mobile drawer and the web sidebar are untouched. */
.site-header-inner .site-brand {
    position: relative;
    align-self: stretch;
    flex-shrink: 0;
    width: 76px;
}
.site-header-inner .site-logo {
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    height: 120px;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .28));
    z-index: 2;
}

.site-nav { display: none; align-items: center; gap: .25rem; margin-inline-start: 1rem; }
@media (min-width: 768px) { .site-nav { display: flex; } }
.site-nav a {
    font-weight: 600; font-size: .92rem; color: var(--s-text-muted); text-decoration: none;
    padding: .5rem .9rem; border-radius: 999px; transition: all .15s ease;
}
.site-nav a:hover { color: var(--s-text); background: #f1f1f8; }
.site-nav a.active { color: var(--s-primary); background: #eef0fd; }

.header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.icon-btn {
    width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--s-text-muted); position: relative; transition: all .15s ease; padding: 0;
}
.icon-btn:hover { background: #f1f1f8; color: var(--s-text); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-badge {
    position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--s-surface);
}

.btn-s-primary {
    background: linear-gradient(135deg, var(--s-primary), var(--s-primary-light));
    color: #fff; border: none; font-weight: 700; border-radius: 999px; padding: .55rem 1.35rem;
    box-shadow: 0 8px 20px -8px rgba(43,63,168,.55); transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.btn-s-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(43,63,168,.6); color: #fff; }
.btn-s-light {
    background: #f1f1f8; color: var(--s-text); border: none; font-weight: 700; border-radius: 999px; padding: .55rem 1.35rem;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; white-space: nowrap;
}
.btn-s-light:hover { background: #e7e8f5; color: var(--s-text); }

/* The header's Sign in/Sign up pills are the tightest-fitting element in
   the bar — on narrow phones there isn't room for their full padding/font
   size alongside the hamburger icon, logo, and language switcher, and
   without `white-space: nowrap` (above) their text used to wrap onto two
   lines inside the pill instead of just running the bar out of room. */
@media (max-width: 480px) {
    .header-actions { gap: .3rem; }
    .header-actions .btn-s-primary,
    .header-actions .btn-s-light {
        padding: .4rem .7rem; font-size: .8rem;
    }
}
@media (max-width: 360px) {
    .site-header-inner { gap: .5rem; }
    .header-actions .btn-s-primary,
    .header-actions .btn-s-light {
        padding: .35rem .55rem; font-size: .74rem;
    }
}

.avatar-chip {
    width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--s-primary), var(--s-secondary)); color: #fff; font-weight: 700; font-size: .85rem;
}

/* Dropdown polish */
.dropdown-menu { border: none; border-radius: var(--s-radius-md); box-shadow: var(--s-shadow-md); padding: .5rem; margin-top: .6rem !important; }
.dropdown-item { border-radius: 10px; padding: .55rem .75rem; font-weight: 600; font-size: .9rem; }
.dropdown-item:hover { background: #f1f1f8; }
.dropdown-header { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--s-text-muted); padding: .5rem .75rem; }
.dropdown-menu-notif { width: 340px; max-width: 88vw; }
.notif-item { padding: .65rem .75rem; border-radius: 10px; }
.notif-item + .notif-item { border-top: 1px solid var(--s-border); }

/* Off-canvas mobile drawer */
.drawer-overlay {
    position: fixed; inset: 0; background: rgba(15,17,38,.5); opacity: 0; visibility: hidden;
    transition: opacity .25s ease; z-index: 1049;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }
.mobile-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(84vw, 320px);
    background: linear-gradient(180deg, var(--s-primary-dark) 0%, #0a0e26 100%);
    z-index: 1050; box-shadow: var(--s-shadow-lg);
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column;
}
[dir="rtl"] .mobile-drawer { transform: translateX(100%); }
.mobile-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: flex-end; padding: .6rem .75rem; }
.drawer-head .icon-btn { color: rgba(255,255,255,.75); }
.drawer-head .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Sidebar navigation (desktop fixed column + mobile drawer content) */
:root { --web-sidebar-width: 17rem; }
.web-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--web-sidebar-width);
    background: linear-gradient(180deg, var(--s-primary-dark) 0%, #0a0e26 100%);
    border-inline-end: none;
    z-index: 1040; display: flex; flex-direction: column;
}
/* Empty spacer strip — no logo here anymore (it lives in the top header
   instead), but the fixed height + border-bottom keeps this column's top
   edge aligned with the main content header's border on the other side. */
.web-sidebar-brand {
    height: 68px; flex-shrink: 0;
    background: var(--s-surface); border-bottom: 1px solid var(--s-border);
}
body.has-sidebar .site-shell { margin-inline-start: 0; }
@media (min-width: 768px) {
    body.has-sidebar .site-shell { margin-inline-start: var(--web-sidebar-width); }
}
.web-sidebar-nav {
    padding: 1rem; display: flex; flex-direction: column; gap: .2rem;
    flex: 1; overflow-y: auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.web-sidebar-nav::-webkit-scrollbar { width: 6px; }
.web-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 999px; }
.web-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.web-sidebar-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); padding: .5rem .75rem .35rem; }
.web-sidebar-link {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 12px;
    font-weight: 700; font-size: .93rem; color: rgba(255,255,255,.72); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.web-sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.web-sidebar-link.active { background: rgba(255,255,255,.14); color: #fff; }
.web-sidebar-icon { width: 22px; height: 22px; display: inline-flex; flex-shrink: 0; }
.web-sidebar-icon svg { width: 100%; height: 100%; }

/* Full-bleed hero */
.hero-section { background: linear-gradient(135deg, var(--s-primary) 0%, var(--s-secondary) 100%); overflow: hidden; position: relative; }
.hero-section::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(255,255,255,.14), transparent 40%);
}
.hero-inner { position: relative; padding-block: 3.5rem 4rem; }
.hero-inner h1 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 7vw, 3.1rem); line-height: 1.25; color: #fff; overflow-wrap: break-word; }
.hero-inner p { color: rgba(255,255,255,.88); font-size: 1.08rem; max-width: 620px; }
@media (max-width: 420px) {
    .hero-inner { padding-block: 2.5rem 3rem; }
}

/* Feature / stat cards */
.s-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); }
.feature-card { padding: 1.75rem; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-md); }
.feature-icon { width: 52px; height: 52px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: #eef0fd; color: var(--s-primary); }
.feature-icon svg { width: 26px; height: 26px; }

.stat-tile { padding: 1.35rem; display: flex; align-items: center; gap: .9rem; height: 100%; min-width: 0; }
.stat-tile .icon { width: 50px; height: 50px; min-width: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-tile .icon svg { width: 24px; height: 24px; }
.stat-tile > div { min-width: 0; }
.stat-label { color: var(--s-text-muted); font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-weight: 800; font-size: clamp(1rem, 4vw, 1.3rem); letter-spacing: -.01em; overflow-wrap: break-word; line-height: 1.15; }
@media (max-width: 380px) {
    .stat-tile { padding: 1rem .85rem; gap: .6rem; }
    .stat-tile .icon { width: 42px; height: 42px; min-width: 42px; }
    .stat-tile .icon svg { width: 20px; height: 20px; }
}

/* Homepage "Latest News" module: one large featured story beside a 2x2
   grid of compact items, instead of a stacked full-width row — mirrors
   the asymmetric sports-portal layout the founder asked to match. */
.s-news-grid {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; align-items: stretch;
    box-shadow: var(--s-shadow-md); overflow: hidden;
}
.s-news-feature {
    position: relative; display: block; overflow: hidden; min-height: 380px; text-decoration: none;
    background: linear-gradient(135deg, var(--s-primary) 0%, var(--s-secondary) 100%);
}
/* contain (not cover) so a non-landscape upload — e.g. a square icon-style
   illustration — shows in full instead of being cropped/zoomed in on its
   center; the gradient behind it fills whatever letterboxing that leaves.
   Direct-child (>) is deliberate: when there's no uploaded photo, the
   fallback visual nests its own small club-logo badge <img> several
   levels deep (.news-visual > .news-visual__badge > img). A plain
   descendant selector here matched that nested img too and, since
   position:absolute/inset:0 escapes the tiny badge's own box entirely,
   stretched the club logo across the whole card. */
.s-news-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.s-news-feature-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--s-primary) 0%, var(--s-secondary) 100%); }
.s-news-feature-overlay {
    position: absolute; inset-inline: 0; bottom: 0; padding: 1.75rem;
    background: linear-gradient(0deg, rgba(20,27,66,.92) 0%, rgba(20,27,66,.55) 60%, transparent 100%);
}
.s-news-tag {
    display: inline-block; background: var(--s-secondary); color: #fff; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; margin-bottom: .75rem;
}
.s-news-feature-overlay h3 { color: #fff; font-weight: 800; font-size: 1.3rem; line-height: 1.3; margin: 0 0 .5rem; }
.s-news-feature .s-news-time { color: rgba(255,255,255,.72); }
.s-news-grid-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 0; overflow: hidden; }
.s-news-grid-item {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--s-text);
    background: var(--s-surface); border: 1px solid var(--s-border); margin: -1px 0 0 -1px;
    position: relative; transition: background .15s ease;
}
.s-news-grid-item:hover { background: var(--s-bg); z-index: 1; }
.s-news-grid-item img, .s-news-grid-item-fallback { width: 100%; height: 100px; object-fit: cover; display: block; }
.s-news-grid-item-fallback { background: linear-gradient(135deg, #eef0fd, #e0e7ff); }
.s-news-grid-item-body { padding: .85rem 1rem; flex: 1; }
.s-news-grid-item-body strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.35; }
.s-news-time { display: block; margin-top: .5rem; font-size: .76rem; color: var(--s-text-muted); }
@media (max-width: 767px) {
    .s-news-grid { grid-template-columns: 1fr; }
    .s-news-feature { min-height: 260px; }
}
@media (max-width: 480px) {
    .s-news-grid-list { grid-template-columns: 1fr; }
}

/* Rectangle ad beside the featured-news module (desktop only — the
   column itself is hidden below md regardless of the ad's own device
   targeting, see .s-news-side-ad usage in home.blade.php). */
.s-news-with-ad { display: flex; align-items: stretch; gap: 0; }
.s-news-with-ad .s-news-grid { flex: 1; min-width: 0; }
.s-news-side-ad {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: linear-gradient(135deg, #121319 0%, var(--s-secondary) 100%);
}
.s-news-side-ad .s-ad-slot { margin: 0; }
.s-news-side-ad .s-ad-slot-label { color: rgba(255,255,255,.7); }

/* Available Clubs — a horizontally scrolling strip of small club badges,
   tight gaps so many clubs fit on screen before scrolling kicks in. */
.s-club-strip {
    display: flex; gap: .6rem; overflow-x: auto; padding: 1.1rem .25rem;
    scrollbar-width: thin; scrollbar-color: var(--s-border) transparent;
}
.s-club-strip::-webkit-scrollbar { height: 6px; }
.s-club-strip::-webkit-scrollbar-thumb { background: var(--s-border); border-radius: 999px; }
.s-club-strip-item {
    flex: 0 0 auto; width: 78px; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-decoration: none; color: #fff; text-align: center; padding: .5rem .25rem; border-radius: var(--s-radius-md);
    transition: background .15s ease;
}
.s-club-strip-item:hover { background: var(--s-bg); color: var(--s-text); }
.s-club-strip-item .avatar-chip { width: 52px; height: 52px; font-size: .95rem; border-radius: 14px; overflow: hidden; }
.s-club-strip-item span {
    font-size: .72rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}

/* Top Stats — coaches / players / standings, 3-up on desktop. Each card
   gets a gradient header (site brand colors) with an icon badge, instead
   of the plain eyebrow-only header used by generic .s-detail-card. */
.s-stat-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); overflow: hidden; }
.s-stat-card__header {
    display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.35rem;
    background: linear-gradient(135deg, #121319 0%, var(--s-secondary) 100%);
}
.s-stat-card__icon {
    width: 42px; height: 42px; min-width: 42px; border-radius: 13px; display: inline-flex; align-items: center;
    justify-content: center; background: rgba(255,255,255,.18); color: #fff;
}
.s-stat-card__icon svg { width: 22px; height: 22px; }
.s-stat-card__header .s-eyebrow { color: rgba(255,255,255,.75); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; display: block; }
.s-stat-card__header h2 { color: #fff; font-weight: 800; font-size: 1.1rem; margin: .1rem 0 0; }
.s-stat-card__body { padding: 1.1rem 1.35rem 1.35rem; }

.s-top-stat-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--s-border); text-decoration: none; color: var(--s-text); }
.s-top-stat-row:last-child { border-bottom: none; }
a.s-top-stat-row:hover { background: var(--s-surface-alt, rgba(0,0,0,.02)); }
.s-top-stat-rank { width: 22px; flex-shrink: 0; font-weight: 800; color: var(--s-text-muted); font-size: .82rem; }
.s-top-stat-identity { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.s-top-stat-name { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.s-top-stat-meta { font-size: .74rem; color: var(--s-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Competitions table block: a gradient-headed table (matching .s-stat-card)
   with a competition filter in the header, beside a full-height gradient
   ad panel — same "stretch to match" trick as .s-news-side-ad. */
.s-comp-header { flex-wrap: wrap; row-gap: .75rem; }
.s-comp-filter { margin-inline-start: auto; }
.s-comp-filter-select {
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
    padding: .45rem .75rem; font-weight: 700; font-size: .82rem; cursor: pointer;
}
.s-comp-filter-select option { color: var(--s-text); }
[data-comp-table-body] { transition: opacity .15s ease; }
.s-comp-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.s-comp-table th {
    text-align: start; padding: .75rem 1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--s-text-muted); border-bottom: 1px solid var(--s-border); white-space: nowrap;
}
.s-comp-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--s-border); white-space: nowrap; }
.s-comp-table tbody tr:last-child td { border-bottom: none; }
.s-comp-table th:nth-child(n+3), .s-comp-table td:nth-child(n+3) { text-align: center; }
.s-comp-club { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--s-text); font-weight: 700; white-space: nowrap; }
.s-comp-ad {
    display: flex; align-items: center; justify-content: center; padding: 1.5rem; border-radius: var(--s-radius-lg);
    overflow: hidden; background: linear-gradient(135deg, #121319 0%, var(--s-secondary) 100%);
}
.s-comp-ad .s-ad-slot-label { color: rgba(255,255,255,.7); }

/* Forms */
.s-form-control {
    width: 100%; border: 1.5px solid var(--s-border); border-radius: var(--s-radius-sm); padding: .75rem 1rem;
    font-size: .96rem; transition: border-color .15s ease, box-shadow .15s ease; background: var(--s-surface); color: var(--s-text);
}
.s-form-control:focus { outline: none; border-color: var(--s-primary-light); box-shadow: 0 0 0 4px rgba(99,102,241,.15); }

.s-matches-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .85rem; }
.s-matches-filter-field { display: flex; flex-direction: column; gap: .3rem; }
.s-matches-filter-label { font-weight: 700; font-size: .74rem; color: var(--s-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.s-matches-filter-control { width: auto; min-width: 170px; }
@media (max-width: 640px) {
    .s-matches-filters { gap: .6rem; }
    .s-matches-filter-field { flex: 1 1 100%; }
    .s-matches-filter-control { width: 100%; min-width: 0; }
}
.s-label { font-weight: 700; font-size: .88rem; margin-bottom: .4rem; display: block; }
/* The fixed header's logo is deliberately oversized and hangs ~62px past
   the header's own bottom edge (see .site-header-inner .site-logo) — a
   flash message is the very first thing rendered after the header, so
   without this it renders partly underneath the logo on every screen
   size (the logo's position doesn't change at any breakpoint). */
.s-alert { border-radius: var(--s-radius-sm); border: none; padding: .9rem 1.1rem; font-weight: 600; font-size: .92rem; margin-top: 3rem; }
.s-alert-success { background: #dcfce7; color: #14532d; }
.s-alert-danger { background: #fee2e2; color: #7f1d1d; }

/* Footer */
.site-footer { background: #12142b; color: #a8acc7; margin-top: auto; }
.site-footer .s-container { padding-block: 1.75rem; display: flex; flex-direction: column; gap: .35rem; align-items: center; text-align: center; }
@media (min-width: 768px) {
    .site-footer .s-container { flex-direction: row; justify-content: space-between; text-align: start; }
}
.site-footer strong { color: #fff; }

/* Squad page */
.player-card { padding: 1.1rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.player-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); }
.position-badge {
    background: #eef0fd; color: var(--s-primary); font-weight: 800; font-size: .72rem; letter-spacing: .03em;
    border-radius: 8px; padding: .25rem .5rem;
}
.rating-chip { font-weight: 800; font-size: .95rem; border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.rating-chip.rating-high { background: #dcfce7; color: #15803d; }
.rating-chip.rating-mid { background: #fef3c7; color: #b45309; }
.rating-chip.rating-low { background: #f1f1f8; color: var(--s-text-muted); }
.player-name { font-weight: 700; font-size: .95rem; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta { color: var(--s-text-muted); font-size: .78rem; margin-top: .1rem; }
.player-wage { font-size: .8rem; font-weight: 700; color: var(--s-text); margin-top: .5rem; }
.player-wage span { color: var(--s-text-muted); font-weight: 500; }

/* Club profile page (namespaced with an s- prefix: the admin theme bundle,
   loaded on this layout too for its grid/JS, ships its own same-named
   club-details-card / metric-card classes that would otherwise collide and win) */
.s-profile-hero {
    --club-primary: var(--s-primary); --club-secondary: #ffffff;
    background: linear-gradient(135deg, var(--club-primary) 0%, color-mix(in srgb, var(--club-primary) 55%, var(--s-primary-dark)) 100%);
    border-radius: var(--s-radius-lg); padding: 2.25rem 2rem; position: relative; overflow: hidden; box-shadow: var(--s-shadow-lg);
}
.s-profile-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(255,255,255,.12), transparent 40%);
}
.s-profile-hero__content { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.s-profile-hero__identity { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.s-profile-hero__logo {
    width: 84px; height: 84px; min-width: 84px; border-radius: 20px; background: var(--club-secondary, #fff);
    color: var(--club-primary); display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.6rem; box-shadow: var(--s-shadow-md); overflow: hidden;
}
.s-profile-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.s-profile-hero .s-eyebrow { color: rgba(255,255,255,.75); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.s-profile-hero h1 { color: #fff; }
.s-profile-status {
    font-weight: 700; font-size: .78rem; padding: .3rem .75rem; border-radius: 999px; letter-spacing: .02em;
    background: rgba(255,255,255,.18); color: #fff;
}
.s-profile-status.active { background: rgba(74,222,128,.25); color: #dcfce7; }
.s-profile-status.inactive { background: rgba(255,255,255,.18); color: #fee2e2; }
.s-profile-hero__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .5rem; color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 600; }
.s-profile-hero__actions { display: flex; gap: .6rem; position: relative; flex-wrap: wrap; }
.s-profile-hero__actions .btn-s-primary { background: #fff; color: var(--club-primary); box-shadow: var(--s-shadow-md); }
.s-profile-hero__actions .btn-s-primary:hover { color: var(--club-primary); }
.s-profile-hero__actions .btn-s-light { background: rgba(255,255,255,.16); color: #fff; }
.s-profile-hero__actions .btn-s-light:hover { background: rgba(255,255,255,.26); color: #fff; }

.s-metric-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); padding: 1.35rem; }
.s-metric-label { color: var(--s-text-muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.s-metric-value { font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; margin-top: .2rem; }
.s-metric-hint { color: var(--s-text-muted); font-size: .8rem; margin-top: .25rem; }

.s-detail-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); }
.s-detail-card__header { padding: 1.5rem 1.75rem 0; }
.s-detail-card__header .s-eyebrow { color: var(--s-primary); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.s-detail-card__body { padding: 1.25rem 1.75rem 1.75rem; }
.s-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }
@media (max-width: 575px) { .s-detail-grid { grid-template-columns: 1fr; } }
.s-detail-item { display: flex; flex-direction: column; gap: .2rem; }
.s-detail-item span { color: var(--s-text-muted); font-size: .8rem; font-weight: 600; }
.s-detail-item strong { font-size: .98rem; }

.s-colour-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 575px) { .s-colour-grid { grid-template-columns: 1fr; } }
.s-colour-card { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: var(--s-radius-sm); background: var(--s-bg); }
.s-colour-card__preview { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; background: var(--club-colour); box-shadow: var(--s-shadow-sm); border: 1px solid var(--s-border); }
.s-colour-card span { display: block; color: var(--s-text-muted); font-size: .78rem; font-weight: 600; }
.s-colour-card strong { font-size: .92rem; letter-spacing: .02em; }

.s-finance-card, .s-owner-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); padding: 1.5rem 1.75rem; }
.s-finance-card .s-eyebrow, .s-owner-card .s-eyebrow { color: var(--s-primary); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.s-finance-card h2, .s-owner-card h2 { font-weight: 800; font-size: 1.15rem; margin: .2rem 0 1.1rem; color: var(--s-text); }
.s-finance-card__item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--s-border); }
.s-finance-card__item:first-of-type { border-top: none; }
.s-finance-card__item span { color: var(--s-text-muted); font-weight: 600; font-size: .88rem; }
.s-finance-card__item strong { font-weight: 800; color: var(--s-text); }
.s-finance-card__ratio { margin-top: .5rem; padding-top: .9rem; border-top: 1px dashed var(--s-border); font-size: .88rem; }
.s-owner-card__profile { display: flex; align-items: center; gap: .85rem; }
.s-owner-card__avatar { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--s-primary), var(--s-secondary)); color: #fff; font-weight: 800; flex-shrink: 0; }
.s-owner-card__profile strong { display: block; font-size: .95rem; color: var(--s-text); }
.s-owner-card__profile span { color: var(--s-text-muted); font-size: .83rem; }
.s-owner-card__empty { color: var(--s-text-muted); font-size: .88rem; }

/* Matches (namespaced with s- to avoid colliding with the admin bundle's own match- classes) */
.s-tabs { display: inline-flex; gap: .25rem; background: var(--s-bg); border-radius: 999px; padding: .3rem; }
.s-tab { padding: .5rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--s-text-muted); text-decoration: none; transition: all .15s ease; }
.s-tab:hover { color: var(--s-text); }
.s-tab.active { background: var(--s-surface); color: var(--s-primary); box-shadow: var(--s-shadow-sm); }

.s-match-card {
    display: block; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg);
    box-shadow: var(--s-shadow-sm); text-decoration: none; color: var(--s-text); overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.s-match-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); color: var(--s-text); }
.s-match-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--s-bg); }
.s-match-card__head span { display: block; color: var(--s-text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.s-match-card__head strong { display: block; margin-top: .15rem; font-size: .88rem; }

.s-match-status { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.s-match-status.scheduled { color: #1e40af; background: #dbeafe; }
.s-match-status.live { color: #fff; background: #dc2626; }
.s-match-status.finished { color: #15803d; background: #dcfce7; }
.s-match-status.postponed { color: #b45309; background: #fef3c7; }
.s-match-status.cancelled { color: #991b1b; background: #fee2e2; }

.s-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: 1.5rem 1.1rem; }
.s-match-team { min-width: 0; text-align: center; }
.s-match-team strong { display: block; margin-top: .5rem; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-match-score-block { min-width: 80px; text-align: center; }
.s-match-score { font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; }
.s-match-score span { color: var(--s-text-muted); }
.s-match-vs { font-weight: 800; color: var(--s-text-muted); font-size: .95rem; }
.s-match-score-block small { display: block; color: var(--s-text-muted); font-size: .72rem; margin-top: .35rem; }
.s-result-badge { display: inline-block; margin-top: .4rem; padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.s-result-badge.win { color: #15803d; background: #dcfce7; }
.s-result-badge.draw { color: #6b7089; background: #f1f1f8; }
.s-result-badge.loss { color: #b91c1c; background: #fee2e2; }

.s-match-hero {
    background: linear-gradient(135deg, var(--s-primary-dark) 0%, var(--s-primary) 100%); border-radius: var(--s-radius-lg);
    padding: 2rem; text-align: center; box-shadow: var(--s-shadow-lg); color: #fff;
}
.s-match-hero .s-eyebrow { color: rgba(255,255,255,.7); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.s-match-hero__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.s-match-hero__team strong { display: block; margin-top: .6rem; font-size: .95rem; }
.s-match-hero__score-value { font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; }
.s-match-hero__score-value--vs { font-size: 1.2rem; color: rgba(255,255,255,.75); }
.s-match-hero__meta { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600; }

.s-timeline-row { position: relative; display: flex; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--s-border); }
.s-timeline-row:last-child { border-bottom: none; }
.s-timeline-dot { width: 9px; height: 9px; min-width: 9px; margin-top: .4rem; border-radius: 50%; background: var(--s-primary); box-shadow: 0 0 0 4px #eef0fd; }

.s-replay-scoreboard {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
    background: var(--s-primary-dark); color: #fff; border-radius: var(--s-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; text-align: center;
}
.s-replay-scoreboard__center { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.s-replay-scoreboard__score { font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.s-replay-minute { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); border-radius: 999px; padding: .15rem .6rem; }
.s-replay-feed { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.s-replay-row { display: flex; gap: .65rem; align-items: baseline; padding: .5rem .65rem; border-radius: 10px; background: var(--s-surface-alt, #f6f7fb); font-size: .88rem; animation: s-replay-row-in .25s ease-out; }
.s-replay-row.highlight { background: #eef0fd; font-weight: 700; }
.s-replay-row__minute { min-width: 2.4rem; font-weight: 800; color: var(--s-primary); }
@keyframes s-replay-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.s-live-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #dc2626; }
.s-live-badge::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: s-live-pulse 1.2s ease-in-out infinite; }
@keyframes s-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Finance */
.s-finance-row { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--s-border); }
.s-finance-row:last-child { border-bottom: none; }
.s-finance-row__icon { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.s-finance-row__icon svg { width: 18px; height: 18px; }
.s-finance-row__icon.income { background: #dcfce7; color: #16a34a; }
.s-finance-row__icon.expense { background: #fee2e2; color: #dc2626; }
.s-finance-row__category { font-weight: 700; font-size: .92rem; }
.s-finance-row__desc { color: var(--s-text-muted); font-size: .8rem; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-finance-row__amount { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.s-finance-row__amount.income { color: #16a34a; }
.s-finance-row__amount.expense { color: #dc2626; }
.s-finance-row__date { color: var(--s-text-muted); font-size: .75rem; margin-top: .1rem; }

/* Facilities */
.s-facility-progress { height: 8px; border-radius: 999px; background: var(--s-bg); overflow: hidden; }
.s-facility-progress__bar { height: 100%; border-radius: 999px; transition: width .2s ease; }

/* Training */
.s-training-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--s-border); }
.s-training-row > form { flex-shrink: 0; }
.s-training-row > form button { white-space: nowrap; }
.s-training-row:last-child { border-bottom: none; }
.s-training-results { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .5rem; font-size: .8rem; color: var(--s-text-muted); }
.s-training-results strong { color: var(--s-text); }

/* Standings */
.s-standings-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.s-standings-table th { padding: .85rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--s-text-muted); border-bottom: 1px solid var(--s-border); }
.s-standings-table th.text-center, .s-standings-table td.text-center { text-align: center; }
.s-standings-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--s-border); font-size: .88rem; white-space: nowrap; }
.s-standings-table tr:last-child td { border-bottom: none; }
.s-standings-table tr.mine { background: #eef0fd; }
.s-standings-club { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.s-standings-pos { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-weight: 700; }
.s-standings-pos.promotion { background: #dcfce7; color: #16a34a; }
.s-standings-pos.relegation { background: #fee2e2; color: #dc2626; }
.s-standings-legend { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.s-standings-legend.promotion { background: #dcfce7; border: 1px solid #16a34a; }
.s-standings-legend.relegation { background: #fee2e2; border: 1px solid #dc2626; }

/* Notifications */
.s-training-row.unread { background: #f8f9ff; }

/* Page hero — a bold branded banner for generic (non club-branded) page
   titles across authenticated site pages. */
.s-page-hero {
    background: linear-gradient(135deg, var(--s-primary-dark) 0%, var(--s-primary) 55%, var(--s-secondary) 100%);
    border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-lg);
    padding: 1.75rem 2rem; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.s-page-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .6;
    background: radial-gradient(circle at 12% 20%, rgba(255,255,255,.16), transparent 45%),
                radial-gradient(circle at 88% 85%, rgba(255,255,255,.12), transparent 40%);
}
.s-page-hero__content { position: relative; display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.s-page-hero__icon {
    width: 56px; height: 56px; min-width: 56px; border-radius: 16px; background: rgba(255,255,255,.16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--s-shadow-md);
}
.s-page-hero__icon svg { width: 26px; height: 26px; }
.s-page-hero .s-eyebrow { color: rgba(255,255,255,.75); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.s-page-hero h1 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 800; margin: .15rem 0 .3rem; color: #fff; position: relative; }
.s-page-hero p { color: rgba(255,255,255,.8); margin: 0; max-width: 480px; position: relative; }

/* Dashboard quick-access tiles — same gradient as .s-page-hero so they
   read as an extension of it. Short, icon-forward tiles (fixed height,
   not aspect-ratio, so they never balloon into oversized squares on a
   wide column): 5 across on desktop, wrapping into extra rows. On
   mobile the grid becomes a single horizontally-scrolling row (inside
   the shared .s-hscroll component, arrows included) instead of
   wrapping into a tall stack of rows. */
.s-quick-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.s-quick-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    height: 92px; border-radius: var(--s-radius-md); text-decoration: none; color: #fff;
    background: linear-gradient(135deg, var(--s-primary-dark) 0%, var(--s-primary) 55%, var(--s-secondary) 100%);
    box-shadow: var(--s-shadow-sm); padding: .4rem .25rem; transition: transform .15s ease, box-shadow .15s ease;
}
.s-quick-tile:hover, .s-quick-tile:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: var(--s-shadow-md); }
.s-quick-tile__icon svg { width: 32px; height: 32px; stroke: #fff; }
.s-quick-tile__label { font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.15; }
.s-quick-tiles-hscroll .s-hscroll-arrow { display: none; }
@media (max-width: 767px) {
    .s-quick-tiles { display: flex; flex-wrap: nowrap; gap: .5rem; padding-inline: 2.4rem; }
    .s-quick-tile { flex: 0 0 80px; height: 80px; border-radius: 12px; }
    .s-quick-tile__icon svg { width: 26px; height: 26px; }
    .s-quick-tile__label { font-size: .6rem; }
    .s-quick-tiles-hscroll .s-hscroll-arrow { display: inline-flex; }
}

/* Kit Designer / Stadium District — a fixed, always-2-across featured
   pair, kept separate from the scrollable/wrapping grid above. */
.s-quick-tiles-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.s-quick-tile--featured {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    flex-direction: row; padding: .85rem .75rem; border-radius: var(--s-radius-md);
    text-decoration: none; color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: var(--s-shadow-md);
    transition: transform .15s ease, box-shadow .15s ease;
}
.s-quick-tile--featured:hover, .s-quick-tile--featured:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: var(--s-shadow-md); }
.s-quick-tile--featured .s-quick-tile__icon svg { width: 26px; height: 26px; stroke: #fff; }
.s-quick-tile--featured .s-quick-tile__label { font-size: .78rem; font-weight: 700; }
@media (max-width: 767px) {
    .s-quick-tile--featured { padding: .65rem .6rem; }
    .s-quick-tile--featured .s-quick-tile__icon svg { width: 20px; height: 20px; }
    .s-quick-tile--featured .s-quick-tile__label { font-size: .64rem; }
}
.s-page-hero__actions { position: relative; display: flex; gap: .6rem; flex-wrap: wrap; }
.s-page-hero .btn-s-light { background: rgba(255,255,255,.16); color: #fff; }
.s-page-hero .btn-s-light:hover { background: rgba(255,255,255,.26); color: #fff; }
.s-page-hero .btn-s-primary { background: #fff; color: var(--s-primary); box-shadow: var(--s-shadow-md); }
.s-page-hero .btn-s-primary:hover { color: var(--s-primary); }
@media (max-width: 480px) {
    .s-page-hero { padding: 1.35rem 1.25rem; }
    .s-page-hero__icon { width: 46px; height: 46px; min-width: 46px; border-radius: 13px; }
    .s-page-hero__icon svg { width: 22px; height: 22px; }
}

/* Coach cards — a richer alternative to the plain .player-card, with a
   colored header band echoing the admin panel's card look, adapted to
   the site's light theme instead of the admin's dark gradient. */
.s-coach-card { padding: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.s-coach-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); }
.s-coach-card__top { background: linear-gradient(135deg, #eef0fd 0%, #e0e7ff 100%); padding: 1.1rem 1.1rem .9rem; }
.s-coach-card__badge-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.s-coach-card__avatar { width: 52px; height: 52px; border-radius: 999px; box-shadow: var(--s-shadow-sm); border: 2px solid #fff; object-fit: cover; display: block; }
.s-coach-card__name { font-weight: 800; font-size: 1rem; margin-top: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-coach-card__meta { color: var(--s-text-muted); font-size: .78rem; margin-top: .1rem; }
.s-coach-card__body { padding: .9rem 1.1rem 1.1rem; flex-grow: 1; display: flex; flex-direction: column; gap: .6rem; }
.s-coach-card__achievements { color: var(--s-text-muted); font-size: .78rem; display: flex; align-items: center; gap: .35rem; margin-top: auto; }
.s-coach-card__achievements svg { width: 14px; height: 14px; color: #b45309; }
.s-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--s-primary); display: inline-block; }

/* Club directory cards — a brand-colored gradient banner (per club's own
   primary/secondary colors) behind an overlapping logo badge, so each
   card reads as that club's own identity rather than a generic list row. */
.s-club-card { padding: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.s-club-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); }
.s-club-card__banner { height: 72px; background: linear-gradient(135deg, var(--club-primary) 0%, var(--club-secondary) 100%); position: relative; }
.s-club-card__logo {
    position: absolute; inset-inline-start: 1.1rem; bottom: -28px; width: 56px; height: 56px; border-radius: 16px;
    background: var(--s-surface); box-shadow: var(--s-shadow-sm); border: 3px solid var(--s-surface);
    display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 800; font-size: .85rem; color: var(--s-text);
}
.s-club-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.s-club-card__body { padding: 2.2rem 1.1rem 1.1rem; flex-grow: 1; display: flex; flex-direction: column; gap: .5rem; }
.s-club-card__name { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-club-card__meta { color: var(--s-text-muted); font-size: .78rem; display: flex; align-items: center; gap: .3rem; }
.s-club-card__stats { display: flex; align-items: center; gap: 1.1rem; margin-top: .3rem; }
.s-club-card__stat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .72rem; color: var(--s-text-muted); }
.s-club-card__stat strong { font-size: .95rem; color: var(--s-text); }
.s-club-card__value { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--s-border); font-weight: 800; font-size: .92rem; }

/* News page — a big featured hero, a ranked "Most Read" rail, and a
   card grid for everything else, instead of one flat list of rows. */
.s-news-hero {
    display: grid; grid-template-columns: 1fr; overflow: hidden; text-decoration: none; color: var(--s-text);
    box-shadow: var(--s-shadow-sm); transition: box-shadow .15s ease;
}
.s-news-hero:hover { box-shadow: var(--s-shadow-md); }
@media (min-width: 768px) { .s-news-hero { grid-template-columns: 1.1fr 1fr; } }
.s-news-hero__media { position: relative; min-height: 220px; background: linear-gradient(135deg, var(--s-primary) 0%, var(--s-secondary) 100%); }
/* Direct-child (>): see the matching note on .s-news-feature > img above —
   a descendant selector here would also grab the fallback visual's nested
   club-logo badge and stretch it across the whole hero. */
.s-news-hero__media > img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.s-news-hero__media-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); }
.s-news-hero__media-icon svg { width: 64px; height: 64px; }
.s-news-hero__body { padding: 1.75rem; display: flex; flex-direction: column; gap: .8rem; justify-content: center; }
.s-news-hero__body h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: 0; }
.s-news-hero__excerpt { color: var(--s-text-muted); font-size: .95rem; margin: 0; }

.s-news-card { padding: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.s-news-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); }
.s-news-card__media { position: relative; height: 140px; background: linear-gradient(135deg, #eef0fd 0%, #e0e7ff 100%); }
/* Direct-child (>): see the matching note on .s-news-feature > img above —
   a descendant selector here would also grab the fallback visual's nested
   club-logo badge and stretch it across the whole thumbnail. */
.s-news-card__media > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.s-news-card__media-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--s-primary-light); opacity: .55; }
.s-news-card__media-icon svg { width: 34px; height: 34px; }
.s-news-card__body { padding: 1rem 1.1rem 1.15rem; flex-grow: 1; display: flex; flex-direction: column; gap: .5rem; }
.s-news-card__title { font-weight: 800; font-size: .95rem; line-height: 1.35; }
.s-news-card__excerpt { color: var(--s-text-muted); font-size: .82rem; margin-top: auto; }
.s-news-card__meta { color: var(--s-text-muted); font-size: .74rem; }

.s-news-mostread { display: flex; flex-direction: column; }
.s-news-mostread__item { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--s-border); text-decoration: none; color: var(--s-text); }
.s-news-mostread__item:last-child { border-bottom: none; }
.s-news-mostread__rank { font-weight: 800; font-size: 1.35rem; color: var(--s-border); width: 26px; flex-shrink: 0; line-height: 1.2; }
.s-news-mostread__title { font-weight: 700; font-size: .86rem; line-height: 1.35; }
.s-news-mostread__meta { color: var(--s-text-muted); font-size: .72rem; margin-top: .2rem; }

/* Type-aware "generated visual" for news articles without a real photo —
   renders club colours/badges, scores, or player avatars instead of a
   blank gradient. `mode` (absolute/block) matches how the parent slot
   sizes its media; `size` (lg/sm) scales the inner badges/icons. */
.news-visual {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    background: linear-gradient(135deg, var(--club-primary, var(--s-primary)) 0%, var(--club-secondary, var(--s-secondary)) 100%);
    color: #fff; overflow: hidden;
}
.news-visual--absolute { position: absolute; inset: 0; width: 100%; height: 100%; }
.news-visual--block { position: relative; width: 100%; height: 100px; }

.news-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-visual-img--block { position: static; height: 100px; }

.news-visual--transfer, .news-visual--injury { flex-direction: column; gap: .5rem; }

.news-visual__badge {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.4); font-weight: 800; font-size: .82rem; overflow: hidden;
}
.news-visual__badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.news-visual__badge--lg, .news-visual--lg .news-visual__badge { width: 72px; height: 72px; font-size: 1.2rem; }
.news-visual--sm .news-visual__badge { width: 28px; height: 28px; font-size: .62rem; border-width: 1px; }

.news-visual__score { font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; }
.news-visual--lg .news-visual__score { font-size: 1.7rem; }
.news-visual--sm .news-visual__score { font-size: .8rem; }

.news-visual__meta-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px; padding: .35rem .85rem; font-size: .82rem; font-weight: 700;
    color: #fff; backdrop-filter: blur(2px);
}
.news-visual__meta-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.news-visual__meta-chip--injury svg { color: #fca5a5; }
.news-visual--sm .news-visual__meta-chip { font-size: .62rem; padding: .2rem .55rem; gap: .25rem; }
.news-visual--sm .news-visual__meta-chip svg { width: 11px; height: 11px; }

.news-visual__player { display: flex; align-items: center; justify-content: center; }

.news-visual__route { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; padding-inline: .5rem; }
.news-visual__route svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }
.news-visual--sm .news-visual__route svg { width: 11px; height: 11px; }
.news-visual__chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 700;
}
.news-visual__chip-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.news-visual--sm .news-visual__chip { font-size: .58rem; padding: .12rem .45rem; }
.news-visual--sm .news-visual__chip-logo { width: 12px; height: 12px; }

.news-visual__generic { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); }
.news-visual__generic svg { width: 48px; height: 48px; }
.news-visual--sm .news-visual__generic svg { width: 26px; height: 26px; }

/* "Photo-backed" types — a real scene (the same stadium photo used for the
   site's own background, darkened the same way) with a themed silhouette
   cut-out standing in for a photo we don't have, instead of a flat club-
   colour gradient with a small line icon. Overrides .news-visual's own
   background for these types; add a type here the same way. */
.news-visual--press_conference,
.news-visual--match_result,
.news-visual--coach_signing,
.news-visual--coach_departure,
.news-visual--marketer_signing,
.news-visual--marketer_departure,
.news-visual--loan,
.news-visual--cup_winner,
.news-visual--cup_invitation,
.news-visual--season_award,
.news-visual--sponsor_signing {
    background-color: #05060f;
    background-image:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(77,99,214,.5), transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(155,47,209,.45), transparent 70%),
        linear-gradient(rgba(6,8,20,.55), rgba(6,8,20,.82)),
        url('/images/soccer-background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* Club identity (logo + name) sits beside the silhouette, always on the
   physical left regardless of page direction — this is a photo
   composition, not text, so it shouldn't mirror in Arabic. */
.news-visual__pc-row {
    position: absolute; inset: 0; direction: ltr;
    display: flex; align-items: flex-end; justify-content: center; gap: 1rem;
    padding: 0 1rem;
}
/* Anchored to the top, not the bottom, of the row: some placements (the
   homepage featured card) overlay a headline gradient across the bottom of
   the image, which would otherwise hide the logo/name behind it. The
   silhouette stays grounded at the bottom regardless. */
.news-visual__pc-club { display: flex; flex-direction: column; align-items: center; gap: .4rem; align-self: flex-start; padding-top: .85rem; flex-shrink: 0; }
.news-visual__pc-logo {
    width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block;
    background: #fff; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 8px 18px rgba(0,0,0,.4);
}
.news-visual__pc-logo--initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--club-primary); color: #fff; font-weight: 800; font-size: 1.3rem;
}
/* unicode-bidi: plaintext lets the browser read each name's own script
   direction from its first character instead of inheriting the row's
   forced ltr — without it, an Arabic name here truncates from the wrong
   end (drops its first word instead of its last). */
.news-visual__pc-name {
    color: #fff; font-weight: 800; font-size: .82rem; text-align: center; line-height: 1.2;
    max-width: 110px; text-shadow: 0 1px 4px rgba(0,0,0,.6); unicode-bidi: plaintext;
}
/* flex: 1 (not width: auto sized from the image's own aspect ratio) so the
   figure is capped to whatever room is actually left beside the club badge
   and scales down via object-fit instead of overflowing past its box and
   rendering on top of the badge (later in DOM order = higher paint order)
   on any card narrower than the two elements' combined natural width. */
.news-visual__silhouette {
    align-self: stretch;
    flex: 1 1 0%; min-width: 0; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
}
.news-visual__silhouette img { height: 92%; width: 100%; object-fit: contain; object-position: bottom center; opacity: .92; display: block; }

.news-visual--sm .news-visual__pc-row { gap: .5rem; }
.news-visual--sm .news-visual__pc-club { gap: .2rem; padding-top: .4rem; }
.news-visual--sm .news-visual__pc-logo { width: 34px; height: 34px; border-width: 1px; }
.news-visual--sm .news-visual__pc-logo--initials { font-size: .68rem; }
.news-visual--sm .news-visual__pc-name { font-size: .58rem; max-width: 70px; }

/* Loan: both clubs stacked in the pc-row's left slot (instead of the one
   club press conference/coach/marketing director show) — smaller badges so
   the pair fits the same column, connected by a small down arrow. */
.news-visual__loan-clubs {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    align-self: flex-start; padding-top: .7rem; flex-shrink: 0;
}
.news-visual__loan-club { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.news-visual__loan-clubs .news-visual__pc-logo { width: 40px; height: 40px; border-width: 1px; }
.news-visual__loan-clubs .news-visual__pc-name { font-size: .58rem; max-width: 80px; }
.news-visual__loan-arrow { width: 14px; height: 14px; color: rgba(255,255,255,.65); flex-shrink: 0; }
.news-visual--sm .news-visual__loan-clubs { gap: .15rem; padding-top: .35rem; }
.news-visual--sm .news-visual__loan-clubs .news-visual__pc-logo { width: 24px; height: 24px; }
.news-visual--sm .news-visual__loan-clubs .news-visual__pc-name { font-size: .48rem; max-width: 50px; }
.news-visual--sm .news-visual__loan-arrow { width: 10px; height: 10px; }

/* Cup winner/invitation and season award: the celebration image spans the
   full card width at the bottom instead of sitting beside a club badge on
   one side — there's no single figure here to pair a badge with — with the
   club badge and name stacked above it. */
.news-visual__award-row {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.news-visual__award-club { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .85rem 1rem .5rem; }
.news-visual__award-band { width: 100%; height: 46%; overflow: hidden; flex-shrink: 0; }
.news-visual__award-band img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.news-visual--sm .news-visual__award-club { gap: .2rem; padding: .4rem .5rem .25rem; }
.news-visual--sm .news-visual__award-band { height: 42%; }

/* Physical right (not inset-inline-start) and pinned to the top: the club
   badge beside it (press conference/coach/marketer/loan/sponsor) is forced
   to the physical left regardless of page direction, so this has to stay
   on the opposite physical side to never collide with it in either
   language — and top because a bottom placement gets hidden behind the
   homepage featured card's headline overlay. */
.news-visual__type-chip {
    position: absolute; top: .5rem; right: .5rem;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(6,8,20,.55); backdrop-filter: blur(6px);
    color: #fff; font-weight: 700; font-size: .7rem;
    border: 1px solid rgba(255,255,255,.18);
    padding: .28rem .6rem; border-radius: 999px;
}
.news-visual__type-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.news-visual--sm .news-visual__type-chip { font-size: .6rem; padding: .2rem .5rem; top: .35rem; right: .35rem; }

/* A faint background watermark (absolutely positioned, out of flow — never
   competes with anything in front of it for space, so it can't overlap it
   the way the press-conference silhouette once did) behind a type's real
   content: the club badges and score for match_result, the player avatar
   and route chips for loan. */
.news-visual__watermark {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
}
.news-visual__watermark img { height: 100%; width: auto; opacity: .14; display: block; }
.news-visual__mr-row {
    position: relative; z-index: 1; direction: ltr; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 1.25rem;
    padding-inline: 1rem;
}
.news-visual__mr-club { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex-shrink: 0; min-width: 0; }
.news-visual__mr-name {
    color: #fff; font-weight: 800; font-size: .78rem; text-align: center; line-height: 1.2;
    max-width: 100px; text-shadow: 0 1px 4px rgba(0,0,0,.6); unicode-bidi: plaintext;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-visual--sm .news-visual__mr-row { gap: .6rem; }
.news-visual--sm .news-visual__mr-name { font-size: .56rem; max-width: 60px; }
/* Centered everywhere except: on narrow viewports the homepage's featured
   card shrinks to .s-news-feature's own mobile min-height (see the
   min-height: 260px override above), leaving too little room above its
   headline overlay for a true center to clear it — so pin to the top
   there specifically, the same fix already used for press conference. */
@media (max-width: 767px) {
    .s-news-feature .news-visual__mr-row { align-self: flex-start; padding-top: .85rem; }
}

/* Advertisement slots (homepage + club dashboard) */
.s-ad-slot { margin: 0 auto 2rem; text-align: center; }
.s-ad-slot-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--s-text-muted); margin-bottom: .4rem; }
.s-ad-slot-img { max-width: 100%; height: auto; border-radius: var(--s-radius-md); display: inline-block; }
.s-ad-slot iframe, .s-ad-slot ins { max-width: 100%; }

/* Generic arrow-controlled horizontal scroller, used by the Match
   Center row — see public/js/site.js for the click/disabled-state
   behaviour. */
.s-hscroll { position: relative; }
.s-hscroll-track { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.s-hscroll-track::-webkit-scrollbar { display: none; }
.s-hscroll-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--s-surface); color: var(--s-text); box-shadow: var(--s-shadow-md);
    display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s ease;
}
.s-hscroll-arrow svg { width: 18px; height: 18px; }
.s-hscroll-arrow.prev { inset-inline-start: .5rem; }
.s-hscroll-arrow.next { inset-inline-end: .5rem; }
[dir="rtl"] .s-hscroll-arrow.prev svg, [dir="rtl"] .s-hscroll-arrow.next svg { transform: scaleX(-1); }
.s-hscroll-arrow[disabled] { opacity: 0; pointer-events: none; }

/* Match Center widget (homepage): a slim gradient day-tab strip above a
   horizontally-scrolling row of compact match cards, so any number of
   fixtures fits without growing the page's vertical rhythm. Each card
   lays its two teams out side by side (badge+name — score/time —
   name+badge), not stacked, so the card reads as one match at a glance. */
.s-mc { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); overflow: hidden; }
.s-mc-tabs { display: flex; gap: .15rem; padding: .5rem .5rem; background: linear-gradient(135deg, #121319 0%, var(--s-secondary) 100%); }
.s-mc-tab {
    flex: 1; border: none; background: transparent; padding: .5rem .6rem; border-radius: 10px;
    font-weight: 700; font-size: .78rem; color: rgba(255,255,255,.6); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.s-mc-tab:hover { color: #fff; }
.s-mc-tab.active { background: rgba(255,255,255,.16); color: #fff; }
.s-mc-panels { background: var(--s-bg); }
.s-mc-panel { display: none; }
.s-mc-panel.active { display: block; }
.s-mc-track { display: flex; gap: 0; }
.s-mc-empty { padding: 2.5rem 1rem; width: 100%; }
.s-mc-card {
    flex: 0 0 auto; width: max-content; display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1rem 1.35rem; text-decoration: none; color: var(--s-text); transition: background .15s ease;
    border-inline-end: 1px solid var(--s-border);
}
.s-mc-card:last-child { border-inline-end: none; }
.s-mc-card:hover { background: var(--s-surface); }
.s-mc-competition {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
    background: linear-gradient(135deg, #121319 0%, var(--s-secondary) 100%); color: #fff;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .25rem .6rem; border-radius: 999px;
}
.s-mc-competition svg { width: 11px; height: 11px; flex-shrink: 0; }
.s-mc-competition span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-mc-card-teams { display: flex; align-items: center; gap: .85rem; }
.s-mc-team { display: flex; align-items: center; gap: .5rem; }
.s-mc-team-name { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.s-mc-center { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 56px; }
.s-mc-score { font-weight: 800; font-size: 1.2rem; }
.s-mc-time { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .78rem; color: var(--s-text-muted); }
.s-mc-time svg { width: 12px; height: 12px; }
.s-mc-live {
    display: inline-flex; align-items: center; gap: .35rem; color: #dc2626; font-weight: 800; font-size: .74rem;
    letter-spacing: .03em; text-transform: uppercase;
}
.s-mc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; animation: s-mc-pulse 1.4s ease-in-out infinite; }
@keyframes s-mc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
@media (max-width: 480px) {
    /* No fixed width here — team names render in full (no truncation),
       so the card must size to its content like on desktop, or the
       unwrapped nowrap text overflows the box and overlaps the next card. */
    .s-mc-team-name { font-size: .74rem; }
    .s-mc-tab { font-size: .7rem; padding: .4rem .3rem; }
}

/* Match Center full page — a wider day-tab strip (9 days instead of 3,
   so it scrolls horizontally rather than squeezing) above a vertically
   stacked list of full-width match rows, instead of the homepage
   widget's horizontally-scrolling card row. */
.s-mc-tabs--days { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; justify-content: safe center; }
.s-mc-tabs--days::-webkit-scrollbar { display: none; }
.s-mc-tabs--days .s-mc-tab { flex: 0 0 auto; min-width: 72px; }
.s-mc-tab__day { display: block; font-size: .68rem; opacity: .75; }
.s-mc-tab__date { display: block; }

.s-mc-day-panel { padding: 1rem; }

/* One row per match: home team — center (score/status/league) — away team,
   as a 3-column grid so every card shares the exact same column widths
   (1fr auto 1fr) and lines up card to card. Team names are never
   truncated — no ellipsis, no nowrap — a long real club name just wraps
   instead of being cut off.

   Each team cell is itself a 2-track grid (crest track + name track), NOT
   a flex box that hugs its content toward one edge — a flex box's size
   depends on its content, so a short name ("Toulouse") and a long one
   ("Al-Ittihad Alexandria") left the crest sitting at a different X
   position card to card. Pinning the crest to its own fixed-width track
   keeps every home crest at the exact same offset from the card edge, and
   every away crest likewise, regardless of how long the name next to it
   is — only the name's own track flexes. The name still leans toward the
   shared center column via `text-align: end`/`start` (logical, so it
   mirrors under dir="rtl" automatically). */
.s-mc-row {
    display: block; padding: .9rem 1rem;
    border-radius: var(--s-radius-md); background: var(--s-surface); border: 1px solid var(--s-border);
    text-decoration: none; color: var(--s-text); margin-bottom: .75rem; transition: box-shadow .15s ease, transform .15s ease;
}
.s-mc-row:last-child { margin-bottom: 0; }
.s-mc-row:hover { box-shadow: var(--s-shadow-md); transform: translateY(-2px); }

.s-mc-row__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; }
.s-mc-row__team { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .55rem; min-width: 0; }
.s-mc-row__team--away { grid-template-columns: 1fr auto; }
.s-mc-row__team .s-mc-team-name {
    min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none;
    font-weight: 700; font-size: .84rem; line-height: 1.2; text-align: end;
}
.s-mc-row__team--away .s-mc-team-name { text-align: start; }

.s-mc-center { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 84px; }
.s-mc-score-line { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: 1rem; white-space: nowrap; }
.s-mc-score-line svg { width: 12px; height: 12px; opacity: .7; flex-shrink: 0; }
.s-mc-penalty-line { font-size: .68rem; font-weight: 700; color: var(--s-text-muted); white-space: nowrap; }
.s-mc-center .s-mc-competition { max-width: 100%; }

.s-mc-status-badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px;
    font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.s-mc-status-badge.scheduled { color: #1e40af; background: #dbeafe; }
.s-mc-status-badge.live { color: #fff; background: #dc2626; }
.s-mc-status-badge.finished { color: #15803d; background: #dcfce7; }
.s-mc-status-badge.postponed { color: #b45309; background: #fef3c7; }
.s-mc-status-badge.cancelled { color: #991b1b; background: #fee2e2; }
.s-mc-status-badge.live .s-mc-live-dot { background: #fff; }

/* On a phone-width card, crest-beside-name has too little room for a real
   club name to sit on one line, and letting it wrap while staying beside
   the crest reintroduces the same "crest position depends on the name"
   problem the grid above was built to avoid. Stack crest above name
   instead — both centered in the team's own column — so a long name
   wraps directly under its crest without shifting the crest sideways at
   all, and every card's crests still land in the exact same two columns. */
@media (max-width: 480px) {
    .s-mc-row__main { gap: .4rem; }
    .s-mc-row__team, .s-mc-row__team--away {
        grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; gap: .3rem;
    }
    .s-mc-row__team .s-mc-team-name, .s-mc-row__team--away .s-mc-team-name { text-align: center; font-size: .72rem; }
    /* Away markup is name-then-crest (so the crest lands on the outer
       edge in the desktop grid) — reorder it back to crest-then-name here
       so both sides read the same way once stacked. */
    .s-mc-row__team--away .avatar-chip { order: -1; }
    .s-mc-center { min-width: 66px; }
    .s-mc-score-line { font-size: .88rem; }
    .s-mc-status-badge { font-size: .56rem; padding: .15rem .45rem; }
    .s-mc-center .s-mc-competition { font-size: .56rem; padding: .2rem .45rem; }
}

/* Press conference response options — a full-width block button per
   option, label above description. Deliberately not .btn-s-light: that
   class is `display:inline-flex;white-space:nowrap`, built for a short
   one-line label, which would force the label and its description onto
   the same row and stop the description from ever wrapping. */
.s-pc-option {
    display: block; width: 100%; text-align: start; background: #f6f7fb; border: 1px solid var(--s-border);
    border-radius: var(--s-radius-md); padding: .9rem 1.1rem; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.s-pc-option:hover { background: #eceefc; border-color: var(--s-primary-light); }
.s-pc-option strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.s-pc-option span { display: block; color: var(--s-text-muted); font-size: .85rem; }

/* Competitions page — standings / top scorers / stats tabs beneath the
   league filter, all client-side once the fragment is on the page (see
   public/js/site.js), so switching tabs never re-fetches anything. */
.s-league-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; overflow-x: auto; }
.s-league-tab {
    flex: 0 0 auto; border: none; background: var(--s-surface); color: var(--s-text-muted);
    font-weight: 700; font-size: .85rem; padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--s-border); transition: all .15s ease;
}
.s-league-tab:hover { color: var(--s-text); }
.s-league-tab.active { background: var(--s-primary); color: #fff; border-color: var(--s-primary); }
.s-league-panel { display: none; }
.s-league-panel.active { display: block; }

/* Transfer Market page — "My Squad" and "Browse Market" split into
   tabs (see [data-ttab]/[data-tpanel] in public/js/site.js) so the
   page isn't one long scroll of both lists stacked on top of each other. */
.s-transfers-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; overflow-x: auto; }
.s-transfers-tab {
    flex: 0 0 auto; border: none; background: var(--s-surface); color: var(--s-text-muted);
    font-weight: 700; font-size: .85rem; padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--s-border); transition: all .15s ease;
}
.s-transfers-tab:hover { color: var(--s-text); }
.s-transfers-tab.active { background: var(--s-primary); color: #fff; border-color: var(--s-primary); }
.s-transfers-panel { display: none; }
.s-transfers-panel.active { display: block; }

/* Weekly missions — an animated fill (CSS-only, via a --target-width
   custom property driving a keyframe rather than a transition, so it
   plays on first paint with no JS) plus a subtle shimmer sweep, and a
   round status icon per mission card instead of a plain text badge. */
.s-mission-progress { height: 14px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.s-mission-progress__fill {
    height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--s-primary), var(--s-secondary));
    position: relative; overflow: hidden;
    animation: s-mission-fill-in 1s cubic-bezier(.22,1,.36,1) forwards;
}
.s-mission-progress__fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: s-mission-shimmer 1.8s ease-in-out infinite;
}
@keyframes s-mission-fill-in { from { width: 0; } to { width: var(--target-width); } }
@keyframes s-mission-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.s-mission-status-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.s-mission-status-icon svg { width: 17px; height: 17px; }
.s-mission-status-icon.done { background: #16a34a; color: #fff; }
.s-mission-status-icon.pending { background: #e5e7eb; color: #9ca3af; }

.s-mission-number {
    direction: ltr; font-size: 2.1rem; line-height: 1; font-weight: 800;
    font-style: italic; transform: skewX(-10deg); display: inline-block;
    background: linear-gradient(135deg, var(--s-primary-dark) 0%, var(--s-primary) 55%, var(--s-secondary) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;
}