/* ==========================================================================
   ValueStats · World Cup 2026
   ========================================================================== */

.worldcup-page {
    --wc-canvas: var(--vs-color-canvas);
    --wc-surface: var(--vs-color-surface);
    --wc-surface-muted: var(--vs-color-surface-muted);
    --wc-border: var(--vs-color-border);
    --wc-border-strong: var(--vs-color-border-strong);
    --wc-ink: var(--vs-color-ink);
    --wc-muted: var(--vs-color-muted);
    --wc-primary: var(--vs-color-primary);
    --wc-accent: #b78112;
    min-height: 100vh;
    color: var(--wc-ink);
    background: var(--wc-canvas) !important;
}

/* Hero */
.worldcup-hero {
    border-bottom: 1px solid rgba(77, 123, 101, .18);
    color: #14251c !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(214, 166, 48, .14), transparent 25%),
        radial-gradient(circle at 68% 5%, rgba(21, 150, 106, .12), transparent 30%),
        linear-gradient(142deg, #f5f8f6 0%, #e9f0eb 61%, #dfe9e3 100%) !important;
    box-shadow: 0 9px 26px rgba(25, 52, 38, .07);
}

.worldcup-hero > .absolute:first-child {
    opacity: .055 !important;
    background-image: radial-gradient(circle at 20% 20%, #084a31 1px, transparent 1px) !important;
}

.worldcup-hero-inner {
    width: 100%;
    max-width: none !important;
    padding: clamp(2.4rem, 5vw, 4.8rem) clamp(1rem, 3vw, 3rem) !important;
}

.worldcup-hero-content {
    max-width: 76rem;
    align-items: flex-start !important;
    text-align: left !important;
}

.worldcup-hero-content > span:first-child {
    border: 1px solid rgba(183, 129, 18, .24) !important;
    border-radius: .25rem !important;
    color: #74520c !important;
    background: rgba(255, 248, 222, .62) !important;
    box-shadow: none !important;
}

.worldcup-hero-content > span:first-child i {
    color: #b78112 !important;
}

.worldcup-hero h1 {
    margin-top: .95rem !important;
    color: #10231a !important;
    font-size: clamp(2.2rem, 4.4vw, 4rem) !important;
    font-weight: 700 !important;
    line-height: 1.03;
    letter-spacing: -.047em !important;
}

.worldcup-hero h1 span {
    color: #a66f05 !important;
}

.worldcup-hero-content > p {
    max-width: 55rem !important;
    margin-top: .8rem !important;
    color: #5d7066 !important;
    font-size: clamp(.96rem, 1.45vw, 1.1rem) !important;
    line-height: 1.7;
}

.worldcup-next-panel {
    max-width: 72rem !important;
    margin-top: 1.4rem !important;
    padding: 1.05rem !important;
    border: 1px solid rgba(77, 123, 101, .2) !important;
    border-radius: .42rem !important;
    color: #203029;
    background: rgba(255, 255, 255, .65) !important;
    box-shadow: 0 9px 24px rgba(25, 52, 38, .06) !important;
    backdrop-filter: blur(8px);
}

.worldcup-next-panel .text-amber-200,
.worldcup-next-panel .text-amber-300 {
    color: #a66f05 !important;
}

.worldcup-next-panel .text-emerald-50,
.worldcup-next-panel .text-emerald-50\/90,
.worldcup-next-panel .text-emerald-50\/85,
.worldcup-next-panel .text-emerald-50\/80,
.worldcup-next-panel .text-emerald-50\/75,
.worldcup-next-panel .text-emerald-100\/70,
.worldcup-next-panel .text-emerald-200,
.worldcup-next-panel .text-white {
    color: #45584e !important;
}

.worldcup-next-panel a {
    color: #17251e;
}

.worldcup-next-panel a:hover {
    color: var(--wc-primary) !important;
}

.worldcup-next-panel .bg-white\/15,
.worldcup-next-panel .bg-white\/10,
.worldcup-next-panel .bg-emerald-950\/30 {
    border: 1px solid var(--wc-border) !important;
    border-radius: .28rem !important;
    color: #45584e !important;
    background: var(--wc-surface-muted) !important;
    box-shadow: none !important;
}

.worldcup-next-panel .border-white\/10 {
    border-color: var(--wc-border) !important;
}

.worldcup-next-panel .bg-white\/40 {
    background: #9dacA4 !important;
}

.worldcup-next-panel .bg-emerald-400 {
    background: #15966a !important;
}

.worldcup-next-panel .bg-amber-300 {
    background: #d6a630 !important;
}

.worldcup-hero-actions {
    margin-top: 1.15rem !important;
}

.worldcup-primary-cta,
.worldcup-secondary-cta,
.worldcup-page #goleadores a[href] {
    min-height: 2.7rem;
    padding: .68rem 1rem !important;
    border-radius: .3rem !important;
    box-shadow: none !important;
    font-weight: 680 !important;
}

.worldcup-primary-cta,
.worldcup-page #goleadores a[href] {
    border: 1px solid #087a55 !important;
    color: #ffffff !important;
    background: #087a55 !important;
}

