:root {
    color-scheme: dark;
    background: #090b12;
}

body {
    background:
        radial-gradient(circle at 50% 12%, rgba(37, 99, 235, .32), transparent 30rem),
        linear-gradient(180deg, #111827 0%, #05060a 100%);
}

/* Clamp to the standard 960px from 'lg' and up. */
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 960px;
    }
}

.worldchamp-page-shell {
    position: relative;
}

.worldchamp-page-shell::before,
.worldchamp-page-shell::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    content: "";
    background: rgba(255, 255, 255, .14);
    pointer-events: none;
}

.worldchamp-page-shell::before {
    left: 1.5rem;
}

.worldchamp-page-shell::after {
    right: 1.5rem;
}

@media (min-width: 992px) {
    .worldchamp-page-shell::before {
        left: calc(50% - 480px);
    }

    .worldchamp-page-shell::after {
        right: calc(50% - 480px);
    }
}

.worldchamp-team-image {
    display: block;
    width: 192px;
    height: 192px;
    object-fit: cover;
    filter: drop-shadow(0 0 42px rgba(59, 130, 246, .34));
}

/*The trophy art is painted with a wide white halo ring and white corners (source PNG has no transparency), so clip slightly inside the art and scale it up to crop the ring out, then separate it from the navy with a gold glow instead of the white border.*/
.worldchamp-logo {
    width: 192px;
    height: 192px;
    overflow: hidden;
    box-shadow: 0 0 42px rgba(245, 197, 66, .4);
}

.worldchamp-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);
}

/*Hero title carries the whole one-screen page, so size it well above the default heading scale with tight leading and balanced wrapping.*/
.worldchamp-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
}

@media (min-width: 992px) {
    .worldchamp-title {
        font-size: 3.25rem;
    }
}

/*Cap the intro to a comfortable reading measure instead of the full column width (~100 chars).*/
.worldchamp-lead {
    max-width: 58ch;
    text-wrap: pretty;
}

/*Primary body copy at ~80% white reads as real text; Bootstrap's 'text-white-50' is reserved for fine print only.*/
.worldchamp-body-text {
    color: rgba(255, 255, 255, .8);
}

.worldchamp-team-card {
    /*Tint the card surface toward the page navy so cards read as part of the scene, not flat grey Bootstrap panels.*/
    background-color: #161f33;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
}

.worldchamp-team-name {
    letter-spacing: 0;
}

/*Spain: red border and aura with the flag's gold on the name.*/
.worldchamp-team-card--spain {
    border-color: rgba(230, 57, 70, .5) !important;
    background-image:
        linear-gradient(180deg, rgba(230, 57, 70, .15), rgba(230, 57, 70, 0) 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(230, 57, 70, .28),
        0 0 2.75rem rgba(230, 57, 70, .18),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--spain .worldchamp-team-name {
    color: #f7c948;
}

/*France: blue border and aura with a bright blue name.*/
.worldchamp-team-card--france {
    border-color: rgba(91, 155, 255, .5) !important;
    background-image:
        linear-gradient(180deg, rgba(91, 155, 255, .15), rgba(91, 155, 255, 0) 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(91, 155, 255, .28),
        0 0 2.75rem rgba(91, 155, 255, .2),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--france .worldchamp-team-name {
    color: #6ea8ff;
}

/*USA: red-white-blue aura with a bright name so the card stays distinct from France.*/
.worldchamp-team-card--usa {
    border-color: rgba(239, 68, 68, .52) !important;
    background-image:
        linear-gradient(180deg, rgba(239, 68, 68, .13), rgba(239, 68, 68, 0) 34%),
        linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(239, 68, 68, .24),
        0 0 2.75rem rgba(37, 99, 235, .2),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--usa .worldchamp-team-name {
    color: #f8fafc;
}

/*England: white kit tone with red and navy glow so it reads cleanly beside USA.*/
.worldchamp-team-card--england {
    border-color: rgba(248, 250, 252, .54) !important;
    background-image:
        linear-gradient(180deg, rgba(248, 250, 252, .12), rgba(248, 250, 252, 0) 36%),
        linear-gradient(135deg, rgba(220, 38, 38, .12), rgba(15, 23, 42, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(248, 250, 252, .2),
        0 0 2.75rem rgba(220, 38, 38, .16),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--england .worldchamp-team-name {
    color: #f8fafc;
}

/*Brazil: yellow-green aura with enough contrast to stay readable on the navy page.*/
.worldchamp-team-card--brazil {
    border-color: rgba(34, 197, 94, .5) !important;
    background-image:
        linear-gradient(180deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, 0) 36%),
        linear-gradient(135deg, rgba(250, 204, 21, .14), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(34, 197, 94, .24),
        0 0 2.75rem rgba(250, 204, 21, .18),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--brazil .worldchamp-team-name {
    color: #fde047;
}

/*Portugal: red and green kit energy with a warm name color that stays distinct from Spain and Brazil.*/
.worldchamp-team-card--portugal {
    border-color: rgba(22, 163, 74, .52) !important;
    background-image:
        linear-gradient(180deg, rgba(220, 38, 38, .15), rgba(220, 38, 38, 0) 36%),
        linear-gradient(135deg, rgba(22, 163, 74, .16), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%);
    box-shadow:
        0 0 1rem rgba(220, 38, 38, .22),
        0 0 2.75rem rgba(22, 163, 74, .18),
        0 1.25rem 2.75rem rgba(0, 0, 0, .5);
}

.worldchamp-team-card--portugal .worldchamp-team-name {
    color: #fbbf24;
}

.worldchamp-footer {
    border-top: 1px solid rgba(255, 255, 255, .14);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(5, 6, 10, .96));
    color: rgba(255, 255, 255, .72);
}

.worldchamp-footer-label {
    letter-spacing: 0;
    color: rgba(255, 255, 255, .9);
}

.worldchamp-footer-copy {
    color: rgba(255, 255, 255, .68);
}