/* Kisure Frontend v584
 * Upcoming Match Centre + reusable face-first player portraits.
 * Presentation only: original player media remains untouched.
 */

/* --------------------------------------------------------------------------
   Face-first player media
   -------------------------------------------------------------------------- */
.ks-player-face-frame {
    --ks-face-scale: 1.32;
    --ks-face-x: 50%;
    --ks-face-y: 8%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #f8fbfc, #edf5f5);
    border: 1px solid rgba(14, 125, 121, .12);
}

.ks-player-face-frame > img,
.ks-player-face-img,
.global-search-card__media.is-player-face > img,
.global-search-suggestion__media.is-player-face > img,
.team-details-player-photo img,
.fixture-player-photo {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: var(--ks-face-x, 50%) var(--ks-face-y, 8%) !important;
    transform: scale(var(--ks-face-scale, 1.32));
    transform-origin: 50% 12%;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block;
}

/* Balanced face-first framing: keep the complete face and a small amount of neck,
   while removing most shoulders/jersey. The original source image is never altered. */
.ks-player-face-frame > img,
.ks-player-face-img {
    backface-visibility: hidden;
    will-change: transform;
}

/* Hero already owns the crop frame; remove old contain/padding behaviour. */
.football-player-hero__photo {
    overflow: hidden !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}
.football-player-hero__photo .ks-player-face-img--hero {
    /* Keep hair, chin and a little neck in-frame across different portrait styles. */
    --ks-face-scale: 1.44;
    --ks-face-y: 6%;
    transform-origin: 50% 12%;
}

.ks-player-face-frame--squad { width: 74px; height: 74px; border-radius: 18px; --ks-face-scale: 1.34; }
.ks-player-face-frame--table { width: 28px; height: 28px; border-radius: 999px; --ks-face-scale: 1.32; }
.ks-player-face-frame--mini { width: 38px; height: 38px; border-radius: 999px; --ks-face-scale: 1.32; }
.ks-player-face-frame--desk { width: 38px; height: 38px; border-radius: 999px; --ks-face-scale: 1.32; }
.ks-player-face-frame--header { width: 42px; height: 42px; border-radius: 999px; --ks-face-scale: 1.34; }
.ks-player-face-frame--article { width: 36px; height: 36px; border-radius: 999px; --ks-face-scale: 1.34; }
.ks-player-face-frame--lineup { width: 30px; height: 30px; border-radius: 999px; --ks-face-scale: 1.34; }
.ks-player-face-frame--formation {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
    --ks-face-scale: 1.34;
}

/* Existing dedicated player-photo frames. */
.ks-transfer-player-photo,
.ks-top-transfer-row__photo,
.global-search-card__media.is-player-face,
.global-search-suggestion__media.is-player-face,
.team-details-player-photo,
.fixture-player-photo-container {
    overflow: hidden !important;
}
.ks-transfer-player-photo .ks-player-face-img,
.ks-top-transfer-row__photo .ks-player-face-img {
    --ks-face-scale: 1.34;
    --ks-face-y: 8%;
}
.global-search-card__media.is-player-face,
.global-search-suggestion__media.is-player-face {
    --ks-face-scale: 1.34;
    --ks-face-y: 8%;
    padding: 0 !important;
    border-radius: 999px;
}

/* Restore expected geometry where legacy CSS targets direct images. */
.football-player-card--profile > .ks-player-face-frame--squad { margin: 0; }
.football-player-card--profile > .ks-player-face-frame--squad img { width: 100% !important; height: 100% !important; }
.football-lineup-player > .ks-player-face-frame--lineup,
.football-formation-player > .ks-player-face-frame--formation { flex: 0 0 auto; }
.football-header-toplist .ks-player-face-frame--header { width: 42px; height: 42px; }
.ks-desk-leader .ks-player-face-frame--desk { width: 38px; height: 38px; }
.football-table-team .ks-player-face-frame--table { width: 28px; height: 28px; }
.football-mini-list .ks-player-face-frame--mini { width: 40px; height: 40px; }
.football-brief-list--players .ks-player-face-frame--mini { width: 34px; height: 34px; }
.football-side-panel--discipline .football-mini-list .ks-player-face-frame--mini { width: 38px; height: 38px; }
.article-transfer-summary-block__player .ks-player-face-frame--article { flex: 0 0 36px; }

@media (max-width: 560px) {
    .ks-player-face-frame--formation { width: 42px; height: 42px; }
}