.worldcup-primary-cta:hover,
.worldcup-page #goleadores a[href]:hover {
    border-color: #075f45 !important;
    background: #075f45 !important;
}

.worldcup-secondary-cta {
    border: 1px solid var(--wc-border-strong) !important;
    color: #30433a !important;
    background: rgba(255, 255, 255, .52) !important;
    box-shadow: none !important;
}

.worldcup-secondary-cta:hover {
    border-color: rgba(8, 122, 85, .42) !important;
    color: #075f45 !important;
    background: rgba(255, 255, 255, .82) !important;
}

/* Main full-width canvas */
.worldcup-shell {
    display: grid;
    width: 100%;
    max-width: none !important;
    gap: 1rem;
    padding: 1rem clamp(.75rem, 2.4vw, 2.25rem) 3rem !important;
}

.worldcup-shell > * + * {
    margin-top: 0 !important;
}

.worldcup-section {
    min-width: 0;
    padding: clamp(1rem, 2.2vw, 1.8rem);
    border: 1px solid var(--wc-border);
    border-radius: .48rem;
    background: var(--wc-surface);
    box-shadow: 0 8px 24px rgba(25, 45, 35, .05);
}

.worldcup-section > div:first-child.mb-7,
.worldcup-section > div:first-child.mb-6,
.worldcup-section > h2.mb-6 {
    margin-bottom: 1rem !important;
}

.worldcup-section h2 {
    color: var(--wc-ink) !important;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important;
    font-weight: 690 !important;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.worldcup-section h2 + p,
.worldcup-section .text-slate-500 {
    color: var(--wc-muted) !important;
}

.worldcup-section > div:first-child > div > span:first-child,
#goleadores > div:first-child > span,
#eliminatorias > div:first-child > span {
    border: 1px solid rgba(21, 150, 106, .2) !important;
    border-radius: .25rem !important;
    color: #087a55 !important;
    background: rgba(21, 150, 106, .08) !important;
    box-shadow: none !important;
}

/* Neutralize oversized round cards without affecting tiny status dots. */
.worldcup-page .rounded-2xl {
    border-radius: .4rem !important;
}

.worldcup-page .rounded-xl {
    border-radius: .3rem !important;
}

.worldcup-page .rounded-lg {
    border-radius: .28rem !important;
}

.worldcup-page .rounded-md {
    border-radius: .22rem !important;
}

/* Knockout */
#eliminatorias .bg-white,
#grupos .bg-white,
#calendario .bg-white,
#goleadores .bg-white,
#sedes .bg-white,
.worldcup-page .wc-match {
    border-color: var(--wc-border) !important;
    background: var(--wc-surface) !important;
    box-shadow: 0 4px 14px rgba(25, 45, 35, .035) !important;
}

.worldcup-page .wc-round > div:first-child {
    border-radius: .28rem !important;
}

.worldcup-page .wc-match a,
.worldcup-page .wc-match span {
    color: #405149 !important;
}

.worldcup-page .wc-match .font-bold {
    color: var(--wc-ink) !important;
}

.worldcup-page .wc-match span.bg-emerald-600,
.worldcup-page .wc-match span.bg-slate-800 {
    color: #ffffff !important;
}

/* Groups */
#grupos > div[x-show] > .grid {
    gap: .65rem !important;
}

