body{position:relative;margin:0;padding:0;min-height:100vh;overflow-x:hidden;background:#fff;}
body::before{content:"";background-image:url('https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/world-cup-2026-bg.webp');background-repeat:no-repeat;background-position:-10% center;background-size:cover;background-attachment:fixed;opacity:.2;position:fixed;top:0;left:0;width:200%;height:200%;z-index:-1;}
.header{display:flex;justify-content:center;align-items:center;gap:1em;padding:1em 0 2em 0;}
#landing .header{padding:2em 4em;}

.logo img{width:36%;display:block;margin:auto;}
#landing .logo img{width:60%;}
.sub{margin:0;padding:0 2em!important;font-size:1.1em;line-height:1.4;}
nav{margin:auto;}
#MicrositeNav a{padding:0.5em 0.8em 0.6em 0.8em;}
.instagram{display:flex; align-items:center;gap:5px;}
.instagram img{height:20px;}
.loader{display:flex;justify-content:center;align-items:center;min-height:100px;text-align:center;width:100%;color:#888;min-height:100px;}
.loading-icon{width:20px;height:20px;margin-right:0.4em;display:inline-block;background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/soccer-ball-icon.svg);background-position:center;background-repeat:no-repeat;background-size:100%;animation:bounce 2s infinite ease-in-out;}

.ball-container{position:fixed;left:-150px;top:-150px;pointer-events:none;transition:left 4s linear;z-index:10000;}
.ball{width:100px;height:100px;background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/soccer-ball.webp?1a);background-position:center;background-repeat:no-repeat;background-size:100%;border-radius:50%;box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);position:relative;transition:transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.ball-container.animating{animation:moveAcross 4s linear forwards;}
.ball-container.animating .ball{animation:smoothBounceAndRoll 4s cubic-bezier(0.35, 0, 0.65, 1) forwards;}

@keyframes moveAcross{
0%{left:var(--start-x);}
100%{left:var(--end-x);}
}

@keyframes smoothBounceAndRoll{
0%{top:var(--start-y);transform:rotate(0deg);}
30%{top:calc(100vh - 100px); animation-timing-function:cubic-bezier(0.35, 1, 0.65, 1);}
52%{top:calc(100vh - 350px); animation-timing-function:cubic-bezier(0.35, 0, 0.65, 1);}
70%{top:calc(100vh - 100px); animation-timing-function:cubic-bezier(0.35, 1, 0.65, 1);}
84%{top:calc(100vh - 200px); animation-timing-function:cubic-bezier(0.35, 0, 0.65, 1);}
96%,100%{top:var(--end-y);transform:rotate(var(--rotations));}
}

@keyframes bounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-30px);}
}

@keyframes sliding{
0%,100%{transform:translateX(0);}
50%{transform:translateX(-50px);}
}

