:root {
    --gold       : #c9a84c;
    --gold-light : #f0d080;
    --red        : #c0392b;
    --dark       : #0a0a0a;
    --mid        : #111111;
    --muted      : #b6c2ce;
    --border     : #444e59a8;
    --card-top   : #dadada14;
    --card-bottom: #00000033
}

.wrapper {
    position  : relative;
    z-index   : 10;
    text-align: center;
    padding   : 1rem;
    max-width : 1500px;
    width     : 100%;
    animation : fadeUp 1.2s ease both
}

@keyframes fadeUp {
    from {
        opacity  : 0;
        transform: translateY(40px)
    }

    to {
        opacity  : 1;
        transform: translateY(0)
    }
}

#eyebrow {
    font-weight   : 300;
    font-size     : .85rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color         : var(--gold);
    margin-bottom : .5rem;
    opacity       : 0;
    animation     : fadeUp 1s ease .3s both
}

.headline {
    color         : revert;
    font-size     : clamp(2rem, 10vw, 3rem);
    letter-spacing: .02em;
    margin        : 1rem;
    opacity       : 0;
    animation     : fadeUp 1s ease .5s both
}

.headline span {
    color      : var(--gold);
    display    : block;
    font-weight: 600;
    font-size  : clamp(3rem, 10vw, 5rem)
}

.subHeadline {
    font-size    : clamp(1rem, 10vw, 1.5rem);
    margin-bottom: 14px
}

.hosts {
    font-size     : .8rem;
    letter-spacing: .3em;
    margin-bottom : 3rem;
    text-transform: uppercase;
    opacity       : 0;
    animation     : fadeUp 1s ease .7s both
}

.hosts em {
    color     : var(--gold-light);
    font-style: normal
}

.countdown {
    display        : flex;
    gap            : clamp(0.25rem, 3vw, 2rem);
    justify-content: center;
    align-items    : flex-start;
    margin-bottom  : 3rem;
    opacity        : 0;
    animation      : fadeUp 1s ease .9s both
}

.unit {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .75rem
}

.unit span {
    color: var(--muted)
}

@keyframes pulse {

    0%,
    100% {
        opacity: .35
    }

    50% {
        opacity: .1
    }
}

.flip-card {
    position   : relative;
    width      : clamp(61px, 16vw, 120px);
    height     : clamp(41px, 19vw, 80px);
    perspective: 500px;
    font-size  : clamp(1.5rem, 9.5vw, 3rem);
    box-shadow : 0 8px 24px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .8)
}

.card-top {
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    height    : 50%;
    background: var(--card-top);
    overflow  : hidden;
    z-index   : 1
}

.card-bottom {
    position  : absolute;
    bottom    : 0;
    left      : 0;
    right     : 0;
    height    : 50%;
    background: var(--card-bottom);
    overflow  : hidden;
    z-index   : 1
}

.card-top .digit,
.card-bottom .digit {
    position       : absolute;
    left           : 0;
    right          : 0;
    height         : 200%;
    display        : flex;
    align-items    : center;
    justify-content: center
}

.card-top .digit {
    top: 0
}

.card-bottom .digit {
    bottom: 0
}

.card-divider {
    position      : absolute;
    top           : 50%;
    left          : 0;
    right         : 0;
    height        : 2px;
    background    : rgba(0, 0, 0, .75);
    z-index       : 10;
    pointer-events: none
}

.flap {
    position        : absolute;
    top             : 0;
    left            : 0;
    right           : 0;
    height          : 50%;
    transform-origin: 50% 100%;
    transform-style : preserve-3d;
    z-index         : 5
}

.flap-front,
.flap-back {
    position           : absolute;
    inset              : 0;
    overflow           : hidden;
    backface-visibility: hidden
}

.flap-front {
    background: var(--card-top)
}

.flap-back {
    background: var(--card-top);
    transform : rotateX(180deg)
}

.flap-front .digit {
    position       : absolute;
    left           : 0;
    right          : 0;
    height         : 200%;
    top            : 0;
    display        : flex;
    align-items    : center;
    justify-content: center
}

.flap-back .digit {
    position       : absolute;
    left           : 0;
    right          : 0;
    height         : 200%;
    top            : 0;
    display        : flex;
    align-items    : center;
    justify-content: center
}

.card-top::after,
.flap-front::after,
.flap-back::after {
    content       : "";
    position      : absolute;
    inset         : 0;
    background    : linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 55%);
    pointer-events: none
}