#grupos > div[x-show] > .grid > div {
    overflow: hidden;
    border: 1px solid var(--wc-border);
    border-radius: .36rem !important;
    background: var(--wc-surface) !important;
    box-shadow: none !important;
}

#grupos > div[x-show] > .grid > div > div:first-child {
    padding: .65rem .8rem !important;
    border-color: var(--wc-border) !important;
    background: var(--wc-surface-muted) !important;
}

#grupos > div[x-show] > .grid > div > div:first-child > span:first-child {
    width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: .2rem !important;
    color: #ffffff !important;
    background: #087a55 !important;
}

#grupos .text-slate-900,
#grupos .text-slate-800,
#grupos .text-slate-700 {
    color: var(--wc-ink) !important;
}

#grupos table thead,
#grupos table thead tr,
#grupos table thead th {
    color: #74857c !important;
    background: var(--wc-surface-muted) !important;
}

#grupos table tbody,
#grupos table tbody tr,
#grupos table tbody td {
    border-color: var(--wc-border) !important;
}

#grupos table tbody tr:hover,
#grupos table tbody tr:hover td {
    background: #eff6f2 !important;
}

#grupos button {
    border: 1px solid var(--wc-border) !important;
    border-radius: .28rem !important;
    color: #405149 !important;
    background: var(--wc-surface-muted) !important;
    box-shadow: none !important;
}

/* Schedule */
#calendario > .space-y-3 {
    display: grid;
    gap: .55rem !important;
}

#calendario > .space-y-3 > div {
    margin-top: 0 !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: .34rem !important;
    background: var(--wc-surface) !important;
    box-shadow: none !important;
}

#calendario button {
    padding: .8rem 1rem !important;
}

#calendario button:hover {
    background: var(--wc-surface-muted) !important;
}

#calendario button .text-slate-800,
#calendario .text-slate-700,
#calendario .text-slate-900 {
    color: var(--wc-ink) !important;
}

#calendario .border-slate-100,
#calendario .divide-slate-100 > * + * {
    border-color: var(--wc-border) !important;
}

#calendario .bg-slate-900 {
    color: #ffffff !important;
    background: #183228 !important;
}

#calendario .bg-slate-100 {
    background: var(--wc-surface-muted) !important;
}

/* Scorers */
#goleadores > .relative > div:first-child {
    border: 1px solid var(--wc-border) !important;
    border-radius: .36rem !important;
    background: var(--wc-surface) !important;
    box-shadow: none !important;
}

#goleadores table tbody,
#goleadores table tr,
#goleadores table td {
    border-color: var(--wc-border) !important;
}

#goleadores table tr:hover td {
    background: #eff6f2;
}

#goleadores table .text-slate-900,
#goleadores table .text-slate-800 {
    color: var(--wc-ink) !important;
}

#goleadores .mt-4.grid > div {
    border: 1px solid var(--wc-border) !important;
    border-radius: .36rem !important;
    background: var(--wc-surface-muted) !important;
    box-shadow: none !important;
}

#goleadores .mt-4.grid > div > p.font-semibold {
    color: var(--wc-ink) !important;
}

/* Venues */
#sedes > .grid {
    gap: .65rem !important;
}

#sedes > .grid > div {
    padding: .8rem !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: .34rem !important;
    background: var(--wc-surface) !important;
    box-shadow: none !important;
}

#sedes > .grid > div > span:first-child {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border: 1px solid rgba(21, 150, 106, .2);
    border-radius: .24rem !important;
    color: #087a55 !important;
    background: rgba(21, 150, 106, .08) !important;
}

#sedes .text-slate-800 {
    color: var(--wc-ink) !important;
}

/* Dark mode */
[data-theme="dark"] .worldcup-page {
    --wc-primary: var(--vs-color-primary-strong);
    --wc-accent: #f0c660;
    color-scheme: dark;
    background: var(--wc-canvas) !important;
}

[data-theme="dark"] .worldcup-hero {
    border-color: rgba(151, 190, 171, .17);
    color: #f5faf7 !important;
    background:
        radial-gradient(circle at 82% 10%, rgba(240, 198, 96, .12), transparent 24%),
        radial-gradient(circle at 68% 5%, rgba(52, 211, 153, .15), transparent 28%),
        linear-gradient(142deg, #0b241b 0%, #081c15 62%, #061711 100%) !important;
    box-shadow: 0 12px 32px rgba(3, 18, 13, .18);
}

[data-theme="dark"] .worldcup-hero > .absolute:first-child {
    opacity: .09 !important;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .5) 1px, transparent 1px) !important;
}

