/* -----------------------------------------------------------------------------
   Shared design tokens (new.css is loaded by both PcAsset and PcHomeAsset, so
   these reach every page). score24h.css keeps the older set (--bg-card, --blue).
   --bg-box:      #12141b, fill of the stand-alone content boxes (league cards,
                  stat tables, right-rail cards) - replaces --bg-card + outline.
   --blue-accent: #1d8fff, the highlight blue used site-wide (market value,
                  date picker selection, ...) - distinct from --blue #4050ff (pins).
   ----------------------------------------------------------------------------- */

:root {
    --bg-box: #12141b;
    --blue-accent: #1d8fff;
}
.color-red {
    color: red !important;
}

/* League pin (football-favourite.js pinSvg) is an 18x18 <img> of league-stats/pin.svg / pin-active.svg (Figma pin,
   10.5x15 glyph) - a file reference, not inline SVG, to keep the DOM light on the home feed (one pin per league) */
.match-league-section__pin img,
.sidebar-league-item__pin img {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Live match card: only the minute mark blinks ("83’", "45+3’"), like a running
   clock. Before, a plain minute did not blink at all and stoppage time blinked
   as a whole (.is-stoppage in custom.css - switched off here). HT / PEN have no
   mark. The score card of the match page blinks its mark in stoppage time only.
   Its minute paints the text through background-clip:text, which keeps drawing
   a child whatever the child's opacity, so the mark would never fade: stoppage
   time uses a plain white fill (same colour) instead.
   ----------------------------------------------------------------------------- */
.match-card .match-card__minute.is-stoppage {
    animation: none;
}

.match-score-card__live-row .match-score-card__minute.is-stoppage {
    animation: none;
    background: none;
    -webkit-text-fill-color: #fff;
}

.match-card__minute-mark,
.match-score-card__minute.is-stoppage .match-score-card__minute-mark {
    animation: match-minute-mark-blink 1.2s ease-in-out infinite;
}

@keyframes match-minute-mark-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .match-card__minute-mark,
    .match-score-card__minute.is-stoppage .match-score-card__minute-mark {
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   Odds of the match page follow the "Odds" switch of the settings menu (on by
   default, main.js hideShowOdds). Hidden from CSS, not from JS: nothing shows
   before the script runs, and the Summary tab can arrive later through AJAX.
   ----------------------------------------------------------------------------- */
html:not(.show-match-odds) .match-upcoming-odds,
html:not(.show-match-odds) .match-detail-tabs-bar__tab[data-keytab="odds"] {
    display: none;
}

/* -----------------------------------------------------------------------------
   Home feed — league block header (Figma 8166:286524 "section_header")
   Right side, PC and phone: bracket / standings shortcut while the league is
   open, the number of matches while it is folded, then the fold chevron.
   Leagues with the CMS "show matches" toggle off come folded from the server
   with no matches in the HTML; opening one loads its matches (index.php
   loadFootballLeagueMatches). Open leagues keep their matches in the DOM.
   Phones: 50px #121418 box, radius 12, 8px padding. Desktop: plain header,
   boxed only while folded so a run of folded leagues reads as a list.
   ----------------------------------------------------------------------------- */

/* Bracket / standings shortcut next to the chevron (same 32px hit area) */
.match-league-section__hub {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
}

.match-league-section__hub img {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.match-league-section__toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.match-league-section__toggle img {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
    /* expanded = chevron up; the file is a chevron-down */
    transform: rotate(180deg);
    transition: transform .15s ease;
}

.match-league-section.is-collapsed .match-league-section__toggle img {
    transform: none;
}

.match-league-section.is-collapsed > .match-card-list {
    display: none;
}

/* Number of matches of a folded league, in place of the bracket / standings shortcut */
.match-league-section__count {
    display: none;
    flex-shrink: 0;
    min-width: 20px;
    padding: 0 4px;
    color: #8c8c8c;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
}

.home-match-feed__leagues .match-league-section__toggle,
.home-match-feed__leagues .match-league-section__hub {
    display: inline-flex;
}

.home-match-feed__leagues .match-league-section.is-collapsed .match-league-section__hub {
    display: none;
}

.home-match-feed__leagues .match-league-section.is-collapsed .match-league-section__count {
    display: block;
}

.home-match-feed__leagues .match-league-section.is-collapsed {
    gap: 0;
}

/* The box of the league head (same open or folded) is in custom.css: new.css loads async on the home page and the
   50px box arriving late moved the whole feed */

/* Matches of a folded league being fetched: no second click until they arrive */
.match-league-section.is-loading-matches .match-league-section__toggle {
    opacity: .4;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Score24h — 404 page
   Figma 4509:176126
   ----------------------------------------------------------------------------- */

.page-404 {
    background: #0d0d0d;
    color: #eee;
    min-height: 100vh;
}

.page-404 #body.page-404-main,
.page-404 .page-404-main {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 48px 16px 64px;
}

@media (max-width: 1400px) {
    .page-404 #body.page-404-main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.page-404-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80vh;
    min-height: clamp(420px, 62vh, 680px);
    padding: 48px 16px 64px;
    overflow: hidden;
    background: #0d0d0d;

}

.page-404-main__rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(920px, 140vw);
    height: min(920px, 140vw);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.045) 31.2% 31.5%, transparent 31.7%),
        radial-gradient(circle, transparent 0 41%, rgba(255, 255, 255, 0.04) 41.2% 41.5%, transparent 41.7%),
        radial-gradient(circle, transparent 0 51%, rgba(255, 255, 255, 0.035) 51.2% 51.5%, transparent 51.7%),
        radial-gradient(circle, transparent 0 62%, rgba(255, 255, 255, 0.03) 62.2% 62.5%, transparent 62.7%),
        radial-gradient(circle, transparent 0 74%, rgba(255, 255, 255, 0.025) 74.2% 74.5%, transparent 74.7%),
        radial-gradient(circle at center, rgba(253, 0, 0, 0.08) 0%, transparent 55%);
    mask-image: radial-gradient(circle, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 72%);
}

.page-404-hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 560px;
    text-align: center;
}

