:root {
    color-scheme: light;
    --bg: #e9f1f7;
    --panel: #f8fbff;
    --ink: #0c2747;
    --muted: #7390b5;
    --line: #dbe8f6;
    --gold: #c49a26;
    --green: #19b978;
    --blue: #2f6fae;
    --shadow: 0 24px 54px rgba(12, 39, 71, .18);
    --soft-shadow: 0 10px 24px rgba(34, 74, 114, .13);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Tahoma, Arial, sans-serif;
    background:
        linear-gradient(180deg, rgba(237, 245, 252, .82), rgba(232, 240, 247, .9)),
        url("images/stadium-bg.jpg") center top / cover fixed;
    color: var(--ink);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .5) 28%, rgba(232, 241, 249, .86) 72%),
        linear-gradient(90deg, rgba(12, 39, 71, .08), transparent 22%, transparent 78%, rgba(12, 39, 71, .08));
    z-index: -1;
}

button {
    font: inherit;
}

.site-shell {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1480px) minmax(120px, 160px);
    gap: 18px;
    width: min(100%, 1880px);
    margin: 0 auto;
    padding: 22px 18px;
}

.ads-off .site-shell {
    grid-template-columns: minmax(0, 1660px);
    justify-content: center;
}

.app-card {
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(250, 253, 255, .88), rgba(244, 249, 253, .86)),
        radial-gradient(circle at 50% 34%, rgba(25, 185, 120, .09), transparent 35%);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 12px 18px 18px;
    backdrop-filter: blur(8px);
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    text-align: center;
    min-height: 68px;
    padding: 18px 24px 20px;
    margin-bottom: 12px;
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 4px max(10%, 80px);
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
}

.cup-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 78px;
    filter: drop-shadow(0 8px 12px rgba(116, 81, 4, .28));
}

.cup-mark img,
.cup-small img,
.center-cup img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

h1 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.25;
    letter-spacing: 0;
}

.hero .hero-subhead {
    margin: 10px 0 0;
    color: #c33838 !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #bfd0e4;
    background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(234, 241, 250, .68));
    color: #8da3bd;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0;
    width: var(--ad-width, auto);
    min-height: var(--ad-height, 92px);
}

.leaderboard {
    width: 728px;
    height: 90px;
    max-width: 100%;
    margin: 0 auto 10px;
}

.bottom-ad {
    margin-top: 18px;
    margin-bottom: 0;
}

.ad-rail {
    display: flex;
    align-items: flex-start;
    padding-top: 150px;
}

.ad-rail-left {
    justify-content: flex-end;
}

.ad-rail-right {
    justify-content: flex-start;
}

.tall {
    width: 160px;
    height: 600px;
    position: sticky;
    top: 18px;
}

.mobile-ad {
    display: none;
    margin: 12px 0;
    justify-content: center;
    width: 100%;
}

.mobile-banner {
    width: 320px;
    height: 100px;
    max-width: 100%;
}

.google-ad-unit {
    display: inline-block;
    max-width: 100%;
}

.adsterra-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ad-width);
    min-height: var(--ad-height);
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.adsterra-unit iframe {
    max-width: 100%;
}

.adsterra-inline-rectangle {
    display: flex;
    justify-content: center;
    margin: 12px auto 16px;
    width: 100%;
}

.ads-consent-declined .google-ad-unit {
    visibility: hidden;
}

.result-panel {
    width: min(760px, 100%);
    margin: 0 auto 16px;
    text-align: center;
    position: relative;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
}

.champion-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 106px;
    border: 1px solid rgba(196, 154, 38, .55);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)),
        url("images/fans-bg.jpg") center / cover;
    border-radius: 14px;
    box-shadow: var(--soft-shadow);
    padding: 16px;
}

.champion-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.champion-card strong {
    display: block;
    margin-top: 5px;
    color: var(--green);
    font-size: 28px;
    line-height: 1.1;
}

.big-flag {
    display: flex;
    align-items: center;
}

.big-flag img {
    width: 58px;
    height: 38px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(12, 39, 71, .08);
}