[data-theme="dark"] .worldcup-hero-content > span:first-child {
    border-color: rgba(240, 198, 96, .22) !important;
    color: #f4d88e !important;
    background: rgba(240, 198, 96, .08) !important;
}

[data-theme="dark"] .worldcup-hero-content > span:first-child i,
[data-theme="dark"] .worldcup-hero h1 span {
    color: #f0c660 !important;
}

[data-theme="dark"] .worldcup-hero h1 {
    color: #f6fbf8 !important;
}

[data-theme="dark"] .worldcup-hero-content > p {
    color: #aebfb6 !important;
}

[data-theme="dark"] .worldcup-next-panel {
    border-color: rgba(207, 229, 218, .15) !important;
    color: #e8f2ed;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .worldcup-next-panel a {
    color: #eaf4ef;
}

[data-theme="dark"] .worldcup-next-panel .text-amber-200,
[data-theme="dark"] .worldcup-next-panel .text-amber-300 {
    color: #f0c660 !important;
}

[data-theme="dark"] .worldcup-next-panel .text-emerald-50,
[data-theme="dark"] .worldcup-next-panel .text-emerald-50\/90,
[data-theme="dark"] .worldcup-next-panel .text-emerald-50\/85,
[data-theme="dark"] .worldcup-next-panel .text-emerald-50\/80,
[data-theme="dark"] .worldcup-next-panel .text-emerald-50\/75,
[data-theme="dark"] .worldcup-next-panel .text-emerald-100\/70,
[data-theme="dark"] .worldcup-next-panel .text-emerald-200,
[data-theme="dark"] .worldcup-next-panel .text-white {
    color: #b4c6bd !important;
}

[data-theme="dark"] .worldcup-next-panel .bg-white\/15,
[data-theme="dark"] .worldcup-next-panel .bg-white\/10,
[data-theme="dark"] .worldcup-next-panel .bg-emerald-950\/30 {
    border-color: rgba(207, 229, 218, .13) !important;
    color: #c4d2cb !important;
    background: rgba(255, 255, 255, .04) !important;
}

[data-theme="dark"] .worldcup-secondary-cta {
    border-color: rgba(207, 229, 218, .18) !important;
    color: #d6e5dd !important;
    background: rgba(255, 255, 255, .05) !important;
}

[data-theme="dark"] .worldcup-secondary-cta:hover {
    border-color: rgba(110, 231, 183, .32) !important;
    color: #9af2c8 !important;
    background: rgba(52, 211, 153, .08) !important;
}

[data-theme="dark"] .worldcup-section {
    border-color: var(--wc-border);
    background: var(--wc-surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .worldcup-section > div:first-child > div > span:first-child,
[data-theme="dark"] #goleadores > div:first-child > span,
[data-theme="dark"] #eliminatorias > div:first-child > span {
    border-color: rgba(110, 231, 183, .2) !important;
    color: #8cf0c2 !important;
    background: rgba(52, 211, 153, .08) !important;
}

[data-theme="dark"] #eliminatorias .bg-white,
[data-theme="dark"] #grupos .bg-white,
[data-theme="dark"] #calendario .bg-white,
[data-theme="dark"] #goleadores .bg-white,
[data-theme="dark"] #sedes .bg-white,
[data-theme="dark"] .worldcup-page .wc-match,
[data-theme="dark"] #grupos > div[x-show] > .grid > div,
[data-theme="dark"] #calendario > .space-y-3 > div,
[data-theme="dark"] #goleadores > .relative > div:first-child,
[data-theme="dark"] #sedes > .grid > div {
    border-color: var(--wc-border) !important;
    background: var(--wc-surface) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .worldcup-page .text-slate-900,
[data-theme="dark"] .worldcup-page .text-slate-800,
[data-theme="dark"] .worldcup-page .text-slate-700,
[data-theme="dark"] #grupos .text-slate-900,
[data-theme="dark"] #grupos .text-slate-800,
[data-theme="dark"] #grupos .text-slate-700,
[data-theme="dark"] #calendario button .text-slate-800,
[data-theme="dark"] #calendario .text-slate-700,
[data-theme="dark"] #goleadores table .text-slate-900,
[data-theme="dark"] #goleadores table .text-slate-800,
[data-theme="dark"] #sedes .text-slate-800 {
    color: var(--wc-ink) !important;
}