.page-404-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    margin: 0 auto;
}

.page-404-code {
    margin: 0;
    font-size: clamp(120px, 28vw, 220px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #2a2c33;
    user-select: none;
}

.page-404-ufo {
    position: absolute;
    left: 50%;
    top: 46%;
    width: clamp(140px, 28vw, 220px);
    height: auto;
    transform: translate(-50%, -48%);
    pointer-events: none;
    filter: drop-shadow(0 12px 28px rgba(253, 0, 0, 0.28));
    animation: page-404-float 4.5s ease-in-out infinite;
}

.page-404-message {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #8c8c8e;
}
.page-404-message strong {
    font-weight: 400;
    color: #FFF;
}
.page-404-btn {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 0.5px solid #FD0000;
    background: #383845;
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 25px;
}

.page-404-btn:hover {
    background: #1c1f28;
    border-color: #ff2a2a;
    box-shadow: 0 0 18px rgba(253, 0, 0, 0.28);
    color: #fff;
}

.page-404-btn:focus-visible {
    outline: 2px solid #fd0000;
    outline-offset: 3px;
}

.page-404 .site-footer {
    margin-top: 0;
}

.page-404 .site-footer__bg {
    border-top: 1px solid rgba(253, 0, 0, 0.55);
    box-shadow: 0 -8px 28px rgba(253, 0, 0, 0.18);
}

@keyframes page-404-float {
    0%,
    100% {
        transform: translate(-50%, -48%);
    }
    50% {
        transform: translate(-50%, calc(-48% - 10px));
    }
}

#match-simulation {
    aspect-ratio: 1.4 / 1;
}
@media (max-width: 1311px) {
    #match-simulation {
        aspect-ratio: 1.3 / 1;
    }
}
@media (max-width: 1199px) {
    #match-simulation {
        aspect-ratio: 1.4 / 1;
    }
}
@media (max-width: 767px) {
    #match-simulation {
        aspect-ratio: 1.2 / 1;
    }
}

@media (max-width: 767px) {
    .page-404-main {
        min-height: 480px;
        padding: 32px 16px 48px;
        height: 100%;
    }

    .page-404-hero {
        gap: 16px;
    }

    .page-404-visual {
        min-height: 200px;
    }

    .page-404-message {
        font-size: 14px;
        line-height: 20px;
    }
    .page-404-btn{
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        padding: 5px 10px;
        border-radius: 10px;
        border: 0.5px solid #FD0000;
        background: #383845;
        color: #FFF;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------------
   Score24h — Terms of service
   Figma 4443:156868
   ----------------------------------------------------------------------------- */

.page-terms-of-service .home-main.legal-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
}

.legal-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-height: 100%;
    padding: 20px 24px;
    border-radius: 16px;
    background: #15171d;
}