.cup-small {
    display: inline-flex;
    width: 37px;
    height: 58px;
}

.share-actions,
.share-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.share-actions button,
.share-strip button {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(25, 185, 120, .22);
}

.share-actions .secondary {
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(47, 111, 174, .18);
}

.share-actions .ghost {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 8px 18px rgba(217, 119, 6, .24);
}

.result-panel.own-complete .share-actions {
    justify-content: center;
}

.result-panel.own-complete #shareBtn {
    min-width: min(100%, 320px);
}

.viral-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dce8f6;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(242, 248, 255, .9)),
        url("images/fans-bg.jpg") center / cover;
    border-radius: 10px;
}

.viral-box strong,
.viral-box p {
    display: block;
}

.viral-box strong {
    color: var(--ink);
    font-size: 16px;
}

.viral-box p {
    margin: 6px auto 12px;
    max-width: 620px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.social-grid button,
.challenge-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    cursor: pointer;
    color: #fff;
}

.social-grid button {
    direction: ltr;
}

.social-grid button span:not(.share-icon) {
    direction: auto;
    min-width: 0;
}

.share-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.share-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.social-grid [data-share-platform="whatsapp"] {
    background: #1faa59;
    box-shadow: 0 8px 18px rgba(31, 170, 89, .18);
}

.social-grid [data-share-platform="telegram"] {
    background: #2a9bd8;
}

.social-grid [data-share-platform="facebook"] {
    background: #315fa8;
}

.social-grid [data-share-platform="twitter"] {
    background: #111827;
}

.challenge-copy {
    margin-top: 9px;
    width: 100%;
    background: #eef5fc;
    color: var(--ink);
}

.bracket-wrap {
    width: 100%;
    overflow: hidden;
    padding: 4px 24px;
    direction: ltr;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(8, 24, 35, .56), rgba(12, 41, 35, .5)),
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08) 34%, rgba(0, 0, 0, .08) 72%),
        url("images/stadium-bg.jpg") center 56% / cover;
}

.bracket {
    --match-w: 174px;
    --col-gap: 24px;
    --edge-pad: 28px;
    direction: ltr;
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, var(--match-w));
    grid-template-rows: repeat(32, 19px);
    gap: 0 var(--col-gap);
    width: calc((9 * var(--match-w)) + (8 * var(--col-gap)) + (2 * var(--edge-pad)));
    min-width: calc((9 * var(--match-w)) + (8 * var(--col-gap)) + (2 * var(--edge-pad)));
    min-height: 672px;
    margin: 0 auto;
    padding-inline: var(--edge-pad);
    transform: scale(var(--bracket-scale, 1));
    transform-origin: top center;
}

.match {
    position: relative;
    z-index: 3;
    align-self: center;
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 54px;
    background: #fff;
    border: 1px solid rgba(226, 236, 246, .98);
    border-radius: 8px;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
}

.match.empty {
    background: rgba(247, 252, 255, .96);
}

.team {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
    border: 0;
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    cursor: pointer;
    text-align: inherit;
}

.team + .team {
    border-top: 1px solid #e7eef7;
}

.team:hover,
.team:focus-visible {
    outline: 0;
    background: #edf9f3;
}

.team[disabled] {
    cursor: default;
    color: #7e93ad;
    background: rgba(250, 253, 255, .84);
}

.team.loser {
    opacity: .58;
}

.team.winner {
    background: #e9fbf3;
    color: #086e46;
}

.team .flag {
    flex: 0 0 auto;
    width: 32px;
    height: 21px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(12, 39, 71, .08);
}

.team .name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team .check {
    flex: 0 0 16px;
    text-align: center;
    color: var(--green);
    font-weight: 700;
}

.connector {
    position: absolute;
    z-index: 1;
    display: block;
    border: 0;
    border-radius: 999px;
    background: rgba(244, 250, 255, .86);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(9, 32, 48, .08), 0 1px 3px rgba(9, 32, 48, .12);
}

.connector-h {
    height: 3px !important;
}

.connector-v {
    width: 3px !important;
}

