:root{ --bg:#f7faf6; --surface:#fff; --soft:#f3f8f1; --text:#121714; --muted:#6d756f; --line:#e4ece2; --green:#12883f; --green-dark:#083719; --green-soft:#e7f6eb; --gold:#d5a72d; --red:#ed3044; --shadow:0 24px 70px rgba(10,39,19,.10); --soft-shadow:0 14px 36px rgba(10,39,19,.08); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at 70% 8%,rgba(18,136,63,.08),transparent 28rem),linear-gradient(180deg,#fff 0%,#f7faf6 100%)} .site-shell{overflow:hidden}.container{max-width:1210px}.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,236,226,.8)} .topbar-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;color:#0f1511;text-decoration:none;font-weight:900;font-size:1.15rem;letter-spacing:-.03em}.brand strong{color:var(--green)}.brand-cup{font-size:1.65rem;filter:drop-shadow(0 5px 10px rgba(213,167,45,.28))}.main-nav{display:flex;gap:34px;align-items:center}.main-nav a{font-size:.86rem;font-weight:800;color:#111;text-decoration:none}.main-nav a.is-active,.main-nav a:hover{color:var(--green)}.top-actions{display:flex;align-items:center;gap:14px}.language-pill{font-weight:800}.menu-pill{width:44px;height:44px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:1.1rem;box-shadow:0 12px 22px rgba(18,136,63,.22)} .dashboard-main{padding:30px 12px 56px}.worldcup-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}.hero-panel,.side-card,.summary-card,.toolbar-card,.match-card,.venues-section{background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:var(--soft-shadow);border-radius:30px}.hero-panel{position:relative;min-height:735px;padding:34px;overflow:hidden}.hero-art{position:absolute;inset:0;pointer-events:none}.green-arc{position:absolute;right:0;top:0;width:38%;height:55%;background:linear-gradient(160deg,#5fc275,#10883f);border-bottom-left-radius:170px;filter:drop-shadow(0 26px 45px rgba(18,136,63,.18))}.trophy-shape{position:absolute;right:13%;top:95px;font-size:16rem;line-height:1;filter:drop-shadow(0 24px 30px rgba(94,76,19,.26));transform:rotate(-3deg)}.hero-copy-block{position:relative;z-index:1;width:min(470px,60%)}.soft-chip{display:inline-flex;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:900;letter-spacing:.06em;font-size:.78rem;padding:8px 15px;margin-bottom:18px}.hero-copy-block h1{font-size:clamp(3.1rem,6vw,4.6rem);line-height:1.05;font-weight:900;letter-spacing:-.07em;margin:0 0 18px}.hero-copy-block h1 strong{color:var(--green);font-weight:900}.hero-copy-block p{color:var(--muted);font-weight:600;line-height:1.6;margin:0 0 20px}.countdown-panel{position:relative;z-index:2;margin-top:46px;width:min(520px,100%);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:17px;padding:18px 22px 14px;box-shadow:0 18px 46px rgba(10,39,19,.08)}.countdown-panel h2,.featured-head span{font-size:.78rem;font-weight:900;letter-spacing:.05em;margin:0 0 18px}.countdown-flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.countdown-unit{display:grid;justify-items:center;gap:10px;min-width:0}.countdown-unit b{font-size:.68rem;letter-spacing:.18em;color:#6f7771}.flip-card-box{--radius:9px;position:relative;width:76px;height:82px;border-radius:var(--radius);background:#06090c;perspective:900px;box-shadow:0 16px 28px rgba(0,0,0,.18);overflow:hidden;color:#fff}.flip-card-box::before,.flip-card-box::after{content:"";position:absolute;left:0;right:0;height:50%;background:linear-gradient(#0c1016,#080b10);z-index:0}.flip-card-box::before{top:0}.flip-card-box::after{bottom:0;background:linear-gradient(#05070b,#11141b)}.flip-card-box .flip-current,.flip-card-box .flip-next,.flip-card-box .flip-top-anim,.flip-card-box .flip-bottom-anim,.flip-card-box span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Bebas Neue",Inter,sans-serif;font-size:4rem;letter-spacing:.04em;line-height:1;color:#f7f8f7;text-shadow:0 3px 5px rgba(0,0,0,.32)}.flip-card-box .flip-current{z-index:2}.flip-card-box::after{border-top:1px solid rgba(255,255,255,.12);z-index:3}.flip-card-box .flip-top-anim,.flip-card-box .flip-bottom-anim{height:50%;overflow:hidden;z-index:5;background:#080b10;backface-visibility:hidden}.flip-card-box .flip-top-anim{bottom:auto;transform-origin:bottom;align-items:end}.flip-card-box .flip-bottom-anim{top:50%;transform-origin:top;align-items:start;transform:rotateX(90deg);background:#11141b}.countdown-unit.is-flipping .flip-top-anim{animation:flipTop .62s cubic-bezier(.35,.02,.12,1) forwards}.countdown-unit.is-flipping .flip-bottom-anim{animation:flipBottom .62s cubic-bezier(.35,.02,.12,1) forwards}.local-time,.updated-at{font-size:.82rem;color:var(--muted);margin:14px 0 0}.updated-at{margin-top:4px}.featured-match-section{position:absolute;z-index:2;left:34px;right:34px;bottom:34px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:18px;padding:20px 22px 24px;box-shadow:var(--soft-shadow)}.featured-head{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--green)}.goal-test-inline{border:0;background:var(--green-soft);color:var(--green);font-weight:900;border-radius:999px;padding:8px 13px;font-size:.74rem}.featured-match-content{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:16px 0}.featured-team-modern{display:grid;justify-items:center;gap:9px;text-align:center}.featured-team-modern .team-logo,.mini-logo,.team-logo{width:62px;height:62px;border-radius:50%;object-fit:contain;border:1px solid var(--line);background:#fff;padding:5px}.featured-team-modern strong{font-weight:900}.featured-team-modern span{font-size:.82rem;color:var(--muted)}.featured-center-modern{text-align:center;min-width:210px;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 28px}.featured-center-modern .date{font-size:.82rem;font-weight:800;color:#59635b}.featured-center-modern .time{font-size:2rem;font-weight:900;color:var(--green);line-height:1.25}.featured-center-modern .venue{font-size:.84rem;color:var(--muted)}.see-matches-btn,.outline-action,.btn-all-matches,.btn-refresh{border:0;border-radius:999px;background:linear-gradient(135deg,var(--green),#0b6f33);color:#fff;font-weight:900;padding:13px 32px;box-shadow:0 14px 24px rgba(18,136,63,.18)}.see-matches-btn{display:block;margin:auto;min-width:230px}.side-column{display:grid;gap:22px}.side-card{padding:22px}.side-card-head,.news-head,.section-head-clean{display:flex;align-items:center;justify-content:space-between;gap:16px}.side-card-head strong,.news-head strong,.section-head-clean h2{display:block;font-size:.82rem;font-weight:900;letter-spacing:.04em}.side-card-head span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}.arrow-controls{display:flex;gap:10px}.arrow-controls button{width:34px;height:34px;border:0;border-radius:50%;background:#f3f6f2;color:var(--green);font-size:1.25rem}.standings-table{width:100%;margin:22px 0;border-collapse:collapse;font-size:.84rem}.standings-table th{color:#7b847e;font-weight:800;font-size:.72rem;padding:0 0 12px;text-align:center}.standings-table th:first-child{text-align:left}.standings-table td{border-top:1px solid var(--line);padding:14px 6px;text-align:center;font-weight:700}.standings-table td:first-child{text-align:left;white-space:nowrap}.standings-table b{margin-right:12px}.outline-action{width:100%;background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}.news-head a{font-size:.78rem;color:var(--green);font-weight:900;text-decoration:none}.news-row{display:grid;grid-template-columns:74px 1fr;gap:14px;margin-top:18px}.news-thumb{height:70px;border-radius:9px;background:linear-gradient(135deg,#cddfd2,#2b7d45)}.thumb-2{background:linear-gradient(135deg,#1f5e34,#b8d6be)}.thumb-3{background:linear-gradient(135deg,#0d2415,#83c793)}.news-row h3{font-size:.88rem;font-weight:900;line-height:1.35;margin:0 0 8px}.news-row span{font-size:.8rem;color:var(--muted)}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.summary-card{padding:18px}.summary-label{font-size:.75rem;color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.12em}.summary-value{font-size:2.3rem;font-weight:900}.summary-note{font-size:.82rem;color:var(--muted)}.venues-section{padding:22px;margin:24px 0}.section-head-clean h2{margin:0}.section-head-clean button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font-weight:800;color:var(--green)}.venues-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.venue-card div{height:98px;border-radius:10px;background:linear-gradient(135deg,rgba(8,55,25,.9),rgba(18,136,63,.55)),url('https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?auto=format&fit=crop&w=600&q=70') center/cover}.venue-card strong{display:block;margin-top:12px}.venue-card span{color:var(--muted);font-size:.86rem}.all-matches-toggle-wrap{text-align:center;margin:28px 0}.toolbar-card{padding:20px;margin-bottom:16px}.toolbar-label{font-size:.8rem;font-weight:900;color:var(--muted)}.form-control,.form-select{border-radius:16px;border-color:var(--line)}.btn-refresh{width:100%;border-radius:16px;padding:13px}.custom-alert{border-radius:18px;border-color:#ffe1a3;background:#fff8e8;color:#7c5a19}.matches-section{margin-top:22px}.match-card{padding:18px;height:100%}.match-topline,.team-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.match-phase{font-size:.72rem;color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:.12em}.status-badge{border-radius:999px;padding:7px 10px;font-size:.68rem;font-weight:900;text-transform:uppercase}.status-live{background:#ffe9e9;color:#d4252e}.status-completed{background:var(--green-soft);color:var(--green)}.status-scheduled{background:#eef3ff;color:#315fd8}.match-meta,.team-subtitle,.footer-chip{color:var(--muted);font-size:.82rem}.teams-board{display:grid;gap:9px;margin-top:12px}.team-row{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:10px}.team-main{display:flex;align-items:center;gap:11px}.team-name{font-weight:900}.team-score{font-family:"Bebas Neue";font-size:2rem}.match-footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.footer-chip{background:#f1f5ee;border-radius:999px;padding:7px 10px;font-weight:700}.empty-state{background:#fff;border:1px dashed var(--line);border-radius:24px;padding:28px;text-align:center}.empty-title{font-weight:900}.goal-overlay{position:fixed;inset:0;display:grid;place-items:end center;background:rgba(3,30,13,.82);backdrop-filter:blur(6px);z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s ease;overflow:hidden}.goal-overlay.is-active{opacity:1;pointer-events:auto}.goal-card-overlay{height:100vh;text-align:center;width:100%;padding:24px 20px 42px;transform:translateY(30px);transition:transform .35s ease}.goal-overlay.is-active .goal-card-overlay{transform:translateY(0)}.goal-flag{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#fff;margin:0 auto 10px;font-size:2rem;box-shadow:0 10px 25px rgba(0,0,0,.25)}.goal-team-name{color:#fff;text-transform:uppercase;font-weight:900;letter-spacing:.04em;font-size:clamp(1rem,2vw,1.3rem)}.goal-word{font-family:"Bebas Neue";font-size:clamp(7rem,22vw,15rem);line-height:.78;color:#fff;font-style:italic;letter-spacing:.03em;text-shadow:0 18px 35px rgba(0,0,0,.34);animation:goalPop .75s cubic-bezier(.2,1.4,.32,1) both}.goal-close-hint{border:0;background:transparent;color:rgba(255,255,255,.85);font-weight:700}.confetti-field::before,.confetti-field::after{content:"";position:absolute;inset:-20%;background-image:linear-gradient(45deg,#fff 0 10px,transparent 10px),linear-gradient(45deg,#13c86b 0 12px,transparent 12px),linear-gradient(45deg,#ef3340 0 13px,transparent 13px);background-size:130px 180px,170px 130px,220px 160px;background-position:10px 20px,40px 60px,90px 10px;animation:confettiFall 3.8s linear infinite}.confetti-field::after{transform:rotate(12deg);opacity:.75;animation-duration:4.6s} @keyframes flipTop{0%{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}@keyframes flipBottom{0%,48%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}@keyframes goalPop{0%{transform:scale(.55) translateY(40px);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}@keyframes confettiFall{to{transform:translateY(24%) rotate(8deg)}} @media (max-width:1100px){.main-nav{display:none}.worldcup-layout{grid-template-columns:1fr}.side-column{grid-template-columns:1fr 1fr}.hero-copy-block{width:66%}.trophy-shape{right:6%;font-size:13rem}.green-arc{width:36%}} @media (max-width:760px){.topbar-inner{height:64px}.worldcup-layout{gap:16px}.hero-panel{padding:22px;min-height:auto}.hero-copy-block{width:100%;padding-right:110px}.hero-copy-block h1{font-size:3.1rem}.green-arc{width:170px;height:180px}.trophy-shape{right:6px;top:88px;font-size:6rem}.countdown-panel{margin-top:28px}.countdown-flip-grid{gap:10px}.flip-card-box{width:100%;height:70px}.flip-card-box .flip-current,.flip-card-box .flip-next,.flip-card-box .flip-top-anim,.flip-card-box .flip-bottom-anim,.flip-card-box span{font-size:3.2rem}.featured-match-section{position:relative;left:auto;right:auto;bottom:auto;margin-top:20px}.featured-match-content{grid-template-columns:1fr;gap:14px}.featured-center-modern{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}.side-column,.summary-strip,.venues-grid{grid-template-columns:1fr}.standings-table{font-size:.75rem}.news-row{grid-template-columns:64px 1fr}} /* Final requested fixes: no news card, reliable FlipDown clock, responsive group widget */ .side-column{grid-template-columns:1fr}.news-card{display:none!important}.group-card{min-height:100%} .countdown-panel{overflow:visible}.countdown-flip-grid.is-library-clock{display:flex!important;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;max-width:640px;margin:16px 0 0;padding:0;height:auto;overflow:visible}.countdown-panel .flipdown{font-family:Inter,system-ui,sans-serif}.countdown-panel .flipdown.flipdown__theme-dark{height:auto}.countdown-panel .flipdown .rotor-group{position:relative;display:flex;gap:8px;align-items:flex-start;padding-right:0}.countdown-panel .flipdown .rotor-group:not(:last-child):after,.countdown-panel .flipdown .rotor-group:not(:last-child):before{display:none}.countdown-panel .flipdown .rotor-group-heading{position:absolute;left:0;right:0;bottom:-22px;height:auto;text-align:center}.countdown-panel .flipdown .rotor-group-heading:before{font-family:Inter,system-ui,sans-serif;color:#67706a;font-size:.66rem;font-weight:900;letter-spacing:.16em}.countdown-panel .flipdown .rotor{width:48px;height:74px;border-radius:12px;background:#07130b;box-shadow:0 16px 24px rgba(7,19,11,.18);font-size:3rem}.countdown-panel .flipdown .rotor-leaf,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom,.countdown-panel .flipdown .rotor:after{width:48px;height:37px}.countdown-panel .flipdown .rotor-leaf-front,.countdown-panel .flipdown .rotor-leaf-rear,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom{width:48px;height:37px;background:#07130b;color:#f8fff8;font-family:"Bebas Neue",Inter,sans-serif;font-size:3rem;line-height:74px;border-radius:12px 12px 0 0}.countdown-panel .flipdown .rotor-bottom,.countdown-panel .flipdown .rotor-leaf-rear{border-radius:0 0 12px 12px}.countdown-panel .flipdown .rotor:after{border-top:1px solid rgba(255,255,255,.14);top:36px}.countdown-flip-grid:not(.is-library-clock){grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.flip-card-box{overflow:hidden;perspective:900px}.flip-card-box .flip-next{z-index:1;color:#f7f8f7}.countdown-unit.is-flipping .flip-current{visibility:hidden}.standing-logo{width:22px;height:22px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line);margin-right:8px;vertical-align:middle}.standing-flag{display:inline-block;width:24px;margin-right:8px}.standings-table td:first-child span{vertical-align:middle}.arrow-controls button:disabled{opacity:.4;cursor:not-allowed}.side-card-head span{min-height:18px} @media (max-width:1100px){.side-column{grid-template-columns:1fr!important}.countdown-panel .flipdown .rotor{width:42px;height:66px}.countdown-panel .flipdown .rotor-leaf,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom,.countdown-panel .flipdown .rotor:after{width:42px;height:33px}.countdown-panel .flipdown .rotor-leaf-front,.countdown-panel .flipdown .rotor-leaf-rear,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom{width:42px;height:33px;font-size:2.65rem;line-height:66px}.countdown-panel .flipdown .rotor:after{top:32px}} @media (max-width:760px){.countdown-flip-grid.is-library-clock{gap:8px;max-width:100%;transform:scale(.82);transform-origin:left top;margin-bottom:-10px}.countdown-panel .flipdown .rotor-group{gap:4px}.countdown-panel .flipdown .rotor{width:34px;height:54px;border-radius:9px}.countdown-panel .flipdown .rotor-leaf,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom,.countdown-panel .flipdown .rotor:after{width:34px;height:27px}.countdown-panel .flipdown .rotor-leaf-front,.countdown-panel .flipdown .rotor-leaf-rear,.countdown-panel .flipdown .rotor-top,.countdown-panel .flipdown .rotor-bottom{width:34px;height:27px;font-size:2.15rem;line-height:54px}.countdown-panel .flipdown .rotor:after{top:26px}.countdown-panel .flipdown .rotor-group-heading:before{font-size:.58rem}} /* V3 fix requested: countdown below group widget, no venues, custom stable flip clock */ .venues-section{display:none!important}.side-column{display:grid;grid-template-columns:1fr!important;gap:18px}.side-column .countdown-panel{width:100%;margin:0;background:#fff;border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:var(--soft-shadow);overflow:hidden}.side-column .countdown-panel h2{font-size:.82rem;letter-spacing:.08em;color:#111;margin-bottom:18px}.side-column .countdown-flip-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;max-width:none;margin:0;transform:none!important}.side-column .countdown-unit{gap:9px;min-width:0}.side-column .countdown-unit b{font-size:.58rem;line-height:1;letter-spacing:.14em;color:#748079;white-space:nowrap}.side-column .flip-card-box{position:relative;width:100%;height:64px;min-width:0;border-radius:14px;background:linear-gradient(180deg,#132418,#07120b);box-shadow:0 15px 28px rgba(8,55,25,.15);overflow:hidden;perspective:800px;transform-style:preserve-3d}.side-column .flip-card-box:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18);z-index:9}.side-column .flip-card-box:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 42%,rgba(0,0,0,.14));pointer-events:none;z-index:10}.side-column .flip-card-box .flip-current,.side-column .flip-card-box .flip-next,.side-column .flip-card-box .flip-top-anim,.side-column .flip-card-box .flip-bottom-anim,.side-column .flip-card-box span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Bebas Neue",Inter,sans-serif;font-size:clamp(2.35rem,5.4vw,3.45rem);font-weight:400;letter-spacing:.03em;line-height:1;color:#f8fff7;text-shadow:0 3px 8px rgba(0,0,0,.24);backface-visibility:hidden;overflow:hidden}.side-column .flip-card-box .flip-current{z-index:2;clip-path:inset(0 0 50% 0);background:linear-gradient(180deg,#142719,#0b1a10)}.side-column .flip-card-box .flip-next{z-index:1;clip-path:inset(50% 0 0 0);background:linear-gradient(180deg,#09160e,#101f14)}.side-column .flip-card-box .flip-top-anim{z-index:4;clip-path:inset(0 0 50% 0);transform-origin:center bottom;background:linear-gradient(180deg,#142719,#0b1a10);opacity:0}.side-column .flip-card-box .flip-bottom-anim{z-index:3;clip-path:inset(50% 0 0 0);transform-origin:center top;background:linear-gradient(180deg,#09160e,#101f14);transform:rotateX(90deg);opacity:0}.side-column .countdown-unit.is-flipping .flip-top-anim{opacity:1;animation:minimalFlipTop .36s cubic-bezier(.45,.02,.2,1) forwards}.side-column .countdown-unit.is-flipping .flip-bottom-anim{opacity:1;animation:minimalFlipBottom .36s cubic-bezier(.2,.8,.25,1) .34s forwards}.side-column .countdown-unit.is-flipping .flip-current{visibility:visible}.side-column .local-time{margin:18px 0 0;color:var(--muted);font-size:.82rem;font-weight:600;line-height:1.45}.side-column .updated-at{margin:6px 0 0;color:#879089;font-size:.76rem}.hero-panel{min-height:620px}.featured-match-section{bottom:34px}.countdown-panel .flipdown{display:none!important}@keyframes minimalFlipTop{0%{transform:rotateX(0);filter:brightness(1)}100%{transform:rotateX(-90deg);filter:brightness(.65)}}@keyframes minimalFlipBottom{0%{transform:rotateX(90deg);filter:brightness(.7)}100%{transform:rotateX(0);filter:brightness(1)}} @media (max-width:1100px){.side-column .countdown-flip-grid{gap:12px}.side-column .flip-card-box{height:74px}.side-column .flip-card-box .flip-current,.side-column .flip-card-box .flip-next,.side-column .flip-card-box .flip-top-anim,.side-column .flip-card-box .flip-bottom-anim,.side-column .flip-card-box span{font-size:4rem}.hero-panel{min-height:620px}} @media (max-width:760px){.side-column .countdown-panel{padding:20px;border-radius:24px}.side-column .countdown-flip-grid{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.side-column .flip-card-box{height:58px;border-radius:12px}.side-column .flip-card-box .flip-current,.side-column .flip-card-box .flip-next,.side-column .flip-card-box .flip-top-anim,.side-column .flip-card-box .flip-bottom-anim,.side-column .flip-card-box span{font-size:2.55rem}.side-column .countdown-unit b{font-size:.52rem;letter-spacing:.1em}.featured-match-section{bottom:auto}.hero-panel{min-height:auto}} /* Final countdown/header fix: no menu, stable CodePen-style digit flip */ .main-nav,.top-actions{display:none!important}.topbar-inner{justify-content:space-between}.topbar-spacer{width:1px;height:1px}.topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(16,54,30,.08)} .side-column .countdown-panel{overflow:visible!important;padding:24px 20px 22px!important}.side-column .countdown-panel h2{margin:0 0 18px!important;color:#0c7d3b!important;font-size:.78rem!important;letter-spacing:.16em!important;font-weight:900!important} .flip-clock{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin:0;align-items:start;overflow:visible!important}.flip-clock .countdown-unit{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}.flip-clock .countdown-unit b{font-size:.58rem;line-height:1;color:#707a73;letter-spacing:.16em;font-weight:900;white-space:nowrap}.flip-clock .flip-card-box{display:flex;justify-content:center;gap:4px;width:100%;height:70px;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;perspective:none!important}.flip-clock .flip-card-box:before,.flip-clock .flip-card-box:after{display:none!important} .flip-digit{position:relative;display:block;flex:1 1 0;min-width:0;max-width:42px;height:70px;border-radius:10px;background:#0b1c10;box-shadow:0 14px 24px rgba(12,70,32,.18);overflow:hidden;perspective:520px;transform:translateZ(0)}.flip-digit:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18);z-index:6}.flip-digit:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%,rgba(0,0,0,.22));z-index:7;pointer-events:none}.digit-top,.digit-bottom,.digit-flap{position:absolute;left:0;width:100%;height:50%;display:flex;justify-content:center;font-family:"Bebas Neue",Inter,sans-serif;font-size:3.35rem;font-weight:400;letter-spacing:.02em;color:#f8fff7;line-height:70px;text-shadow:0 3px 8px rgba(0,0,0,.25);overflow:hidden;backface-visibility:hidden}.digit-top{top:0;align-items:flex-start;background:linear-gradient(180deg,#17301d,#0d2113);border-radius:10px 10px 0 0;z-index:2}.digit-bottom{bottom:0;align-items:flex-end;background:linear-gradient(180deg,#0a190e,#102516);border-radius:0 0 10px 10px;z-index:1}.digit-bottom{line-height:0}.digit-flap{background:#102516;z-index:5;opacity:0}.digit-flap-top{top:0;align-items:flex-start;line-height:70px;transform-origin:center bottom;background:linear-gradient(180deg,#17301d,#0d2113);border-radius:10px 10px 0 0}.digit-flap-bottom{bottom:0;align-items:flex-end;line-height:0;transform-origin:center top;background:linear-gradient(180deg,#0a190e,#102516);border-radius:0 0 10px 10px;transform:rotateX(90deg)}.flip-digit.is-flipping .digit-flap-top{opacity:1;animation:flipTopCodepen .32s cubic-bezier(.37,.01,.94,.35) forwards}.flip-digit.is-flipping .digit-flap-bottom{opacity:1;animation:flipBottomCodepen .38s cubic-bezier(.15,.85,.32,1.12) .31s forwards} @keyframes flipTopCodepen{0%{transform:rotateX(0deg);filter:brightness(1)}100%{transform:rotateX(-90deg);filter:brightness(.55)}}@keyframes flipBottomCodepen{0%{transform:rotateX(90deg);filter:brightness(.55)}100%{transform:rotateX(0deg);filter:brightness(1)}} .side-column .local-time{margin-top:18px!important;font-size:.82rem!important;line-height:1.45}.side-column .updated-at{font-size:.74rem!important;color:#8a948e!important} @media (max-width:1100px){.flip-clock .flip-card-box{height:76px}.flip-digit{height:76px;max-width:48px}.digit-top,.digit-bottom,.digit-flap{font-size:3.75rem;line-height:76px}.digit-bottom,.digit-flap-bottom{line-height:0}} @media (max-width:760px){.flip-clock{gap:8px}.side-column .countdown-panel{padding:20px 14px!important}.flip-clock .flip-card-box{height:58px;gap:3px}.flip-digit{height:58px;max-width:34px;border-radius:9px}.digit-top,.digit-bottom,.digit-flap{font-size:2.8rem;line-height:58px}.digit-bottom,.digit-flap-bottom{line-height:0}.flip-clock .countdown-unit b{font-size:.5rem;letter-spacing:.1em}.brand{font-size:1rem}.brand-cup{font-size:1.35rem}} /* V5 hard fix: countdown flip estable, sin números cortados */ .flip-clock{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;width:100%!important;overflow:visible!important;align-items:start!important} .flip-clock .countdown-unit{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;min-width:0!important} .flip-clock .countdown-unit b{font-size:.58rem!important;line-height:1!important;color:#6f7b72!important;letter-spacing:.14em!important;font-weight:900!important;white-space:nowrap!important} .flip-clock .flip-card-box{display:flex!important;gap:4px!important;justify-content:center!important;align-items:center!important;width:100%!important;height:auto!important;min-height:78px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;perspective:none!important} .flip-clock .flip-card-box::before,.flip-clock .flip-card-box::after{display:none!important} .flip-digit{--h:76px;--w:44px;position:relative!important;display:block!important;flex:0 1 var(--w)!important;width:var(--w)!important;min-width:30px!important;max-width:var(--w)!important;height:var(--h)!important;border-radius:12px!important;background:#0b2112!important;box-shadow:0 16px 28px rgba(9,54,24,.18)!important;overflow:hidden!important;perspective:900px!important;transform:translateZ(0)!important} .flip-digit::after{content:""!important;position:absolute!important;left:0!important;right:0!important;top:50%!important;height:1px!important;background:rgba(255,255,255,.22)!important;z-index:8!important}.flip-digit::before{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 42%,rgba(0,0,0,.24))!important;z-index:9!important;pointer-events:none!important} .digit-top,.digit-bottom,.digit-flap{position:absolute!important;left:0!important;width:100%!important;height:50%!important;margin:0!important;padding:0!important;overflow:hidden!important;display:block!important;font-size:0!important;line-height:0!important;backface-visibility:hidden!important;color:#f8fff6!important;text-shadow:0 3px 8px rgba(0,0,0,.24)!important} .digit-top{top:0!important;border-radius:12px 12px 0 0!important;background:linear-gradient(180deg,#173720,#0d2514)!important;z-index:2!important}.digit-bottom{bottom:0!important;border-radius:0 0 12px 12px!important;background:linear-gradient(180deg,#07180c,#102817)!important;z-index:1!important} .digit-top::before,.digit-bottom::before,.digit-flap::before{content:attr(data-digit)!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:var(--h)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:"Bebas Neue",Inter,sans-serif!important;font-size:3.8rem!important;font-weight:400!important;letter-spacing:.02em!important;line-height:1!important;color:#f8fff6!important} .digit-bottom::before{top:calc(var(--h) / -2)!important}.digit-flap{z-index:7!important;opacity:0!important}.digit-flap-top{top:0!important;transform-origin:center bottom!important;border-radius:12px 12px 0 0!important;background:linear-gradient(180deg,#173720,#0d2514)!important}.digit-flap-bottom{bottom:0!important;transform-origin:center top!important;transform:rotateX(90deg)!important;border-radius:0 0 12px 12px!important;background:linear-gradient(180deg,#07180c,#102817)!important}.digit-flap-bottom::before{top:calc(var(--h) / -2)!important} .flip-digit.is-flipping .digit-flap-top{opacity:1!important;animation:wcFlipTop .34s cubic-bezier(.4,0,.2,1) forwards!important}.flip-digit.is-flipping .digit-flap-bottom{opacity:1!important;animation:wcFlipBottom .38s cubic-bezier(.2,.8,.2,1) .33s forwards!important} @keyframes wcFlipTop{0%{transform:rotateX(0deg);filter:brightness(1)}100%{transform:rotateX(-90deg);filter:brightness(.62)}}@keyframes wcFlipBottom{0%{transform:rotateX(90deg);filter:brightness(.62)}100%{transform:rotateX(0deg);filter:brightness(1)}} .side-column .countdown-panel{overflow:visible!important}.side-column .local-time{clear:both!important;margin-top:18px!important;line-height:1.5!important}.side-column .updated-at{line-height:1.4!important} @media (max-width:760px){.flip-clock{gap:8px!important}.flip-digit{--h:62px;--w:34px;border-radius:10px!important}.flip-clock .flip-card-box{gap:3px!important;min-height:64px!important}.digit-top,.digit-flap-top{border-radius:10px 10px 0 0!important}.digit-bottom,.digit-flap-bottom{border-radius:0 0 10px 10px!important}.digit-top::before,.digit-bottom::before,.digit-flap::before{font-size:3rem!important}.flip-clock .countdown-unit b{font-size:.5rem!important;letter-spacing:.1em!important}} /* V6 FINAL COUNTDOWN FIX: clean single-card flip inspired by the provided CodePen. */ #countdownCards.flip-clock{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; width:100%!important; align-items:start!important; overflow:visible!important; } #countdownCards .countdown-unit{ display:flex!important; flex-direction:column!important; align-items:center!important; gap:10px!important; min-width:0!important; } #countdownCards .countdown-unit b{ font-size:.58rem!important; line-height:1!important; letter-spacing:.14em!important; font-weight:900!important; color:#6f7b72!important; white-space:nowrap!important; } #countdownCards .wc-flip-track{ display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; width:100%!important; } #countdownCards .flip-card-box, #countdownCards .flip-digit, #countdownCards .digit-top, #countdownCards .digit-bottom, #countdownCards .digit-flap, #countdownCards .wc-flip-value{ display:none!important; } #countdownCards .wc-flip-card{ position:relative!important; flex:0 0 44px!important; width:44px!important; min-width:44px!important; max-width:44px!important; height:76px!important; border-radius:14px!important; overflow:hidden!important; perspective:1000px!important; transform-style:preserve-3d!important; will-change:transform!important; background:linear-gradient(180deg,#173820 0%,#0d2615 49.5%,#07180c 50%,#102817 100%)!important; box-shadow:0 16px 28px rgba(9,54,24,.17), inset 0 1px 0 rgba(255,255,255,.12)!important; color:#f8fff6!important; } #countdownCards .wc-flip-card::after{ content:""!important; position:absolute!important; left:0!important; right:0!important; top:50%!important; height:1px!important; background:rgba(255,255,255,.22)!important; box-shadow:0 -1px 0 rgba(0,0,0,.20)!important; z-index:8!important; } #countdownCards .wc-card-half, #countdownCards .wc-flap{ position:absolute!important; left:0!important; width:100%!important; height:50%!important; overflow:hidden!important; backface-visibility:hidden!important; transform-style:preserve-3d!important; } #countdownCards .wc-card-upper{ top:0!important; z-index:2!important; background:linear-gradient(180deg,#173820,#0d2615)!important; border-radius:14px 14px 0 0!important; } #countdownCards .wc-card-lower{ bottom:0!important; z-index:1!important; background:linear-gradient(180deg,#07180c,#102817)!important; border-radius:0 0 14px 14px!important; } #countdownCards .wc-card-value{ position:absolute!important; left:0!important; width:100%!important; height:76px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-family:"Bebas Neue",Inter,system-ui,sans-serif!important; font-size:3.55rem!important; line-height:1!important; letter-spacing:.05em!important; color:#f8fff6!important; text-shadow:0 3px 9px rgba(0,0,0,.25)!important; } #countdownCards .wc-card-upper .wc-card-value{ top:0!important; } #countdownCards .wc-card-lower .wc-card-value{ top:-38px!important; } #countdownCards .wc-flap{ z-index:6!important; opacity:0!important; will-change:transform,opacity,filter!important; } #countdownCards .wc-flap-top{ top:0!important; transform-origin:center bottom!important; background:linear-gradient(180deg,#173820,#0d2615)!important; border-radius:14px 14px 0 0!important; } #countdownCards .wc-flap-top .wc-card-value{ top:0!important; } #countdownCards .wc-flap-bottom{ bottom:0!important; transform:rotateX(90deg)!important; transform-origin:center top!important; background:linear-gradient(180deg,#07180c,#102817)!important; border-radius:0 0 14px 14px!important; } #countdownCards .wc-flap-bottom .wc-card-value{ top:-38px!important; } #countdownCards .wc-flip-card.is-flipping .wc-flap-top{ opacity:1!important; animation:wcSingleFlipTop .30s cubic-bezier(.37,.01,.94,.35) forwards!important; } #countdownCards .wc-flip-card.is-flipping .wc-flap-bottom{ opacity:1!important; animation:wcSingleFlipBottom .34s cubic-bezier(.15,.85,.32,1.12) .30s forwards!important; } @keyframes wcSingleFlipTop{ 0%{transform:rotateX(0deg);filter:brightness(1)} 100%{transform:rotateX(-90deg);filter:brightness(.6)} } @keyframes wcSingleFlipBottom{ 0%{transform:rotateX(90deg);filter:brightness(.6)} 100%{transform:rotateX(0deg);filter:brightness(1)} } @media (max-width:760px){ #countdownCards.flip-clock{gap:8px!important;} #countdownCards .wc-flip-track{gap:3px!important;} #countdownCards .wc-flip-card{width:34px!important;min-width:34px!important;max-width:34px!important;height:64px!important;border-radius:12px!important;} #countdownCards .wc-card-value{height:64px!important;font-size:3rem!important;letter-spacing:.035em!important;} #countdownCards .wc-card-lower .wc-card-value, #countdownCards .wc-flap-bottom .wc-card-value{top:-32px!important;} #countdownCards .wc-card-upper{border-radius:12px 12px 0 0!important;} #countdownCards .wc-card-lower{border-radius:0 0 12px 12px!important;} #countdownCards .wc-flap-top{border-radius:12px 12px 0 0!important;} #countdownCards .wc-flap-bottom{border-radius:0 0 12px 12px!important;} #countdownCards .countdown-unit b{font-size:.5rem!important;letter-spacing:.1em!important;} } /* Exact FlipDown integration */ #countdownCards.flipdown{ display:block!important; visibility:visible!important; opacity:1!important; width:510px!important; max-width:100%!important; height:110px!important; margin:0 auto!important; overflow:visible!important; transform-origin:top center!important; font-family:Inter,system-ui,sans-serif!important; } #countdownCards.flipdown::after{ content:""!important; display:block!important; clear:both!important; } #countdownCards.flipdown .rotor-group-heading{ display:block!important; height:30px!important; margin:0 0 10px!important; } #countdownCards.flipdown .rotor-group-heading:before{ color:#6f7b72!important; font-size:.58rem!important; line-height:70px!important; letter-spacing:.14em!important; font-weight:900!important; text-transform:uppercase!important; display:block!important; height:30px!important; text-align:center!important; } #countdownCards.flipdown .rotor-group{ position:relative!important; float:left!important; padding-right:14px!important; } #countdownCards.flipdown .rotor-group:last-child{ padding-right:0!important; } #countdownCards.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before, #countdownCards.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{ display:none!important; } #countdownCards.flipdown .rotor, #countdownCards.flipdown .rotor-leaf, #countdownCards.flipdown .rotor-leaf-front, #countdownCards.flipdown .rotor-leaf-rear, #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-bottom{ border-radius:12px!important; } #countdownCards.flipdown .rotor{ position:relative!important; float:left!important; width:44px!important; height:76px!important; font-family:"Bebas Neue",Inter,sans-serif!important; font-size:3.55rem!important; font-weight:400!important; letter-spacing:.05em!important; margin:0 4px 0 0!important; background:linear-gradient(180deg,#173820 0%,#0d2615 49.5%,#07180c 50%,#102817 100%)!important; box-shadow:0 16px 28px rgba(9,54,24,.17), inset 0 1px 0 rgba(255,255,255,.12)!important; color:#f8fff6!important; text-align:center!important; perspective:200px!important; } #countdownCards.flipdown .rotor:last-child{ margin-right:0!important; } #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-bottom{ overflow:hidden!important; position:absolute!important; width:44px!important; height:38px!important; } #countdownCards.flipdown .rotor-top{ line-height:76px!important; border-radius:12px 12px 0 0!important; } #countdownCards.flipdown .rotor-bottom{ bottom:0!important; line-height:0!important; border-radius:0 0 12px 12px!important; } #countdownCards.flipdown .rotor-leaf{ z-index:1!important; position:absolute!important; width:44px!important; height:76px!important; transform-style:preserve-3d!important; transition:transform 0s!important; } #countdownCards.flipdown .rotor-leaf.flipped{ transform:rotateX(-180deg)!important; transition:all .5s ease-in-out!important; } #countdownCards.flipdown .rotor-leaf-front, #countdownCards.flipdown .rotor-leaf-rear{ overflow:hidden!important; position:absolute!important; width:44px!important; height:38px!important; margin:0!important; transform:rotateX(0)!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; } #countdownCards.flipdown .rotor-leaf-front{ line-height:76px!important; border-radius:12px 12px 0 0!important; } #countdownCards.flipdown .rotor-leaf-rear{ line-height:0!important; border-radius:0 0 12px 12px!important; transform:rotateX(-180deg)!important; } #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-leaf-front{ background:linear-gradient(180deg,#173820,#0d2615)!important; color:#f8fff6!important; } #countdownCards.flipdown .rotor-bottom, #countdownCards.flipdown .rotor-leaf-rear{ background:linear-gradient(180deg,#07180c,#102817)!important; color:#f8fff6!important; } #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-bottom, #countdownCards.flipdown .rotor-leaf-front, #countdownCards.flipdown .rotor-leaf-rear{ text-shadow:0 3px 9px rgba(0,0,0,.25)!important; } #countdownCards.flipdown .rotor:after{ content:""!important; z-index:2!important; position:absolute!important; bottom:0!important; left:0!important; width:44px!important; height:38px!important; border-top:1px solid rgba(255,255,255,.22)!important; border-radius:0 0 12px 12px!important; } #countdownCards.flipdown.flipdown__theme-dark .rotor-group-heading:before{ color:#6f7b72!important; } @media (max-width:760px){ #countdownCards.flipdown{ width:100%!important; height:84px!important; } #countdownCards.flipdown .rotor-group{ padding-right:8px!important; } #countdownCards.flipdown .rotor-group-heading{ height:20px!important; margin-bottom:8px!important; } #countdownCards.flipdown .rotor-group-heading:before{ height:20px!important; line-height:50px!important; font-size:.5rem!important; letter-spacing:.1em!important; } #countdownCards.flipdown .rotor{ width:34px!important; height:58px!important; font-size:3rem!important; margin-right:3px!important; } #countdownCards.flipdown .rotor, #countdownCards.flipdown .rotor-leaf, #countdownCards.flipdown .rotor-leaf-front, #countdownCards.flipdown .rotor-leaf-rear, #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-bottom, #countdownCards.flipdown .rotor:after{ width:34px!important; } #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-bottom, #countdownCards.flipdown .rotor-leaf-front, #countdownCards.flipdown .rotor-leaf-rear, #countdownCards.flipdown .rotor:after{ height:29px!important; } #countdownCards.flipdown .rotor-top, #countdownCards.flipdown .rotor-leaf-front{ line-height:58px!important; } #countdownCards.flipdown .rotor-bottom, #countdownCards.flipdown .rotor-leaf-rear{ line-height:0!important; } } /*fixes*/ .dashboard-main { max-width: 1250px; width: 100%; margin: 0 auto; padding: 0 16px; box-sizing: border-box; } .worldcup-layout { display: grid; grid-template-columns: 55% calc(45% - 22px); gap: 22px; align-items: start; } .hero-panel, .side-column, .group-card, .countdown-panel { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .countdown-panel { overflow: visible; } .flipdown { width: 100% !important; max-width: 100% !important; transform: none !important; } /* Summary full width */ .summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 24px 0; } @media (max-width: 1024px) { .worldcup-layout { grid-template-columns: 1fr; } .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .summary-strip { grid-template-columns: 1fr; } } .goal-card-overlay { height: 100vh; width: 100%; padding: 24px 20px 42px; text-align: center; display: flex; flex-direction: column; justify-content: center; /* centra verticalmente */ align-items: center; /* centra horizontalmente */ transform: translateY(30px); transition: transform .35s ease; }