.legal-card__title {
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #262A34;
}

.legal-card__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-card__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #eee;
}

.legal-card__text {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #B6BAC3;
}

.legal-card__text strong {
    font-weight: 600;
    color: #b6bac3;
}

.page-terms-of-service .site-footer__nav-link[aria-current="page"] {
    color: #eee;
}

@media (max-width: 767px) {
    .legal-card {
        padding: 8px;
        border-radius: 12px;
        gap: 10px;
    }

    .legal-card__title {
        font-size: 20px;
        line-height: 26px;
        padding-bottom: 8px;
    }

    .legal-card__heading {
        font-size: 15px;
        line-height: 22px;
    }

    .legal-card__text {
        font-size: 13px;
        line-height: 20px;
    }
}

.scrollbar
{
    height: 100vh;
	overflow-y: scroll;
	margin-bottom: 25px;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

.force-overflow
{
	min-height: 450px;
}

.match-events-rounds{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.match-events-rounds[hidden],
.show-more-btn[hidden] {
    display: none !important;
}
.league-overview-panel.is-active{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.league-overview-dates .match-date-tabs__inner{
    display: none;
}
.league-stats-dropdown.is-open .league-stats-dropdown__menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.league-stats-dropdown.is-open .league-stats-dropdown__trigger {
    background: rgba(85, 85, 100, 0.35);
    border: 1px solid transparent;
    background: linear-gradient(#0F1015, #0F1015) padding-box, linear-gradient(82deg, #FD0000 3.87%, #2E2F3E70 70.11%) border-box;
}

.schedule-card__sport--fixture-tag{
    display: none !important;
}

.show-more-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.show-more-btn__inner{
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: rgba(85, 85, 100, 0.25);
    border: 0;
    cursor: pointer;
}
.show-more-btn__inner:hover {
    background-color: rgb(123 123 123 / 25%);
}
.show-more-btn__text{
    color: #FFF;
    font-size: 12px;
    font-weight: 500;
    font-family: "Be Vietnam Pro";
}
/*.league-overview-section__head{*/
/*    display: none;*/
/*}*/
.league-overview-results__label{
    display: none;
}

/* Red card count on league results */
.page-league-results .league-overview-results .schedule-card--result .schedule-card__card-yc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff6666 0%, #ff0000 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.page-league-results .league-overview-results .schedule-card--result {
    gap: 8px;
    padding: 4px 8px;
}

.page-league-overview .league-overview-results .schedule-card--result .schedule-card__time-block{
    align-items: center;
}

.page-league-results .league-overview-results .schedule-card--result .schedule-card__date--result {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    line-height: normal;
}

.page-league-results .league-overview-results .schedule-card--result .schedule-card__favorite--result {
    position: relative;
    z-index: 2;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.page-league-results .league-overview-results .schedule-card--result .schedule-card__favorite--result:hover,
.page-league-results .league-overview-results .schedule-card--result .schedule-card__favorite--result.is-active {
    background: rgba(253, 194, 0, 0.12);
}

.page-league-results .league-overview-results .schedule-card--result .schedule-card__favorite--result .match-card__chip-favorite-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 1024px) {
    .page-league-results .league-overview-results .schedule-card--result {
        gap: 6px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__score-col--stacked {
        width: 48px;
        min-width: 48px;
        padding: 4px 6px;
    }
}

@media (max-width: 767px) {
    .page-league-results .league-overview-results .schedule-card--result {
        min-height: 64px;
        height: auto;
        padding: 8px;
    }

    .page-league-results .league-overview-results .schedule-card--result .match-card__sport--muted {
        display: none;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__time-block {
        min-width: 42px;
        width: 42px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__date--result {
        font-size: 10px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__divider {
        margin: 0 2px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__teams--stacked {
        min-width: 0;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__team-logo {
        width: 20px;
        height: 20px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__team-name {
        font-size: 11px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__score-col--stacked {
        width: 34px;
        min-width: 34px;
        padding: 2px 4px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__score {
        font-size: 14px;
    }

    .page-league-results .league-overview-results .schedule-card--result .schedule-card__favorite--result {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }
}

/*Add News Details*/
.mentions{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(85, 85, 100, 0.25);
}
.mention-title{
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.list-mentions{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.box-mentions{
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    background: #15171D;
}
.box-mentions:hover{
    background: #434343;
}
.box-mentions span{
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
.related-articles{
    display: flex;
    width: 100%;
    padding: 10px;
    flex-direction: column;
    gap: 12px;
    border-radius: 16px;
    background: #15171D;
}
.title-related-category{

}
.title-related-category span{
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
}
@media (max-width: 767px){
    .related-articles .news-item-sm{
        flex-direction: column !important;
    }
    .related-articles .news-item-sm--lg .news-item-sm__thumb{
        width: 100%;
        height: auto;
    }
    a.news-item-sm--lg .news-item-sm__thumb{
        /*width: 100%;*/
        height: auto;
    }
    .box-mentions span{
        font-size: 12px;
        line-height: 18px;
    }
}
/*End News Details*/

/*home back today*/
.back-today {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    z-index: 9999;
    border-radius: 1000px;
    border: 0.5px solid #7A7CA4;
    background: #15171D;
    padding: 10px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.back-today span.mobile {
    display: none;
}
.back-today span {
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}
.back-today:hover {
    background: #242938;
    border-color: #68728a;
}
@media (max-width: 767px){
    .back-today {
        bottom: 75px;
    }
    .back-today span.mobile {
        display: block;
    }
    .back-today span.pc {
        display: none;
    }
}
/* -----------------------------------------------------------------------------
   Match detail — favourite star of the match
   Figma 4192:13908: the 18x18 "Star" component (icons/star.svg + star-active.svg,
   referenced by <img> so the HTML stays small) replaces the 18px/16px PNG pair
   that blurred and sat off-centre. Header star sits in a 32px round chip
   (#555564 at 10%). The stars beside the home/away crest were removed: teams
   are favourited from the team page.
   State: `.is-active` on the button shows the .active img and hides the other
   (score24h.css already does this for .match-card__chip-sep--favorite).
   ----------------------------------------------------------------------------- */

.page-home-detail .match-score-card--detail .match-card__chip-sep--favorite {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 100px;
    background: rgba(85, 85, 100, .1);
}

.page-home-detail .match-score-card--detail .match-card__chip-sep--favorite img {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* League title of the header. Its <a> is the flex item of .match-score-card__head, but the "take the free width and
   shrink" rules (flex: 1 1 0, min-width: 0) are on the .match-score-card__league inside it: a long title ("English
   U21 Professional Development League 2 - Round 5") kept its full width, ran out of the card (the phone page got a
   horizontal scroll) and wrapped the star / share buttons to a second row. Desktop: one line with an ellipsis.
   Phone: up to two lines, so the round is still readable. */
.page-home-detail .match-score-card--detail .match-score-card__league-link {
    flex: 1 1 0;
    min-width: 0;
}

.page-home-detail .match-score-card--detail .match-score-card__league-name {
    min-width: 0;
}

@media (max-width: 767px) {
    .page-home-detail .match-score-card--detail .match-score-card__league-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        line-height: 16px;
    }
}

/* Share (copy link) gets the same 32px round chip as the star so the two header actions match */
.page-home-detail .match-score-card--detail .match-score-card__share {
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 100px;
    background: rgba(85, 85, 100, .1);
}

/* Icons are <img> of icons/link.svg / check-copied.svg (file references, not inline SVG) */
.page-home-detail .match-score-card--detail .match-score-card__share .match-score-card__share-icon {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.page-home-detail .match-score-card--detail .match-score-card__share:hover .match-score-card__share-icon {
    filter: brightness(1.6);
}

.page-home-detail .match-score-card--detail .match-score-card__share .match-score-card__share-icon--done {
    display: none;
}

.page-home-detail .match-score-card--detail .match-score-card__share.is-copied .match-score-card__share-icon {
    display: none;
}

.page-home-detail .match-score-card--detail .match-score-card__share.is-copied .match-score-card__share-icon--done {
    display: block;
}

.page-home-detail .match-score-card--detail .match-card__chip-sep--favorite:hover,
.page-home-detail .match-score-card--detail .match-score-card__share:hover {
    background: rgba(255, 255, 255, .12);
}

/* -----------------------------------------------------------------------------
   Penalty shootout block (match page, Summary tab: football/element/detail/
   _penalty_shootout.php). Ended match: first block of the tab; live: top of the
   Events panel. Rows = dot | home kicker | round | away kicker | dot.
   ----------------------------------------------------------------------------- */
.pen-shootout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-box, #12141b);
    box-sizing: border-box;
}

.pen-shootout__title {
    margin: 0;
    color: #8c8c8e;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.pen-shootout__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 8px;
}

.pen-shootout__total {
    min-width: 24px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.pen-shootout__total.is-winner {
    color: #1fbf75;
}

.pen-shootout__crest {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
}

.pen-shootout__rounds {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pen-shootout__round {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 28px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

.pen-shootout__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #eee;
    font-size: 14px;
    font-weight: 500;
}

.pen-shootout__kicker--home {
    justify-content: flex-end;
}

.pen-shootout__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Player names of the match incidents (events timeline, penalty shootout): CFunction::renderPlayerLink(). Keep the
   text colour of the row, same hover as the lineup links (.match-lineups-link) */
.match-player-link {
    color: inherit;
    text-decoration: none;
}

.match-player-link:hover {
    color: #1b8cff;
}

.pen-shootout__avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a1c23;
    object-fit: cover;
}

.pen-shootout__no {
    color: #8c8c8e;
    font-size: 12px;
    text-align: center;
}

.pen-shootout__dot {
    justify-self: center;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pen-shootout__dot.is-scored {
    background: #1fbf75;
}

.pen-shootout__dot.is-missed {
    background: #f14851;
}

@media (max-width: 767px) {
    .pen-shootout__kicker {
        font-size: 13px;
    }

    .pen-shootout__round {
        gap: 6px;
        min-height: 36px;
    }
}

/* -----------------------------------------------------------------------------
   Match page additions (football/element/detail):
   - .team-form: Summary tab "TEAM FORM" card (_team_form.php), each team's
     last 5 results; the score frame is the result for that column's team.
   - .mds-periods: Stats tab All / 1st / 2nd pills, equal widths (design).
   - .is-match-team: Table tab rows of the two teams of the match.
   ----------------------------------------------------------------------------- */
.team-form {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--bg-box, #12141b);
    box-sizing: border-box;
}

.team-form__title {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #1c1e26;
    color: #8c8c8e;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.team-form__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
}

.team-form__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.team-form__crest {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.team-form__name {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-form__dots {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.team-form__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.team-form__dot--w {
    background: #1fbf75;
}

.team-form__dot--d {
    background: #8c8c8e;
}

.team-form__dot--l {
    background: #f14851;
}

.team-form__matches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-form__match {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.team-form__match-crest {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: contain;
}

/* Gradient frame (design): the result color starts at the winner's side and fades into the neutral edge across the
   box. Two background layers (fill on padding-box, gradient on border-box) keep border-radius, unlike border-image.
   Draws have no accent, so the gradient collapses to the plain neutral edge. */
.team-form__score {
    --team-form-fill: #191a1e;
    --team-form-edge: #2a2c36;
    --team-form-accent: var(--team-form-edge);
    --team-form-angle: 75deg;
    min-width: 56px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background:
        linear-gradient(var(--team-form-fill), var(--team-form-fill)) padding-box,
        linear-gradient(var(--team-form-angle), var(--team-form-accent) 15%, var(--team-form-edge) 50%) border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.team-form__score--w {
    --team-form-accent: #1fbf75;
}

.team-form__score--l {
    --team-form-accent: #f14851;
}

/* Mirror of 75deg: the accent starts bottom-right, under the away score */
.team-form__score--away-win {
    --team-form-angle: 285deg;
}

.team-form__match:hover .team-form__score {
    --team-form-fill: #22242c;
}

.mds-periods {
    flex-wrap: nowrap;
    margin-bottom: 12px;
}

.mds-periods .match-table-subtab {
    flex: 1 1 0;
}

.match-table-row.is-match-team--home,
.match-table-form-row.is-match-team--home {
    background: rgba(225, 36, 59, .12);
}

.match-table-row.is-match-team--away,
.match-table-form-row.is-match-team--away {
    background: rgba(29, 143, 255, .12);
}

@media (max-width: 767px) {
    .team-form__cols {
        gap: 8px;
        padding: 12px 8px;
    }

    .team-form__match {
        gap: 8px;
    }

    .team-form__score {
        min-width: 48px;
        font-size: 14px;
    }
}