.headline-container{backdrop-filter:blur(0.4em);background:linear-gradient(220deg,rgba(0,148,103,1) 0%, rgba(0,70,50,1) 100%)!important;border-radius:0.5em;}
.headline-it-card .headline-it-title-link .headline-it-title,.headline-ti-card .headline-ti-card-left-content .headline-ti-title-link,.headline-summary-content,.headline-summary-content a,.headline-summary-card .headline-summary-content .headline-summary-text-content .headline-summary-title,.headline-summary-card .headline-summary-content .headline-summary-text-content .headline-summary-summary{color:#fff!important;}
.bus-com-article-list-2-view{backdrop-filter:blur(4px);border:1px solid #fff;}
.headline-summary-card .headline-summary-content .headline-summary-text-content .headline-summary-title{line-height:1.3;}
.headline-summary-card .headline-summary-content .headline-summary-text-content .headline-summary-summary{line-height:1.5;}

.countdown-wrapper,.hp-card,.scores-fixtures,.team-container{font-family:'Roboto';}

/* COUNTDOWN */
.countdown-wrapper{display:flex;justify-content:center;align-items:center;margin:1em auto;gap:1em;}
.countdown-label{font-size:1.4em;font-weight:bold;}
.countdown-date{font-size:0.7em;font-weight:400;}
.countdown-timer{display:flex;align-items:center;}

.cd-num{font-size:1.8em;font-weight:900;color:#e90144;;margin-left:0.4em;background:#fff;border-radius:0.3em;padding:0.2em 0.3em;border:2px solid #000;}
.cd-unit{font-size:16px;font-weight:bold;color:#000;margin-left:0.3em;}
#cd-days{margin-left:0;}

/* SCHEDULE */
.carousel-container{padding:0;}

/* --- WIDGET --- */
.widget-header{display:flex;justify-content:space-between;align-items:center;margin:0 auto 1em auto;}
.widget-title{font-size:18px;font-weight:bold;}
.widget-link{font-size:14px;color:#666;text-decoration:none;display:flex;align-items:center;gap:4px;}
.widget-link:hover{color:#d32f2f;}

/* --- SWIPER --- */
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{display:none;}
#hp-swiper{margin:0 auto 1em auto;height:100px!important;}
#hp-swiper .swiper-slide{width:calc((100% - (12px*4)) / 4)!important;height:90px!important;display:flex;}

.widget-header a{text-decoration:none;}
button.button{padding:0.5em 1em;font-size:1.2em;background-color:#009467;line-height:1.4;border-radius:20px!important;color:white;border:1px solid #009467;font-weight:700;display:flex;align-items:center;}
button.button:hover{background-color:white;border:1px soild #009467;color:#3d9f1f;animation:none;}

.hp-slider-nav{display:flex!important;gap:10px;}

/* XIAOZAO CAROUSEL */
.master-countdown-link{text-decoration:none!important;display:block;width:100%;margin:0 auto;text-align:center;background:#fff!important;padding:1em;border-radius:0.6em;border:2px solid #226cce;}

.countdown-btn{display:inline-block;background:#e90044;color:#ffffff!important;font-size:1.1em;font-weight:bold;padding:0.4em 1em 0.5em 1em;border-radius:50px;margin:1em auto!important;border:none;cursor:pointer;transition:all 0.2s ease-in-out;}

.btn-arrow{margin-left:6px;display:inline-block;transition:transform 0.2s ease;}

.xiaozao-container{padding:0 3em 0 0;}
.master-countdown-link:hover .countdown-btn{background:#bd2130;transform:translateY(-2px);}
.master-countdown-link:hover .btn-arrow{transform:translateX(4px);}

.gif-card-box{width:100%;background:#ffffff;border-radius:0.6em;overflow:hidden;transition:transform 0.2s ease-in-out;}
.gif-card-box img{width:100%;height:auto;display:block;cursor:pointer;}
.master-countdown-link:hover .gif-card-box{transform:translateY(-2px);}

/* STANDINGS */
.standings-container{padding:0 2em;margin-bottom:2em;backdrop-filter:blur(6px);border:1px solid #27cf59;background:rgba(208,242,218,0.4);border-radius:0.5em;}

.header-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:10px;}
.header-container h2{margin:0;}

/* Swiper */
.slider-nav{display:flex;gap:0.5em;}
.swiper-button-next,.swiper-button-prev{position:static!important;margin:0!important;width:36px!important;height:36px!important;background:#fff;border:1px solid #ddd;border-radius:50%;}
.swiper-button-next::after,.swiper-button-prev::after{font-size:16px!important;color:#000;}
.swiper{width:100%;height:440px;}
.swiper-slide{/* height:calc((100% - 20px) / 2)!important; */height:auto!important;display:flex;flex-direction:column;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{content:''!important;}
.search-wrapper{margin-bottom:0!important;}

/* SCORES FIXTURES */
.header-title{font-size:1.6em;text-align:center;font-weight:bold;margin:0.4em auto;}

/* --- TABS CSS --- */
.tabs-container{display:flex;justify-content:center;gap:10px;position: sticky;top: 5%;z-index: 1;background: rgba(255, 255, 255, 0.7);padding: 1em;}
.tab-btn{padding:10px 30px;font-size:16px;font-weight:bold;border:none;border-radius:10px!important;background:#fff;border:1px solid #d32f2f;color:#d32f2f;cursor:pointer;transition:all 0.3s;}
.tab-btn.active{background:#d32f2f;color:#fff;}
.tab-content{display:none;animation:fadeIn 0.3s;}
.tab-content.active{display:block;}

@keyframes fadeIn{
from{opacity:0;transform:translateY(5px);}
to{opacity:1;transform:translateY(0);}
}

/* --- GROUPING CSS --- */
.stage-section{width:100%;margin:0 auto 4em auto;}
.stage-header{text-align:center;font-size:1.2em;font-weight:bold;line-height:1;margin:1em auto;display:flex;align-items:center;justify-content:space-around;}
#fixtures-container .stage-header{margin:1em auto;}
.date-header{font-size:1.4em;font-weight:900;color:#fff;background:#009467;margin:1.5em auto 0 auto;text-align:center;display:table;padding:0.2em 0.6em;border-top-right-radius:0.4em;border-top-left-radius:0.4em;}
.fixtures-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:2em;backdrop-filter:blur(6px);padding:2em;border:3px solid #009467;border-radius:0.6em;}


@media (min-width:1100px){
.stage-section{width:80%;}
}

@media (max-width:900px){
.stage-section{width:90%;}
.fixtures-list{grid-template-columns:1fr;gap:1em;padding:1em;}
.match-card{min-height:auto;}
.team{font-size:0.9em!important;}
.team.home{flex-direction:column-reverse;}
.team.away{flex-direction:column;}
.team.home,.team.away{text-align:center;justify-content:center!important;text-align:center!important;gap:0.4em;}
}

/* --- CARD --- */
.badge{border-radius:0!important;}
.hp-card,.match-card{box-sizing:border-box;width:100%;position:relative;background:#fff;border:1px solid #000;border-radius:0.5em;align-items:center;box-shadow:4px 4px 6px rgba(0, 0, 0, 0.14);cursor:pointer;transition:box-shadow 0.2s;overflow:hidden;cursor:auto;}
.hp-group,.match-name{color:#009467;font-weight:700;display:flex;justify-content:center;align-items:center;text-align:center;line-height:1;}

.hp-card{padding:0 1em;height:90px!important;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.hp-card:hover{box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);}
.hp-info{width:100%;display: flex;justify-content: space-evenly;align-items: center;margin-top: 1em;}
.card-body{display:flex;justify-content:center;align-items:flex-start;padding:0.6em 0 0 0!important;}
.match-card .card-body{flex: none !important;}

.hp-badge{font-size:0.8em;font-weight:bold;}
.hp-badge.upcoming,.badge.upcoming{background:#ededed;color:#000;font-weight:normal;}
.hp-badge.finished,.badge.finished{background:#009467;color:#fff;}
.hp-badge.live,.badge.live{background:#ffeaf0;color:#e90144;animation:pulse 2s infinite;padding:3px 5px;position: absolute;top: 0;}

.hp-team{display:flex;flex-direction:column;align-items:center;gap:6px;}
.hp-flag,.team-flag{width:40px;height:auto;object-fit:cover;border:1px solid #666!important;border-radius:0.2em;}
.hp-name{font-size:0.9em;line-height:1.2;font-weight:bold;color:#666;text-align:center;}

.hp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hp-group{font-size:0.8em;}
.hp-date{font-size:15px;}
.hp-score-area{font-size:1.2em;font-weight:900;text-align:center;letter-spacing:1px;white-space:nowrap;}

.match-card{padding:1em;min-height:110px;background:rgba(255,255,255,0.5);display:flex; flex-direction:column;justify-content:flex-start;align-items:stretch;}
#fixtures-container .match-card{background:rgba(255,255,255,0.8);flex:0 0 calc(33% - 8px);}
.card-top{display:flex;justify-content:center;align-items:center;}
.card-top .badge{font-size:1em!important;padding:0.2em 0.6em!important;border-top-left-radius:0.3em!important;border-top-right-radius:0.3em!important;}
.match-name{font-size:1.1em;}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:0.6;}
100%{opacity:1;}
}

.team{flex:1;font-size:1em;font-weight:bold;display:flex;align-items:center;gap:0.8em;line-height:1.2;}
.team-flag{width:50px;}
.team.home{justify-content:flex-end;text-align:right;}
.team.away{justify-content:flex-start;text-align:left;}
.center-info{width:120px;text-align:center;padding:0 1em;}
.score-display{font-size:1.4em;font-weight:bold;}
.f-score{font-size:24px;font-weight:bold;white-space:nowrap;}
.f-time{font-size:1.2em;font-weight:bold;color:#000;white-space:nowrap;}
.placeholder-text{color:#888;}
.placeholder-text .team-flag{display:none;}

/* Match Details (Hidden by default) */
.match-details{display:none;margin-top:15px;font-size:15px;}
.event-row{display:flex;justify-content:space-between;margin-bottom:6px;}
.event-left{width:45%;text-align:right;}
.event-center{width:10%;text-align:center;color:#888;font-weight:bold;}
.event-right{width:45%;text-align:left;}
.stats-container{margin-top:15px;}
.stats-title{text-align:center;font-weight:bold;margin-bottom:15px;font-size:14px;}
/* .stat-row-container {margin-bottom: 14px;} */
.stat-row-container .stat-label {text-align: center;font-size: 1em;color: #555;}
.stat-bar-wrapper {display:flex;align-items:center;justify-content:center;width:100%;height:10px;}
.stat-val {min-width:15px;text-align: center;font-size: 1em;font-weight: bold;}
.stat-bar-bg {flex-grow: 1;margin: 0 10px;height:6px;background:#ccc;border-radius:3px;width:100%;overflow:hidden;}
.stat-bar-fill{height:100%;background:#2e3f77;transition:width 0.3s ease;}
.stat-row-text{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:15px;}
.stat-val.home{text-align:left;}
.stat-val.away{text-align:right;}
.stat-label{flex:1;text-align:center;color:#666;}

/* --- MATCH DETAILS INTERNAL TABS --- */
.match-details-tabs{display:flex;border-bottom:1px solid #eee;margin-bottom:12px;}
.detail-tab-btn{flex:1;padding:10px;background:none;border:none;font-size:1em;font-weight:bold;color:#888;cursor:pointer;transition:all 0.2s;}
.detail-tab-btn.active{border-bottom:2px solid #d32f2f;}
.detail-panel{display:none;text-align:left;}
.detail-panel.active{display:block;}
.detail-panel.active #stats{display:grid;grid-template-columns: repeat(2,1fr);}

/* --- TIDY GRID EVENTS --- */
.events-container{margin:auto;}
.events-wrapper{display:flex;justify-content:space-between;gap:10px;font-size:15px;}
.event-col{flex:1;display:flex;flex-direction:column;gap:6px;}
.event-col.home-col .event-item{flex-direction: row;}
.event-col .event-item{flex-direction: row-reverse;}
.event-item{display:flex;align-items:center;gap:4px;flex-wrap: wrap;}
.event-icon{text-align:left;}
.event-time{font-weight:bold;color:#555;text-align:center;}
.home-col .event-name, .away-col .event-name{line-height: 1.2em;}
.away-col .event-name{text-align:right;}
.home-col .event-name{text-align:left;}
.event-center-spacer{border-left:1px solid #ccc;}

/* --- LINEUPS & SUBS --- */
.sub-row{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.sub-row div{display: flex;}
.sub-in{color:#28a745;font-weight:bold;}
.sub-out{color:#dc3545;}
.lineups-split{display:flex;justify-content:space-between;font-size:15px;}
.lineup-col{width:48%;}
.lineup-col.right-p{justify-items: end;}
.lineup-col.left-s .lineup-player, .lineup-col.right-s .lineup-player{flex-direction: row-reverse;}
.lineup-col.left-s .lineup-player{justify-content: flex-end;}
.lineup-player{padding:4px 0;line-height:1.2em;font-size:0.875em;display: flex;}
.stage-border{border-bottom:4px solid #fc3f30;width:40%;}
.split-line{border-left:1px solid #ccc;}

/* KNOCKOUT STANDINGS */
.knockout-standing-container{width:90%;margin:auto;}
.title-search-container{align-items:center;margin-bottom:1em;}
.title-search-container .search-wrapper{margin:0.4em auto;}
#standings-container{display:flex;flex-direction:column;gap:30px;}
.view-panel{display:none;}
.view-panel.active{display:block;}
.data-vis iframe{padding:1em;width:80%;height:1500px;}
.tab-btn{border-radius:10px!important;}

/* TEAM PROFILE */
.team-container{padding:1.4em 2em;width:90%;margin:1em auto;backdrop-filter:blur(6px);border:1px solid #27cf59;background:rgba(208, 242, 218, 0.4);border-radius:0.5em;}
.team-container .search-container{position:relative;top:3em;position:sticky;}
.team-container .search-container:after{content:"";position:absolute;top:50%;right:1em;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.team-container .search-container .search-input{background-image:none;}
.team-spacer{display:none;}
.section-title{text-align:center;font-size:20px;font-weight:bold;margin:20px 0;display:flex;align-items:center;justify-content:center;gap:0.4em;}

/* --- Custom Dropdown Search --- */
.search-container{width:400px;margin:0 auto;z-index:100;}
.search-input{width:100%;padding:12px 15px;font-size:16px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;background:white
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>') no-repeat right 15px center;}

#teamSearch{background:#009467;color:#fff;border:none;}
#teamSearch::placeholder{color:#fff;opacity:1;}

.dropdown-list{position:absolute;top:100%;left:0;right:0;background:white;border-radius:6px;box-shadow:0 0 30px rgba(0, 0, 0, 0.2);max-height:250px;overflow-y:auto;display:none;}
.dropdown-item{padding:0.3em 1em!important;cursor:pointer;border-bottom:1px solid #fff!important;display:flex;justify-content:center;align-items:center;gap:0.6em;background:#f7f7f9!important;display:flex!important;}
.dropdown-item:hover{background:#f8f9fa;color:#d32f2f;}
.dropdown-item span{font-size:1em;width:50%;text-align:right;}
.dropdown-item span.en{font-size:0.9em;font-weight:500;text-align:left;}

/* --- Team Profile Card --- */
.profile-card{padding:1.4em 2em;margin-bottom:2em;backdrop-filter:blur(6px);border:1px solid #009467;background:rgba(255,255,255,0.9);border-radius:0.5em;margin-top:1em;}
.profile-top-label{font-size:1.4em;text-align:center;font-weight:bold;margin:0 auto 0.6em auto;display:flex;align-items:center;}
.profile-top-label:before,.profile-top-label:after{content:'';}

.profile-content{gap:2em;display:flex;align-items:center;justify-content:center;}
.profile-flag-container{flex-shrink:0;width:40%;display:flex;justify-content:end;}
.profile-flag-grp{display:flex;align-items:center;justify-content:center;gap:2em;}
.profile-flag,.flag-fallback{width:140px;height:auto;}
.profile-flag{object-fit:cover;border:1px solid #666!important;border-radius:0.3em;display:block;}
.flag-fallback{background:#e0e0e0;color:#888;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.1);}
.profile-name-col{width:60%;display:flex;flex-direction:column;justify-content:center;}
.team-title{font-size:1.8em!important;font-weight:bold!important;margin:0!important;}
.team-title-en{font-size:1em;margin:0!important;}
/* . {padding-left:2em;gap:0.2em;display:flex;flex-direction:column;color:#222;border-left:1px solid #009467;} */
.info-line span{margin-left:5px;}

.profile-team .table-container{border-radius:0.5em;border:1px solid #009467;overflow:hidden;overflow-y:auto;}
.profile-team .table-container thead{box-shadow:0 0 20px rgba(0,0,0,0.3);}
.profile-team .table-container th{padding:1em 0.3em;font-weight:bold;font-size:1.1em;white-space:nowrap;vertical-align:middle;background:#effffa;}
.profile-team .table-container th:first-child,.profile-team .table-container td:first-child{padding-left:1em;}
.profile-team .table-container th:last-child,.profile-team .table-container td:last-child{padding-right:1em;}
.profile-team .table-container td{padding:0.4em 0.3em;}
.profile-team .table-container tr:first-child td{padding-top:0.6em!important;}
.profile-team .table-container .icon.icon-red-card,.profile-team .table-container .icon.icon-yellow-card{width:13px;border-radius:0.1em;}
.icon,.profile-top-label:before,.profile-top-label:after{width:13px;height:13px;display:inline-block;background-position:center;background-size:100%;background-repeat:no-repeat;}
.icon-soccer{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/soccer-ball-icon.svg?1b);}
button.button .icon-soccer{margin-left:0.4em;}
.icon-whistle{width:20px;background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/whistle-icon.svg);}
.icon-star,.profile-top-label:before,.profile-top-label:after{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/star-icon-green.svg);}
.icon-soccer-boot{width:20px;background-image: url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/shoe-icon.svg?1a);}
.icon-red-card{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/red-card-icon.svg);}
.icon-yellow-card{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/yellow-card-icon.svg?1a);}
.icon-yellow-red-card{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/yellow-red-card-icon.svg);}
.icon-clock{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/clock-icon.svg?1a);}
.profile-team .player-name{font-weight:bold;margin-bottom:0.2em;line-height:1.1;}
.profile-team .player-name.en{font-size:1.1em;}
.profile-team .player-post{color:#666;}
.player-img img{width:60px;height:60px;padding:0.1em;overflow:hidden;border:1px solid #d5d5d5;border-radius:50px;object-fit:cover;filter:brightness(110%) saturate(60%) grayscale(0.4);}
.profile-team .player-img img{width:60px;height:60px;padding:0.1em;overflow:hidden;border:1px solid #d5d5d5;border-radius:50px;object-fit:cover;filter:brightness(110%) saturate(60%) grayscale(0.4);}
.profile-team .section-title{display:flex;align-items:center;}
.profile-team .section-title.header-team:before,.profile-team .section-title.header-team:after{width:23px;height:20px;margin:auto 0.2em;content:'';display:inline-block;background-position:center;background-size:100% auto;background-repeat:no-repeat;background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/shoe-icon.svg?1a);}
.profile-team .section-title:after{transform:rotateY(180deg);}
.profile-info-col{display:grid;gap:0.2em;}
#ui-coach-sub em{display:block;}
#ui-coach-sub .coach-name{color:#000;}
#ui-coach-sub .coach-name,#ui-coach-sub .coach-name span{display:block;align-items:center;}
#ui-coach-sub .coach-name .zh{font-size:1.4em;}
#ui-coach-sub .coach-name .en{font-weight:400;}
.text-center {text-align: center;}

/* --- Detailed Squad Table --- */
.indicator-h-scroll{display:none;width:40px;height:4px;border-radius:50px;margin-bottom:2px;float:right;background:#009467;animation:sliding 2s infinite ease-in-out;}
.table-container{width:100%;max-height:60vh;overflow:auto;border-radius:4px;border:1px solid darkgray;background:white;margin-bottom:30px;}
table{width:100%;line-height:1.2;border-spacing:0;text-align:center;font-size:14px;border-collapse:separate;/* MUST be 'separate' for iOS sticky headers */}
thead{position:sticky;top:0;z-index:20;}
th{background:#fafafa;padding:12px;position:-webkit-sticky;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 #ccc; /* Prevents gap on mobile */
}
td{padding:10px;border-bottom:1px solid #f5f5f5;background:white;}
.text-left{text-align:left;}
.stat-box{background:#fff0f0;color:#d32f2f;padding:2px 6px;border-radius:4px;font-weight:bold;}
.col-player{width:25%;}
td.text-left div{white-space:normal;word-wrap:break-word;}
.players{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:0.8em;align-items:center;}

/* Tooltips */
.global-tooltip{display: none!important;}
th.has-tooltip{cursor:help;text-underline-offset:4px;position:relative;}
th.has-tooltip::after{content:attr(data-tooltip);position:absolute;top:120%;left:50%;transform:translateX(-50%);background:#009467;color:#fff;padding:6px 10px;border-radius:4px;font-size:1em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:999;}
th.has-tooltip:hover::after{opacity:1;}

th.sortable{cursor:pointer;transition:background 0.2s;user-select:none;}
th.sortable:hover{background:#e9ecef;}
.sort-icon{width:8px;height:16px;opacity:0.5;display:inline-block;margin-left:6px;background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/sort-down-icon.svg);background-position:center;background-size:90% auto;background-repeat:no-repeat;}
th.sortable.active-desc{background:#d5f5eb;}
th.sortable.active-desc .sort-icon{background-image:url(https://dss0.zbstatic5.com/assets/interactive/2026/world-cup-2026/imgs/sort-up-icon.svg);}

/* --- Fixtures & Results Grid --- */
.stage-group{margin-bottom:30px;}
.stage-title{text-align:center;font-size:1.2em;font-weight:bold;white-space:nowrap;color:#fc3f30;}
.fixtures-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1em;align-items:flex-start;}
.match-card.finished{border:1px solid #009467;}
.f-top-row{display:flex;justify-content:space-between;align-items:center;}
.f-team-col{display:flex;flex-direction:column;align-items:center;width:30%;gap:5px;}
.f-flag{width:40px;height:25px;object-fit:cover;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);}
.f-team-name{font-size:0.9em;font-weight:bold;text-align:center;color:#000;}
.f-center-col{display:flex;flex-direction:column;align-items:center;width:40%;}
.f-date{color:#555;font-size:0.9em;}
.f-score-time{font-size:22px;font-weight:900;letter-spacing:2px;}
.f-penalty{font-size:11px;color:#666;margin-top:2px;}
.f-events-row{display:flex;justify-content:space-between;font-size:1em;color:#333;padding-top:1em;}
.f-events-home{text-align:left;width:48%;}
.f-events-away{text-align:right;width:48%;}
.f-event-item{margin-bottom:3px;flex-wrap: wrap;}
.f-events-home .f-event-item, .f-events-away .f-event-item{display:flex;gap:7px;align-items:flex-start;font-size:14px;padding-bottom: 7px;}
.f-events-away .f-event-item{justify-content:flex-start;flex-direction:row-reverse;}
.f-event-text{display: flex;gap: 5px;flex: 1;flex-wrap: wrap;}
.f-events-away .f-event-item .f-event-text{display:flex;flex-direction: row-reverse;}

.f-team{font-size:16px;font-weight:bold;width:35%;text-align:center;}
.f-center{width:30%;text-align:center;}
.f-score{font-size:20px;font-weight:900;}
.detail-btn{background:transparent;border:1px solid #ccc;color:#000;padding:4px;font-size:14px!important;border-radius:4px;cursor:pointer;width:100%;transition:background 0.2s;}
.detail-btn:hover{background:#f0f0f0;}
.match-events{display:none;background:#fafafa;border-radius:4px;padding:10px 15px;font-size:15px;margin-top:15px;border-top:1px solid #eee;width:100%;box-sizing:border-box;}
.event-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #e0e0e0;}
.event-row:last-child{border-bottom:none;}
.event-left{width:45%;text-align:right;}
.event-right{width:45%;text-align:left;}
.event-center{width:10%;text-align:center;font-weight:bold;color:#888;}
.news-btn{display:inline-block;background-color:#e90034!important;color:white!important;padding:8px 24px;border-radius:20px;text-decoration:none;font-size:14px;font-weight:bold;transition:background 0.3s;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);}
.news-btn:hover{background-color:white;color:#e90034;}

/* TOP SCORER */
.widget-card {background: #fff;border: 1px solid #009467;max-width: 400px;width:100%;margin: 0 auto;}
.widget-card .header {background: #009467;color: #fff;padding: 10px 15px;font-size: 16px;font-weight: bold;}

/* --- Scrollable List Container --- */
.list-container {max-height: 400px;overflow-y: auto;padding: 0;}
.list-container::-webkit-scrollbar {width: 4px;}
.list-container::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 4px;}

/* --- Scorer Item Design --- */
.scorer-item {display: flex;justify-content: space-between;align-items: center;padding: 6px 15px;}
.scorer-item:nth-child(odd) {background: #f2f2f2;}
.scorer-details {display: flex;flex-direction: row;justify-content:center;align-items:center;gap:10px;line-height: 1.3;}
.scorer-details .player-img img {width: 50px;height: auto;}
.scorer-name {font-size: 15px;color: #000;}
.scorer-team {font-size: 15px;color: #000;}
.scorer-goals {font-size: 15px;color: #000;}
.loading-text {text-align: center;padding: 20px;color: #888;}

@media (min-width:768px) and  (max-width:1000px){
body::before{background-position:50% center;}
#landing .logo img{width:100%;}
.sub{padding:0 0 0 2em!important;}
#MicrositeNav{width:90%;}
#MicrositeNav ul{display:block;width:100%;text-align:center;padding:0.1em 1em;}
#MicrositeNav li{text-wrap:initial;display:inline-block;vertical-align:middle;}
.xiaozao-container{width:80%;margin:1em auto;padding:0;}
}

@media (max-width:767px){
body::before{background-attachment:initial;background-size:100%;left:-50%;background-position:center 0;}
.header-title{font-size:1.4em;}
.ball{width:80px;height:80px;}
#landing .logo img,.logo img{width:70%;}
#MicrositeNav{width:100%;border-radius:0;}
#MicrositeNav ul{display:block;width:100%;text-align:center;}
#MicrositeNav li{text-wrap:initial;display:inline-block;}
#MicrositeNav a{padding:0.2em 0.4em 0.3em 0.4em;font-size:0.9em;}
.header{flex-direction:column;padding:0;gap:0;}
#landing .header{padding:1em 0;}
.header .logo{padding-bottom:1em;}
.instagram{display:block;}
.instagram img{height:16px;margin-right:5px;}
.sub{width:100%;font-size:0.95em;}
.cd-num{font-size:1.4em;}
.headline-container{margin:1em auto!important;width:90%;}
.countdown-wrapper{flex-direction:column;justify-content:center;gap:0;margin:0 auto 0.6em auto;}
.countdown-label{font-size:1.1em;padding-bottom:0.6em;}

#hp-swiper{margin:0 auto;}
#hp-swiper .swiper-slide{width:100%!important;}

.stage-header,.stage-title{font-size:1.1em;}
.stage-border{width:25%;}

.data-vis iframe{height:600px;}
.standings-container{width:90%;margin:2em auto 1em auto;padding:0 1em;}
.fixtures-grid{flex-direction:column-reverse;gap:1em;}
.fixture-card{width:100%;}
.hp-score-area,.f-time{font:1.1em;}
.carousel-container{padding:0 0.5em;}
.xiaozao-container{margin:1em auto;padding:0;width:90%;}

.card-body{align-items:center;gap:10px;}
.center-info{width:40%;padding:0;}
.f-time{font-size:1.1em;}
#fixtures-container .f-time{margin-top:0;}
.badge{font-size:0.9em!important;}
.match-card{padding:1em;}
.detail-panel.active{grid-template-columns:1fr;gap:10px;}

.team-container{width:90%;padding:0 1em 1em 1em;margin-top:0;}
.team-container .search-container{top:86%;width:100%;box-shadow:0 0 30px rgba(0, 0, 0, 0.15);border:1em solid rgba(255, 255, 255, 0.8);border-radius:0.3em;}
.dropdown-list{bottom:100%;top:auto;}
.profile-flag-grp{gap:1em;margin-bottom:1em;justify-content:start;}
#profileCard{padding:1em;margin:-4em auto 1em auto;}
.profile-flag-container{width:auto;}
.profile-flag{width:70px;}
.team-title{font-size:1.4em!important;}
.team-flag{width:40px;}

.profile-content{gap:1em;flex-direction:column;text-align:start;display:block;}
.profile-name-col{padding-right:0;}
.profile-info-col{border-left:none;border-top:1px solid #ddd;padding-left:0;padding-top:1em;align-items:start;}
.profile-team{margin-bottom:8em;}
.profile-team small{text-align:left;}
#detailed-squad-container{font-size:0.9em;}
.profile-team th:nth-child(2){z-index:1000;}
.profile-team th:nth-child(2),.profile-team td:nth-child(2){position:sticky;left:0;}
.profile-team .table-container{max-height:none;overflow:hidden;overflow-x:auto;}
.profile-team .table-container th{font-size:1em;}
.profile-team .table-container th,.profile-team .table-container td{padding-left:0.8em;padding-right:0.8em;}
.profile-team .player-name.en,.profile-team .player-post{font-size:0.9em;}
.profile-team .player-img img{width:40px;height:40px;}
.profile-top-label{font-size:1.2em;}
.indicator-h-scroll{display:block;}

.widget-card{width:90%;}

.sub-row div {flex-direction: column;}
}

.blink-smooth{animation:blink_smooth 2s infinite;}
@keyframes blink_smooth{
0%{opacity:1;}
20%{opacity:1;}
50%{opacity:0;}
80%{opacity:1;}
100%{opacity:1;}
}


#Visualisation{padding:1em 2em 2em 2em;margin-bottom:2em;backdrop-filter:blur(6px);border:1px solid #27cf59;background:rgba(208, 242, 218, 0.4);border-radius:0.5em;}
#Visualisation .wrapper{padding:1em;background:#fff;border-radius:0.5em;}
.flourish-credit{display:none;}
.display-panel{gap:2em;margin-bottom:1em;display:flex;align-items:start;}
.flourish-chart iframe{height:100%;}
  
@media (max-width:767px){
#Visualisation{width:90%;margin:auto;padding:0;border:none;border-radius:0;backdrop-filter:none;background:none;}
#Visualisation .wrapper{padding:0;background:none;border-radius:0;}
.display-panel{display:block;margin-bottom:0.4em;}
}