html[data-theme="dark"] .ks-player-face-frame,
html[data-theme="dark"] .football-player-hero__photo {
    background: linear-gradient(180deg, #132235, #0d1a2b);
    border-color: rgba(94, 234, 212, .14);
}

/* --------------------------------------------------------------------------
   Upcoming Match Centre
   -------------------------------------------------------------------------- */
.football-prematch-centre {
    display: grid;
    gap: 18px;
    min-height: 520px;
    padding: 22px !important;
    background:
        radial-gradient(circle at 0 0, rgba(14, 165, 164, .10), transparent 34%),
        linear-gradient(180deg, #fff 0%, #fbfdfd 100%) !important;
}
.football-prematch-centre__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}
.football-prematch-centre__head h2 { margin: 3px 0 6px; font-size: clamp(1.35rem, 2.3vw, 2rem); }
.football-prematch-centre__head p { margin: 0; max-width: 690px; color: var(--text-soft, #64748b); font-weight: 650; line-height: 1.55; }
.football-prematch-countdown {
    min-width: 205px;
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
    padding: 14px 16px;
    border-radius: 18px;
    background: #07142a;
    color: #fff;
    box-shadow: 0 12px 28px rgba(7, 20, 42, .12);
}
.football-prematch-countdown small { color: #75ded6; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.football-prematch-countdown strong { font-size: 1.18rem; line-height: 1.1; }
.football-prematch-countdown span { font-size: .72rem; color: #cbd5e1; font-weight: 700; }

.football-prematch-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.football-prematch-team {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    color: var(--text, #0f172a);
    text-decoration: none;
    background: rgba(255,255,255,.82);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.football-prematch-team:hover { transform: translateY(-1px); border-color: rgba(14, 165, 164, .35); box-shadow: 0 10px 24px rgba(15,23,42,.06); }
.football-prematch-team__crest { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid rgba(15,23,42,.07); }
.football-prematch-team__crest img { width: 46px; height: 46px; object-fit: contain; }
.football-prematch-team__crest i { color: #0e8d8b; font-size: 1.35rem; }
.football-prematch-team__copy { min-width: 0; display: grid; gap: 2px; }
.football-prematch-team__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.football-prematch-team__copy small { color: var(--text-soft, #64748b); font-size: .72rem; font-weight: 800; }
.football-prematch-team__table { display: grid; justify-items: end; gap: 2px; }
.football-prematch-team__table b { font-size: 1.1rem; color: #087c80; }
.football-prematch-team__table em { font-style: normal; font-size: .7rem; color: var(--text-soft, #64748b); font-weight: 800; white-space: nowrap; }
.football-prematch-versus__middle { display: grid; place-items: center; align-content: center; gap: 3px; text-align: center; }
.football-prematch-versus__middle span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 999px; background: #07142a; color: #fff; font-weight: 950; font-size: 1.05rem; }
.football-prematch-versus__middle small { max-width: 92px; color: var(--text-soft, #64748b); font-weight: 800; font-size: .62rem; line-height: 1.2; }

.football-prematch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.football-prematch-card { min-width: 0; display: grid; align-content: start; gap: 13px; padding: 16px; border-radius: 20px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.84); }
.football-prematch-card--coverage { grid-column: 1 / -1; }
.football-prematch-card__title { display: flex; align-items: center; gap: 10px; }
.football-prematch-card__title > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(14,165,164,.10); color: #087c80; }
.football-prematch-card__title > span { display: grid; gap: 1px; }
.football-prematch-card__title small { color: #087c80; text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; font-weight: 900; }
.football-prematch-card__title strong { font-size: .95rem; }
.football-prematch-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(15,23,42,.06); }
.football-prematch-form-row > span { display: grid; gap: 1px; min-width: 0; }
.football-prematch-form-row > span strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.football-prematch-form-row > span small { color: var(--text-soft, #64748b); font-size: .7rem; font-weight: 750; }
.football-prematch-form { display: flex; gap: 4px; align-items: center; }
.football-prematch-form i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; font-style: normal; font-size: .68rem; font-weight: 950; }
.football-prematch-form i.is-w { background: #dcfce7; color: #166534; }
.football-prematch-form i.is-d { background: #e2e8f0; color: #475569; }
.football-prematch-form i.is-l { background: #fee2e2; color: #991b1b; }
.football-prematch-form em { font-style: normal; color: var(--text-soft, #64748b); font-size: .7rem; font-weight: 800; }
.football-prematch-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; color: #087c80; font-size: .76rem; font-weight: 900; text-decoration: none; }
.football-prematch-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.football-prematch-facts > span { display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 7px; padding: 10px; border-radius: 14px; background: rgba(15,23,42,.035); }
.football-prematch-facts > span > i { grid-row: 1 / span 2; align-self: center; color: #0e8d8b; }
.football-prematch-facts small { color: var(--text-soft, #64748b); font-size: .63rem; font-weight: 800; }
.football-prematch-facts strong { font-size: .77rem; line-height: 1.25; overflow-wrap: anywhere; }
.football-prematch-coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.football-prematch-coverage > span { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; padding: 11px; border-radius: 14px; background: rgba(15,23,42,.035); }
.football-prematch-coverage > span > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; color: #64748b; background: #fff; border: 1px solid rgba(15,23,42,.06); }
.football-prematch-coverage > span.is-ready > i { color: #087c80; background: #dff8f5; }
.football-prematch-coverage > span > span { display: grid; gap: 2px; }
.football-prematch-coverage strong { font-size: .77rem; }
.football-prematch-coverage small { color: var(--text-soft, #64748b); font-size: .66rem; line-height: 1.3; font-weight: 700; }
.football-prematch-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.football-prematch-actions .site-button { min-height: 40px; font-size: .75rem; }
.football-prematch-actions .site-button--ghost { background: transparent; color: #087c80; border: 1px solid rgba(14,125,121,.22); }


/* v584: visibly live countdown, refreshed every second. */
.football-prematch-countdown strong {
    display: inline-flex;
    align-items: baseline;
    min-height: 1.35em;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.football-prematch-countdown.is-ticking strong::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-radius: 999px;
    background: #75ded6;
    box-shadow: 0 0 0 0 rgba(117,222,214,.45);
    animation: kisureCountdownPulse 1s ease-out infinite;
}
@keyframes kisureCountdownPulse {
    0% { box-shadow: 0 0 0 0 rgba(117,222,214,.45); opacity: 1; }
    80%, 100% { box-shadow: 0 0 0 7px rgba(117,222,214,0); opacity: .75; }
}

html[data-theme="dark"] .football-prematch-centre {
    background: radial-gradient(circle at 0 0, rgba(45,212,191,.10), transparent 34%), linear-gradient(180deg,#0c1728,#0a1423) !important;
}
html[data-theme="dark"] .football-prematch-team,
html[data-theme="dark"] .football-prematch-card { background: rgba(15,27,45,.92); border-color: rgba(148,163,184,.13); }
html[data-theme="dark"] .football-prematch-team__crest,
html[data-theme="dark"] .football-prematch-coverage > span > i { background: #111f33; border-color: rgba(148,163,184,.14); }
html[data-theme="dark"] .football-prematch-facts > span,
html[data-theme="dark"] .football-prematch-coverage > span { background: rgba(148,163,184,.06); }
html[data-theme="dark"] .football-prematch-team__table b,
html[data-theme="dark"] .football-prematch-card__title > i,
html[data-theme="dark"] .football-prematch-card__title small,
html[data-theme="dark"] .football-prematch-link { color: #69ddd4; }

@media (max-width: 900px) {
    .football-prematch-centre { min-height: 0; padding: 16px !important; }
    .football-prematch-centre__head { grid-template-columns: 1fr; }
    .football-prematch-countdown { justify-items: start; text-align: left; min-width: 0; width: 100%; }
    .football-prematch-versus { grid-template-columns: 1fr; }
    .football-prematch-versus__middle { grid-template-columns: auto 1fr; justify-content: center; }
    .football-prematch-versus__middle span { width: 42px; height: 42px; }
    .football-prematch-team--away { direction: ltr; }
}

@media (max-width: 680px) {
    .football-prematch-grid { grid-template-columns: 1fr; }
    .football-prematch-card--coverage { grid-column: auto; }
    .football-prematch-coverage { grid-template-columns: 1fr; }
    .football-prematch-facts { grid-template-columns: 1fr; }
    .football-prematch-team { grid-template-columns: 50px minmax(0,1fr) auto; padding: 11px; }
    .football-prematch-team__crest { width: 50px; height: 50px; }
    .football-prematch-team__crest img { width: 40px; height: 40px; }
    .football-prematch-actions .site-button { flex: 1 1 150px; }
}