[x-cloak] {
    display: none !important;
}

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 14.5px;
    }
}

@media (min-width: 1280px) {
    html {
        font-size: 14px;
    }
}

.gradient-border-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 2px;
    background: var(--gradient-border-bg, linear-gradient(to right, #A24DF1, #E18A98));
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.gradient-border-container-thick::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 3px;
    background: var(--gradient-border-bg, linear-gradient(to right, #A24DF1, #E18A98));
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.gradient-border-container-reversed::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 2px;
    background: var(--gradient-border-bg, linear-gradient(to right, #E18A98, #A24DF1));
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.gradient-border-container-rounded::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 2px;
    background: var(--gradient-border-bg, linear-gradient(to right, #A24DF1, #E18A98));
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0 !important
}
.hide-scrollbar {
    overflow: -moz-scrollbars-none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
}

.text-align-last-right {
    text-align-last: right;
}

/* Deep glass: the one surface for match cards and page sections. A dark
   violet base under a faint cyan tint, a hairline border, a thin highlight
   along the top edge and a soft drop shadow. Page sections (Match Detail and
   simulator panels, the hero stage, the simulator's setting and result cards)
   apply these tokens in their own stylesheets because each already owns its
   border and state rules. */
:root {
    --fo-deep-glass-bg:
        linear-gradient(160deg, rgba(43, 255, 255, 0.08), rgba(43, 255, 255, 0.015) 45%, rgba(43, 255, 255, 0.04)),
        rgba(20, 10, 34, 0.55);
    --fo-deep-glass-border: rgba(255, 255, 255, 0.07);
    --fo-deep-glass-border-emphasis: rgba(255, 255, 255, 0.13);
    --fo-deep-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --fo-deep-glass-shadow: var(--fo-deep-glass-highlight), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* Every match card takes this one class - the homepage slider, AI Predictions
   (grid and list), the archive, Match Detail's upcoming matches, the team and
   competition pages and the World Cup bracket - so they cannot drift apart.
   Layout, padding and radius stay with each card. `.is-active` is the
   homepage slider's centred card. */
.fo-match-card {
    border: 1px solid var(--fo-deep-glass-border);
    background: var(--fo-deep-glass-bg);
    box-shadow: var(--fo-deep-glass-shadow);
    transition: border-color 200ms ease;
}

.fo-match-card:hover,
.fo-match-card.is-active {
    border-color: var(--fo-deep-glass-border-emphasis);
}