.label-row {
    position: absolute;
    bottom: 0;
    z-index: 3;
    color: rgba(238, 246, 255, .96);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
}

.center-cup {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 26%;
    transform: translate(-50%, -50%);
    width: 59px;
    height: 96px;
    opacity: .88;
    filter: drop-shadow(0 10px 14px rgba(166, 126, 18, .2));
}

.final-note {
    position: absolute;
    left: 50%;
    top: calc(26% + 58px);
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, .65);
}

.share-strip {
    justify-content: space-between;
    border: 1px solid #dce8f6;
    background: rgba(255, 255, 255, .92);
    border-radius: 10px;
    padding: 12px;
}

.share-strip div {
    min-width: 0;
}

.share-strip strong,
.share-strip span {
    display: block;
}

.share-strip strong {
    font-size: 15px;
}

.share-strip span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(80px);
    opacity: 0;
    background: #102b4c;
    color: #fff;
    border-radius: 8px;
    padding: 11px 14px;
    box-shadow: var(--shadow);
    transition: .2s ease;
    z-index: 20;
}

.site-footer {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(220, 232, 246, .9);
    font-size: 13px;
}

.site-footer a,
.policy-page a,
.ad-consent a {
    color: var(--blue);
    text-decoration: none;
}

.site-footer a:hover,
.policy-page a:hover,
.ad-consent a:hover {
    text-decoration: underline;
}

.seo-content {
    margin: 18px auto 0;
    padding: 18px;
    border: 1px solid rgba(139, 164, 191, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    text-align: start;
}

.seo-content h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
}

.seo-content h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.seo-content p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.seo-grid article {
    padding: 12px;
    border: 1px solid rgba(139, 164, 191, .22);
    border-radius: 8px;
    background: rgba(248, 252, 255, .86);
}

.faq-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.faq-list details {
    border: 1px solid rgba(139, 164, 191, .24);
    border-radius: 8px;
    background: #fff;
}

.faq-list summary {
    cursor: pointer;
    padding: 11px 12px;
    color: var(--ink);
    font-weight: 700;
}

.faq-list details p {
    padding: 0 12px 12px;
}

.policy-button {
    border: 0;
    border-radius: 8px;
    background: #0f7a49;
    color: #fff;
    font: inherit;
    font-weight: 800;
    padding: 10px 16px;
    cursor: pointer;
}

.policy-button:hover,
.policy-button:focus-visible {
    background: #075d38;
}

.ad-consent {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    width: min(460px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid #d6e3f2;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow);
}

.ad-consent p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.ad-consent-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ad-consent-actions button {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    color: #fff;
    background: var(--green);
    cursor: pointer;
}

.ad-consent-actions button + button {
    background: #eef5fc;
    color: var(--ink);
}

.policy-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 18px 40px;
    line-height: 1.7;
}

.policy-page h1 {
    font-size: clamp(26px, 4vw, 38px);
}

.policy-page h2 {
    margin-top: 24px;
    font-size: 20px;
}

.policy-page p,
.policy-page li {
    color: #34516f;
}

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.admin-head p {
    margin: 4px 0 0;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-card {
    padding: 14px;
    border: 1px solid rgba(139, 164, 191, .26);
    border-radius: 10px;
    background: #fff;
}

.admin-card span,
.admin-card small {
    display: block;
    color: var(--muted);
}

.admin-card strong {
    display: block;
    margin: 8px 0 4px;
    color: var(--ink);
    font-size: 30px;
    line-height: 1;
}

.admin-section {
    margin-top: 24px;
}

.admin-section table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.admin-section th,
.admin-section td {
    padding: 10px;
    border-bottom: 1px solid rgba(139, 164, 191, .22);
    text-align: left;
}

.admin-section th {
    background: #eef5fc;
    color: var(--ink);
}

.admin-login {
    display: grid;
    gap: 10px;
    max-width: 360px;
    margin-top: 18px;
}

.admin-login label {
    color: var(--ink);
    font-weight: 800;
}

.admin-login input {
    min-height: 44px;
    border: 1px solid rgba(139, 164, 191, .42);
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
}

.admin-error {
    color: #b42318 !important;
    font-weight: 800;
}

.country-flag {
    display: inline-block;
    width: 28px;
}

.admin-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 190px;
    color: var(--ink);
    font-weight: 800;
}