[data-theme="dark"] .worldcup-page .text-slate-600,
[data-theme="dark"] .worldcup-page .text-slate-500,
[data-theme="dark"] .worldcup-page .text-slate-400,
[data-theme="dark"] .worldcup-page .text-slate-300 {
    color: var(--wc-muted) !important;
}

[data-theme="dark"] #grupos > div[x-show] > .grid > div > div:first-child,
[data-theme="dark"] #grupos table thead,
[data-theme="dark"] #grupos table thead tr,
[data-theme="dark"] #grupos table thead th,
[data-theme="dark"] #calendario button:hover,
[data-theme="dark"] #calendario .bg-slate-100,
[data-theme="dark"] #goleadores .mt-4.grid > div {
    border-color: var(--wc-border) !important;
    background: var(--wc-surface-muted) !important;
}

[data-theme="dark"] #grupos table tbody,
[data-theme="dark"] #grupos table tbody tr,
[data-theme="dark"] #grupos table tbody td,
[data-theme="dark"] #calendario .border-slate-100,
[data-theme="dark"] #calendario .divide-slate-100 > * + *,
[data-theme="dark"] #goleadores table tbody,
[data-theme="dark"] #goleadores table tr,
[data-theme="dark"] #goleadores table td {
    border-color: var(--wc-border) !important;
}

[data-theme="dark"] #grupos table tbody tr:hover,
[data-theme="dark"] #grupos table tbody tr:hover td,
[data-theme="dark"] #goleadores table tr:hover td {
    background: #16281f !important;
}

[data-theme="dark"] #grupos button {
    border-color: var(--wc-border) !important;
    color: #b6c6be !important;
    background: var(--wc-surface-muted) !important;
}

[data-theme="dark"] #sedes > .grid > div > span:first-child {
    border-color: rgba(110, 231, 183, .2);
    color: #8cf0c2 !important;
    background: rgba(52, 211, 153, .08) !important;
}

[data-theme="dark"] .wc-bracket-svg path {
    stroke: #365044;
}

/* Responsive */
@media (min-width: 1280px) {
    #grupos > div[x-show] > .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    #sedes > .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .worldcup-page {
        padding-bottom: 4.35rem;
    }

    .worldcup-hero-inner {
        padding: 1.8rem .8rem 2rem !important;
    }

    .worldcup-hero h1 {
        margin-top: .8rem !important;
        font-size: clamp(2rem, 10vw, 2.75rem) !important;
    }

    .worldcup-next-panel {
        margin-top: 1.1rem !important;
        padding: .8rem !important;
    }

    .worldcup-next-panel .text-base {
        font-size: .82rem !important;
    }

    .worldcup-next-panel .h-7.w-7 {
        width: 1.6rem !important;
        height: 1.6rem !important;
    }

    .worldcup-hero-actions {
        width: 100%;
    }

    .worldcup-primary-cta,
    .worldcup-secondary-cta {
        width: 100%;
    }

    .worldcup-shell {
        gap: .65rem;
        padding: .65rem .55rem 1rem !important;
    }

    .worldcup-section {
        padding: .85rem;
        border-radius: .38rem;
    }

    .worldcup-section > div:first-child.mb-7,
    .worldcup-section > div:first-child.mb-6,
    .worldcup-section > h2.mb-6 {
        align-items: flex-start !important;
        gap: .55rem;
        margin-bottom: .8rem !important;
    }

    #grupos > div[x-show] > .grid,
    #sedes > .grid {
        grid-template-columns: 1fr !important;
    }

    #calendario button {
        padding: .7rem .75rem !important;
    }

    #calendario .w-20 {
        width: 2.8rem !important;
    }

    #calendario [x-show] > div {
        padding-right: .7rem !important;
        padding-left: .7rem !important;
    }

    #goleadores table td {
        padding-right: .45rem !important;
        padding-left: .45rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .worldcup-page * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}