.flap-shadow {
    position      : absolute;
    top           : 50%;
    left          : 0;
    right         : 0;
    bottom        : 0;
    background    : linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
    z-index       : 4;
    opacity       : 0;
    pointer-events: none
}

.flip-card.flipping .flap {
    animation: flipDown .5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards
}

.flip-card.flipping .flap-shadow {
    animation: shadowAnim .5s ease forwards
}

@keyframes flipDown {
    0% {
        transform: rotateX(0deg)
    }

    100% {
        transform: rotateX(-180deg)
    }
}

@keyframes shadowAnim {
    0% {
        opacity: 0
    }

    35% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.party .card-top,
.party .card-bottom,
.party .flap-front,
.party .flap-back {
    background-color: #1f1a0d
}

.party .digit {
    color: rgba(201, 168, 76, .6)
}

.kickoff {
    font-size     : .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    opacity       : 0;
    animation     : fadeUp 1s ease 1.1s both;
    color         : var(--muted)
}

.kickoff strong {
    color: #fff
}

.box-inner {
    position      : absolute;
    inset         : 0;
    background    : linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none
}

.party .num {
    color: var(--gold-light)
}

.party .box {
    border-color: rgba(201, 168, 76, .6)
}

.groups-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    grid-template-rows   : masonry;
    gap                  : 1.25rem;
    max-width            : 1430px;
    margin               : 0 auto;
    text-align           : left;
    justify-content      : center;
    justify-items        : center
}

.groups-grid table {
    width          : 100%;
    border-collapse: collapse;
    table-layout   : fixed
}

.groups-grid thead tr {
    border-bottom: 1px solid var(--border);
    color        : var(--muted)
}

.groups-grid thead th {
    padding       : .8rem 0;
    font-weight   : 600;
    font-size     : .7rem;
    letter-spacing: .1em;
    text-align    : center
}

.groups-grid thead th.team-col {
    text-align  : left;
    padding-left: .4rem;
    width       : 35%
}

.groups-grid tbody tr {
    border-bottom: 1px solid var(--border);
    transition   : background .15s ease
}

.groups-grid tbody tr:nth-child(odd) {
    background: #dadada14
}

.groups-grid tbody tr:last-child {
    border-bottom: none
}

.groups-grid tbody tr:hover {
    background: var(--row-hover)
}

.groups-grid tbody td {
    padding   : .7rem .5rem;
    text-align: center
}

.groups-grid tbody td.pos {
    font-weight: 600;
    width      : 28px
}

.groups-grid tbody td.team-name {
    text-align  : left;
    padding-left: .4rem
}

.groups-grid .team-cell {
    display    : flex;
    align-items: center;
    gap        : .55rem
}

.groups-grid .flag {
    width      : 30px;
    height     : 30px;
    object-fit : cover;
    flex-shrink: 0
}

.groups-grid .team-name-text {
    font-weight: 500
}

.groups-grid .tbd-badge {
    font-size     : .65rem;
    font-weight   : 600;
    letter-spacing: .05em;
    color         : var(--gold);
    background    : rgba(240, 180, 41, .12);
    border        : 1px solid rgba(240, 180, 41, .25);
    border-radius : 3px;
    padding       : 1px 5px;
    margin-left   : 4px;
    vertical-align: middle
}

.groups-grid td.pts {
    font-weight: 700
}

.group-card {
    border-radius: 8px;
    overflow     : hidden;
    border       : 1px solid var(--border);
    transition   : transform .2s ease, box-shadow .2s ease
}

.group-card:hover {
    transform : translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4)
}

.group-title {
    background    : #192f60;
    padding       : .6rem 1rem;
    font-weight   : 600;
    font-size     : 1rem;
    letter-spacing: .05em;
    border-bottom : 1px solid var(--border)
}

.note {
    text-align    : center;
    margin-top    : 1.5rem;
    font-size     : .75rem;
    letter-spacing: .04em
}

.note span {
    color: var(--gold)
}

.mobile .content {
    margin-bottom: 35px
}

.mobile .content>.wrapper {
    background     : url("https://files.sitestatic.net/assets/imgs/backgrounds/images/fifa-world-cup-2026-mobile-393x690.webp") no-repeat center center fixed;
    background-size: cover
}

@media(min-width: 768px) {
    body>.content {
        background     : url("https://files.sitestatic.net/assets/imgs/backgrounds/images/fifa-world-cup-2026-1440x1222.webp") no-repeat center center fixed;
        background-size: cover
    }

    .groups-grid thead th.team-col {
        width: 50%
    }

    .headline {
        margin: 3rem
    }
}

@media(min-width: 1100px) {
    .groups-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}