.admin-country small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.country-flag-img {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(12, 39, 71, .12);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

[dir="rtl"] .team {
    flex-direction: row;
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .team {
    flex-direction: row;
    direction: ltr;
    text-align: left;
}

@media (max-width: 1480px) {
    .site-shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .ad-rail {
        display: none;
    }

    .app-card {
        padding: 12px;
        border-radius: 14px;
    }

}

@media (max-width: 720px) {
    body {
        background-attachment: scroll;
    }

    .site-shell {
        width: 100%;
        padding: 8px;
    }

    .app-card {
        width: 100%;
        padding: 10px;
        border-radius: 12px;
    }

    .hero {
        align-items: center;
        justify-content: center;
        min-height: auto;
        padding: 14px 10px 16px;
        margin-bottom: 10px;
        gap: 14px;
    }

    .hero::before {
        inset: 2px 0;
    }

    .cup-mark {
        width: 36px;
        height: 58px;
    }

    h1 {
        font-size: 24px;
    }

    .hero > div {
        min-width: 0;
    }

    .hero .hero-subhead {
        font-size: 15px;
        line-height: 1.45;
    }

    .leaderboard {
        display: none;
    }

    .top-ad,
    .bottom-ad {
        display: none;
    }

    .mobile-ad {
        display: flex;
        margin: 12px auto;
    }

    .mobile-ad .ad-slot,
    .mobile-ad .adsbygoogle {
        width: min(320px, 100%) !important;
        height: 100px !important;
        min-height: 100px;
        max-width: 100%;
        margin: 0 auto;
    }

    .mobile-ad .adsterra-unit {
        width: min(320px, 100%) !important;
        height: 50px !important;
        min-height: 50px;
        max-width: 100%;
        margin: 0 auto;
    }

    .adsterra-inline-rectangle {
        margin: 10px auto 12px;
    }

    .result-panel {
        margin-bottom: 12px;
    }

    .share-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .share-actions button {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
    }

    .share-actions .ghost {
        grid-column: 1 / -1;
    }

    .result-panel.own-complete #shareBtn {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 340px);
    }

    .viral-box {
        padding: 12px;
    }

    .seo-content {
        padding: 14px;
        margin-top: 12px;
    }

    .seo-content h2 {
        font-size: 19px;
    }

    .seo-grid {
        grid-template-columns: 1fr;
    }

    .admin-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-grid,
    .admin-grid.compact {
        grid-template-columns: 1fr;
    }

    .admin-section {
        overflow-x: auto;
    }

    .bracket-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 12px 10px;
        margin-inline: -2px;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    .bracket {
        --match-w: 158px;
        --col-gap: 18px;
        --edge-pad: 18px;
        min-height: 540px;
        transform: none;
    }

    .match.empty {
        background: rgba(249, 253, 255, .98);
    }

    .match.empty .team {
        background: rgba(249, 253, 255, .98);
    }

    .connector {
        display: block;
        background: rgba(244, 250, 255, .9);
        box-shadow: 0 0 0 1px rgba(9, 32, 48, .08), 0 1px 2px rgba(9, 32, 48, .12);
    }

    .team {
        gap: 7px;
        padding: 0 7px;
    }

    .team .flag {
        width: 30px;
        height: 20px;
    }

    .team .name {
        font-size: 12px;
    }

    .champion-card {
        min-height: 92px;
    }

    .champion-card strong {
        font-size: 22px;
    }

    .share-strip {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        text-align: center;
    }

    .share-strip button {
        width: 100%;
    }

    .social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ad-consent {
        right: 8px;
        bottom: 8px;
    }
}

@media (max-width: 380px) {
    .site-shell {
        padding: 6px;
    }

    .app-card {
        padding: 5px;
    }

    h1 {
        font-size: 22px;
    }

    .cup-mark {
        width: 30px;
        height: 50px;
    }

}