@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--bg:#0c0b14;--bg2:#100f19;--panel:#151221;--panel2:#1a1728;--line:#29243c;--muted:#8e929c;--text:#f7f7f8;--red:#a934dc;--red2:#c355f2;--gold:#f8c86a;--green:#32d49b;--main-font:'Noto Sans Thai',Tahoma,Arial,sans-serif;--display-font:'Kanit','Noto Sans Thai',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:400 13px/1.55 var(--main-font);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c566ee;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
::selection{background:#79239e;color:#fff}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#3a3151;border-radius:12px}::-webkit-scrollbar-track{background:#14121f}

/* Masthead */
.site-header{height:66px;position:sticky;top:0;z-index:80;background:#0e0c15;border-bottom:1px solid #252035;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.header-inner{max-width:1600px;height:100%;display:flex;align-items:center;gap:27px;margin:auto;padding:0 27px}
.brand{display:flex;align-items:center;gap:5px;flex:none;min-width:207px;white-space:nowrap}
.brand-mark{display:flex;align-items:center;justify-content:center;width:34px;height:35px;position:relative}
.brand-mark .ball{font-size:23px;position:relative;z-index:2;filter:grayscale(1) brightness(1.5)}
.brand-mark i{position:absolute;right:-2px;top:1px;width:25px;height:5px;background:#ab36de;transform:rotate(-25deg);box-shadow:0 6px 0 #ab36de;clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
.brand-name{display:flex;align-items:baseline;gap:3px;font:italic 800 27px/.9 var(--display-font);letter-spacing:-1.4px}
.brand-name strong{color:#a828df}.brand-name em{color:#f5f5f6;font-style:italic}.brand-name small{font-size:11px;color:#c559f3;letter-spacing:0;align-self:flex-start;padding-top:2px}
.primary-nav{align-self:stretch;display:flex;align-items:stretch;gap:18px;white-space:nowrap;flex:1;min-width:0}
.nav-link,.nav-more{position:relative;color:#d9d9dd;display:inline-flex;align-items:center;align-self:stretch;border:0;background:none;padding:0;font-weight:700;font-size:12px;transition:color .2s}
.nav-link:hover,.nav-more:hover{color:#fff}.nav-link.active{color:#fff}.nav-link.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--red)}
.nav-more{gap:5px}.nav-more span{font-size:16px;font-weight:400;margin-top:-5px}
.header-actions{display:flex;align-items:center;gap:17px;flex:none;margin-left:auto}
.chat-trigger,.lang-picker,.profile-button,.icon-button{background:none;color:#fff;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
.chat-trigger{flex-direction:column;gap:0;line-height:1.1}.chat-ring{width:24px;height:24px;display:grid;place-items:center;border:2px solid #f2f2f2;border-radius:50%;color:#b94ae8;font-size:18px;box-shadow:inset 0 0 0 3px #1c1727}.chat-trigger small{font-size:8px;letter-spacing:.15px;font-weight:800;margin-top:2px}
.lang-picker{height:31px;padding:3px 6px 3px 4px;gap:5px;border:1px solid #2c263f;border-radius:50px}.lang-picker svg,.profile-chevron{width:13px;height:13px}.thai-flag{width:22px;height:22px;display:block;border-radius:50%;overflow:hidden;background:linear-gradient(to bottom,#a831dc 0 16%,white 16% 32%,#213b87 32% 68%,white 68% 84%,#a831dc 84% 100%);border:1px solid #ddd}
.profile-button{gap:8px}.avatar-placeholder{width:30px;height:30px;background:#d9dadd;border-radius:50%;color:#8c8e94;display:grid;place-items:center;overflow:hidden}.avatar-placeholder svg{width:23px;height:23px;stroke-width:3;margin-top:8px}.mobile-menu{display:none}

/* App columns */
.app-layout{max-width:1600px;min-height:calc(100vh - 66px);display:grid;grid-template-columns:84px 208px minmax(0,1fr);margin:0 auto}
.sports-rail{border-right:1px solid #29243a;background:#0e0d16;min-height:calc(100vh - 66px);padding:22px 0 16px;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:66px;max-height:calc(100vh - 66px)}
.rail-items{display:grid;gap:18px}.sport-choice{background:none;border:0;width:100%;color:#c9cbd0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;transition:color .2s}.sport-choice:hover,.sport-choice.selected{color:#fff}
.sport-icon{position:relative;width:39px;height:39px;background:#f6f6f7;color:#302a48;border-radius:14px;display:grid;place-items:center;font-size:21px;box-shadow:0 3px 10px #0004;filter:grayscale(.3)}.sport-choice.selected .sport-icon{background:linear-gradient(150deg,#c04ff1,#871db5);color:white;filter:none}.sport-icon b{position:absolute;right:-8px;top:-7px;border-radius:50px;background:#b837f0;color:#fff;font:700 9px var(--display-font);padding:2px 4px;border:2px solid #0b0b14}
.rail-bottom{display:flex;flex-direction:column;align-items:center;gap:5px;color:#666b73;font:700 8px/1.3 Arial,sans-serif;letter-spacing:1.2px;text-align:center}.rail-accent{height:22px;width:2px;background:#5e2277}
.league-sidebar{border-right:1px solid #2d2740;background:#0f0d17;position:sticky;top:66px;max-height:calc(100vh - 66px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#4a3e64 #100f19}
.league-search{height:39px;display:flex;align-items:center;gap:9px;padding:0 10px;border-bottom:1px solid #2a243d;color:#a1a5ad}.league-search svg,.search-matches svg{width:16px;height:16px;flex:none}.league-search input,.search-matches input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#f6f6f6;font-size:11px}.league-search input::placeholder,.search-matches input::placeholder{color:#717781}
.sidebar-group h3{margin:0;height:37px;display:flex;align-items:center;justify-content:space-between;background:#2c253c;color:#f1f1f3;padding:0 10px;font-size:11px;font-weight:800}.sidebar-group h3 span{color:#8b8e95;font-size:9px;font-family:Arial,sans-serif;letter-spacing:.6px}
.league-list{padding:4px 0 5px}.league-item{width:100%;height:36px;border:0;background:transparent;color:#dedfe2;display:flex;align-items:center;gap:9px;text-align:left;padding:0 9px;font-size:11px;font-weight:700;white-space:nowrap;transition:background .15s}.league-item:hover,.league-item.selected{background:#201b2f}.league-item.selected{box-shadow:inset 3px 0 0 var(--red)}.league-item span:nth-child(2){overflow:hidden;text-overflow:ellipsis;flex:1}
.league-glyph{height:24px;width:24px;border-radius:6px;display:grid;place-items:center;flex:none;font:bold 17px Arial,sans-serif}.lg-all{color:#fff;background:linear-gradient(145deg,#8221ab,#ba4be9)}.lg-premier{color:white;background:#4d2269}.lg-laliga{color:#c04ff1;background:#fff;font-size:20px}.lg-seriea{color:#147de1;background:#182638}.lg-bundesliga{color:#fff;background:#9928ca}.lg-thai{color:white;background:#1b487e}
.league-count{font:700 10px Arial,sans-serif;color:#80848c}.league-item.selected .league-count{color:#cf77f5}
.teams-group{margin-top:8px}.team-list{padding:4px 0 7px}.team-item{height:32px;width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;color:#d7d8dc;font-size:10.5px;font-weight:700;text-align:left;padding:0 9px;white-space:nowrap}.team-item:hover{background:#201b2f}.mini-crest{width:22px;height:25px;flex:none;color:#fff;background:linear-gradient(125deg,var(--team),#1118);border:1px solid #ffffff38;clip-path:polygon(8% 0,92% 0,100% 65%,50% 100%,0 65%);display:grid;place-items:center;font:900 9px Arial,sans-serif}.team-star{margin-left:auto;color:#bf53ed;font:20px Arial,sans-serif}
.secondary-search{border-top:1px solid #2e2740;margin-top:2px}.stream-group h3{height:35px}.stream-group h3.small-heading{height:32px;font-size:10px;margin-top:4px}.streamer{display:flex;align-items:center;gap:8px;padding:6px 10px;color:#e5e6e9;font-size:10.5px;font-weight:700}.streamer b{margin-left:auto;color:#bd44f1;font-size:19px;font-family:Arial;font-weight:400}.stream-avatar{width:23px;height:23px;border:1px solid #ddd;border-radius:50%;display:grid;place-items:center;flex:none;font:bold 12px Arial}.sa-one{background:linear-gradient(135deg,#fff,#79289c);color:#131018}.sa-two{background:linear-gradient(135deg,#f3c9a5,#772b97)}.sa-three{background:linear-gradient(135deg,#bfe7fc,#24476e)}.sa-four{background:linear-gradient(135deg,#cb8ae7,#211b37)}.onair{margin-left:auto;color:#c04cf1;font:700 9px Arial}.onair i{display:inline-block;width:6px;height:6px;background:#bd53eb;border-radius:50%;margin-right:2px;box-shadow:0 0 9px #bd53eb}.sidebar-bottom{padding:20px 10px;font:900 10px var(--display-font);color:#777}.sidebar-bottom span{font-weight:500;font-size:9px}

/* Main content and featured player */
.main-content{min-width:0;padding:18px 25px 20px;overflow:hidden}
.intro-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;font-size:11px}.crumbs{color:#b8bac0;display:flex;align-items:center;gap:9px}.crumbs span:last-child{color:#767b84}.crumb-dot{height:7px;width:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #a435d333}.slash{color:#473d66}.prototype-pill{font-size:10px;white-space:nowrap;border:1px solid #604046;color:#d3a6e6;background:#30113e;border-radius:20px;padding:5px 10px}.prototype-pill span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b441e5;vertical-align:middle;margin-right:4px}
.section-topline{display:flex;justify-content:space-between;align-items:flex-end;gap:15px}.eyebrow{font:700 9px Arial,sans-serif;letter-spacing:1.65px;color:#bf55ed}.section-topline h1,.section-head h2{font:600 22px/1.25 var(--display-font);margin:4px 0 0;letter-spacing:.1px}.section-topline h1 span{color:var(--red);font-size:19px}.today-label{text-align:right;font-size:11px;font-weight:700;color:#d5d6da}.today-label small{display:block;color:#80858e;font-size:10px;font-weight:400;margin-top:2px}
.feature-stage{height:320px;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;margin-top:9px;margin-bottom:12px}
.stage-glow{position:absolute;inset:26px 13%;border-radius:50%;background:radial-gradient(ellipse,#5815752b 0,transparent 65%);z-index:-2}
.ghost-card{position:absolute;width:34%;height:210px;top:41px;background:linear-gradient(145deg,#2f113b,#1a0922);border:1px solid #592071;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:end;padding-bottom:25px;color:#8f5661;opacity:.85}.ghost-card small{font:700 10px Arial;letter-spacing:2px}.ghost-card strong{font:800 25px var(--display-font)}.ghost-left{left:4%;transform:perspective(900px) rotateY(9deg)}.ghost-right{right:4%;transform:perspective(900px) rotateY(-9deg)}
.featured-player{width:min(64%,630px);min-width:440px;height:291px;background:#1f1a29;border:1px solid #392f4c;border-radius:5px;overflow:hidden;z-index:2;box-shadow:0 22px 60px #0009,0 0 0 10px #0c0b132b;position:relative}
.player-topbar{height:36px;background:#14101b;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;color:#f4f4f5;font-size:11px;font-weight:700}.player-topbar>div{display:flex;min-width:0;align-items:center;gap:7px}.player-topbar #featuredTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.red-tag{background:#812ea5;border-radius:3px;padding:4px 6px;font-size:10px;white-space:nowrap}.tiny-signal{white-space:nowrap;color:#9b9da4;font:700 9px Arial;letter-spacing:.7px}.tiny-signal i{height:5px;width:5px;display:inline-block;background:#b245e0;border-radius:50%;vertical-align:middle}
.player-surface{height:calc(100% - 36px);background:radial-gradient(ellipse at 50% 10%,#2f263e,#231d30 60%);display:flex;align-items:center;justify-content:center;position:relative}.player-surface:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#0e0b1530),repeating-linear-gradient(90deg,transparent 0 28px,#ffffff03 29px 30px);pointer-events:none}
.player-shimmer{position:absolute;inset:-60% 0;background:linear-gradient(120deg,transparent 41%,#ffffff05 50%,transparent 59%);transform:translateX(-30%)}
.player-lock{text-align:center;position:relative;z-index:2;padding:6px}.lock-icon{width:31px;height:31px;stroke:var(--red2);stroke-width:1.6;margin-bottom:7px}.player-lock h2{font-size:17px;font-weight:800;margin:3px 0;color:#fafafa}.player-lock p{font-size:11px;color:#afb0b6;margin:6px 0 16px;line-height:1.6}.primary-button{border:0;background:linear-gradient(135deg,#c457f2,#972bc5);box-shadow:0 7px 20px #a035ce50;color:#fff;padding:10px 18px;border-radius:8px;font:700 12px var(--main-font);transition:transform .18s,box-shadow .18s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 9px 25px #a035ce7a}.primary-button span{font-size:20px;line-height:0;vertical-align:-1px;margin-left:6px}
.player-watermark{position:absolute;bottom:10px;right:12px;color:#a9a9ac;font:italic 800 13px var(--display-font);opacity:.24}.player-watermark span{color:#c04cf1}.player-watermark small{font-size:6px}
.stage-arrow{position:absolute;top:45%;transform:translateY(-50%);width:35px;height:41px;display:grid;place-items:center;color:#e3e4e5;background:#221f32;border:1px solid #2e2841;border-radius:4px;font-size:12px;z-index:5;transition:background .2s}.stage-arrow:hover{background:#802ea3}.arrow-left{left:0}.arrow-right{right:0}
.carousel-dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:6px}.carousel-dot{background:#565962;width:5px;height:5px;border:0;border-radius:10px;padding:0;transition:width .2s,background .2s}.carousel-dot.active{width:21px;background:var(--red)}

/* Promotional strip */
.promo-banner{height:81px;border-radius:5px;overflow:hidden;position:relative;display:flex;align-items:center;gap:18px;padding:0 23px;background:radial-gradient(circle at 62% 0,#b88d2b50 0,transparent 32%),linear-gradient(115deg,#040408 0 33%,#282512 54%,#060508 88%);border:1px solid #231d26;margin:14px 0 27px}
.promo-banner:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 37px,#ffd66109 38px 40px);pointer-events:none}.promo-trophy{font-size:48px;filter:sepia(.4) saturate(1.1);line-height:1}.promo-head{font-family:var(--display-font);line-height:1.05;transform:skewX(-6deg);white-space:nowrap}.promo-head small{color:#b5a36c;letter-spacing:1px;font:700 8px Arial}.promo-head strong{display:block;color:#fff;font-style:italic;font-size:20px;text-shadow:1px 2px 4px #000}.promo-head em{color:#ffd75e;font-style:italic}.promo-lines{width:1px;height:47px;background:linear-gradient(transparent,#f4d35a,transparent);margin:0 6px 0 auto}.promo-copy{display:flex;flex-direction:column;gap:1px;white-space:nowrap}.promo-copy span{color:#e6b959;letter-spacing:1.4px;font:700 9px Arial}.promo-copy strong{font:600 17px var(--display-font);color:#fff}.promo-copy small{color:#b8b5a9;font-size:10px}.promo-brand{display:flex;flex-direction:column;align-items:end;font:italic 900 20px var(--display-font);white-space:nowrap;line-height:1}.promo-brand span{color:#bf4bf1}.promo-brand small{font:700 8px Arial;letter-spacing:2px;color:#eec968;margin-top:5px}

/* Match schedule */
.matches-section{scroll-margin-top:83px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px}.section-head-copy h2{display:flex;align-items:center;gap:11px;margin-top:4px}.live-dot{width:8px;height:8px;background:#bb46ed;display:inline-block;border-radius:50%;box-shadow:0 0 0 4px #ae3fdd40,0 0 13px #ae3fdd}.section-head-copy p{color:#c0c2c7;font-size:11px;margin:5px 0 0}.section-head-copy p span{color:#83868f}
.search-matches{height:34px;width:220px;display:flex;align-items:center;gap:8px;background:#161321;border:1px solid #2f2844;border-radius:7px;color:#a5a9b1;padding:0 10px;flex:none}
.matches-toolbar{margin:20px 0 15px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #2a243d}.status-tabs{display:flex;align-items:center;gap:20px}.status-tab{display:inline-flex;align-items:center;gap:6px;position:relative;background:none;color:#9c9fa7;border:0;border-bottom:2px solid transparent;padding:0 0 13px;white-space:nowrap;font-size:11px;font-weight:700}.status-tab:hover,.status-tab.active{color:#fff}.status-tab.active{border-color:var(--red)}.status-tab span:not(.pulsing-dot){background:#2d2640;color:#e1e2e4;border-radius:12px;padding:0 5px;font:700 9px Arial}.pulsing-dot{height:6px;width:6px;background:#bb4cea;border-radius:50%;box-shadow:0 0 0 3px #812ea540}.result-counter{color:#8b8f98;font-size:10px;white-space:nowrap;padding-bottom:11px}
.match-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:180px}
.match-card{background:#1a1728;border:1px solid #2a243d;border-radius:5px;min-width:0;min-height:226px;overflow:hidden;position:relative;box-shadow:0 4px 12px #0002;transition:transform .2s,border-color .2s,box-shadow .2s}
.match-card:hover{transform:translateY(-4px);border-color:#8730ac;box-shadow:0 10px 24px #0005}.match-card:focus-within{border-color:#b253db}.card-click-area{display:block;width:100%;height:100%;padding:0;border:0;color:inherit;text-align:left;background:none;cursor:pointer}
.card-art{height:142px;background:radial-gradient(ellipse at 50% 16%,#5e2278 0,#3c164c 54%,#20101f 100%);position:relative;padding:8px 9px 0;overflow:hidden}.card-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(120deg,transparent 0 45px,#ffffff03 47px 48px),linear-gradient(180deg,transparent 72%,#110f1baa 100%)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;position:relative;z-index:2;min-height:30px}.card-top .fixture-tag{background:#a633d7;color:#fff;border-radius:3px;padding:3px 6px;font-size:9px;font-weight:800;line-height:1.3;white-space:nowrap}.fixture-tag.upcoming{background:#3c2b31;color:#ffd58d}.fixture-tag.finished{background:#3a3252;color:#d0d2d8}.fixture-meta{text-align:right;color:#eeeef0;font-size:9px;line-height:1.3;min-width:0}.fixture-meta b,.fixture-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fixture-meta small{font:700 8px Arial;color:#bcb5b7;margin-top:2px}
.versus-line{display:grid;grid-template-columns:minmax(0,1fr) 37px minmax(0,1fr);align-items:center;gap:0;position:relative;z-index:2;margin-top:0}.club-side{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;min-width:0}.club-badge{--club:#9d3ac8;width:42px;height:49px;color:#fff;display:grid;place-items:center;position:relative;filter:drop-shadow(0 3px 3px #0008);clip-path:polygon(13% 0,87% 0,100% 10%,92% 74%,50% 100%,8% 74%,0 10%);background:linear-gradient(140deg,#ffffffa1,var(--club) 20%,#100f1dc9 93%);border:0;font:900 15px Arial,sans-serif;letter-spacing:-1px}.club-badge:after{content:'';position:absolute;inset:4px;clip-path:inherit;border:1px solid #ffffff80;background:linear-gradient(130deg,#ffffff10,#0006);z-index:-1}.club-badge span{position:relative;text-shadow:0 1px 3px #000;line-height:1;max-width:100%;overflow:hidden;text-align:center}.club-name{font-size:9px;color:#f2f2f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center}.vs-mark{font:italic 900 27px var(--display-font);text-align:center;color:#ffd46e;text-shadow:2px 2px 0 #9335bb,-2px -1px 0 #561f6e,0 0 15px #ffd76d90;letter-spacing:-2px;transform:skewX(-8deg)}
.card-foot-info{position:absolute;left:8px;right:8px;bottom:6px;z-index:3;display:flex;align-items:center;justify-content:space-between;font:700 9px Arial;color:#dedee1}.card-foot-info .feed-type{display:flex;align-items:center;gap:4px}.feed-symbol{font-size:11px;color:#c864f3}.watchers{color:#ccd0d5;font-size:8px;letter-spacing:.5px}
.card-bottom{padding:9px 9px 11px;position:relative;background:#191626;min-height:82px}.card-bottom .match-league{font-size:9px;color:#be54eb;display:flex;align-items:center;gap:5px;font-weight:700}.match-league .little-ball{font-size:10px}.match-name{font-size:11px;color:#f3f4f5;font-weight:700;line-height:1.5;margin:3px 0 0;height:34px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.card-bottom .card-cta{color:#989da7;font-size:10px;display:inline-flex;gap:5px;align-items:center;margin-top:5px}.card-cta span{color:#b04adc;font-size:15px;line-height:0}
.favorite-button{position:absolute;right:6px;top:80px;z-index:8;color:#bdc0c6;border:0;background:#141120bd;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font:18px Arial}.favorite-button:hover,.favorite-button.is-favorite{color:#ffcc66}.favorite-button.is-favorite{background:#40311c}
.empty-state{border:1px dashed #3f3558;background:#14121f;text-align:center;border-radius:10px;padding:46px 20px}.empty-state[hidden]{display:none}.empty-state div{font-size:42px}.empty-state h3{font:600 20px var(--display-font);margin:5px 0}.empty-state p{color:#9da0a7;margin:3px 0 18px}

/* Lower content */
.coming-panel{display:flex;align-items:center;gap:20px;margin-top:30px;padding:24px 25px;background:radial-gradient(circle at right,#321240 0,transparent 55%),#161323;border:1px solid #30233e;border-radius:9px;scroll-margin-top:86px}.coming-icon{height:55px;width:55px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#6d278b,#3f1750);border-radius:12px;color:#fff;font-size:19px}.coming-panel h2{font:600 18px var(--display-font);margin:2px 0}.coming-panel p{margin:2px 0 0;color:#9a9da6;font-size:11px}.coming-badge{margin-left:auto;border:1px solid #72515a;color:#d9b3ea;font:700 9px Arial;letter-spacing:1.1px;border-radius:5px;padding:8px 9px;white-space:nowrap}.site-footer{border-top:1px solid #27223a;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:700 9px Arial;letter-spacing:.5px;color:#777c86;margin-top:35px;padding:22px 0 8px}

/* Modal and notifications */
.match-modal[hidden]{display:none}.match-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#050609d9;backdrop-filter:blur(6px)}.modal-dialog{position:relative;z-index:2;background:#161323;border:1px solid #463b62;border-radius:12px;box-shadow:0 24px 90px #000a;width:min(860px,100%);max-height:min(90vh,760px);overflow:auto}.modal-heading{padding:19px 23px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2e2846}.modal-heading h2{font:600 22px var(--display-font);margin:1px 0}.modal-close{border:0;background:#2a243f;color:#fff;border-radius:50%;width:32px;height:32px;font:24px Arial;display:grid;place-items:center}.modal-content{display:grid;grid-template-columns:1.3fr 1fr;gap:23px;padding:23px}.modal-video{min-height:280px;background:radial-gradient(ellipse at top,#2b243d,#0e0c17 72%);border:1px solid #362e4e;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;overflow:hidden}.modal-video-art{position:absolute;font-size:200px;opacity:.03;transform:rotate(-22deg)}.modal-video svg{width:36px;height:36px;color:#bb4eea;margin-bottom:10px}.modal-video strong{font:600 17px var(--display-font);z-index:1}.modal-video p{margin:0;color:#9b9fa6;font-size:11px}.modal-info{min-width:0;display:flex;flex-direction:column}.modal-league{font-size:11px;color:#c569ed;font-weight:800}.modal-teams{display:flex;justify-content:space-between;align-items:center;gap:7px;margin:18px 0}.modal-club{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:11px;font-weight:800}.modal-club .club-badge{width:55px;height:64px;font-size:18px}.modal-vs{font:italic 900 26px var(--display-font);color:#f7ce78}.modal-divider{border-top:1px solid #302946;margin-bottom:14px}.modal-meta{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px;color:#b8bbc2}.modal-meta strong{color:#fff}.modal-note{display:flex;gap:7px;color:#bcb0b1;background:#321c34;border-radius:6px;padding:10px;font-size:10px;line-height:1.7;margin:10px 0 17px}.modal-note span{color:#d588f6;font-size:15px}.modal-action{width:100%;margin-top:auto}
.toast{position:fixed;bottom:27px;left:50%;transform:translate(-50%,30px);z-index:150;pointer-events:none;opacity:0;background:#29243e;color:#fff;border:1px solid #585b62;border-left:3px solid var(--red);box-shadow:0 12px 40px #0007;padding:12px 20px;border-radius:6px;font-size:12px;max-width:calc(100vw - 30px);transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%,0)}.drawer-scrim[hidden]{display:none}

@media(max-width:1390px){.header-inner{gap:23px;padding:0 22px}.brand{min-width:190px}.brand-name{font-size:25px}.primary-nav{gap:14px}.nav-link,.nav-more{font-size:11px}.app-layout{grid-template-columns:77px 201px minmax(0,1fr)}.main-content{padding:18px 19px}.promo-brand{font-size:18px}.promo-copy strong{font-size:15px}}
@media(max-width:1160px){.header-inner{gap:18px}.primary-nav{gap:12px}.primary-nav .nav-link:nth-child(5){display:none}.header-actions{gap:10px}.app-layout{grid-template-columns:68px 185px minmax(0,1fr)}.league-item{font-size:10px}.main-content{padding:17px 17px}.featured-player{width:68%;min-width:385px}.promo-banner{gap:13px;padding:0 17px}.promo-trophy{font-size:42px}.promo-head strong{font-size:17px}.promo-copy strong{font-size:14px}.promo-brand{font-size:16px}.match-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-art{height:145px}}
@media(max-width:980px){.mobile-menu{display:inline-flex}.mobile-menu svg{width:23px;height:23px}.header-inner{gap:15px}.brand{min-width:unset}.primary-nav{gap:11px}.primary-nav .nav-link:nth-child(4),.primary-nav .nav-link:nth-child(5),.primary-nav .nav-more{display:none}.app-layout{grid-template-columns:70px minmax(0,1fr)}.league-sidebar{position:fixed;z-index:85;left:70px;top:66px;bottom:0;width:230px;max-height:none;box-shadow:15px 10px 40px #0009;transform:translateX(-115%);transition:transform .22s;visibility:hidden}.league-sidebar.open{transform:translateX(0);visibility:visible}.drawer-scrim:not([hidden]){position:fixed;inset:66px 0 0 0;background:#0009;z-index:83}.main-content{padding:17px 22px}}
@media(max-width:750px){.site-header{height:60px}.header-inner{padding:0 15px}.brand-name{font-size:23px}.brand-mark{width:28px}.brand-mark .ball{font-size:21px}.primary-nav{display:none}.header-actions{gap:10px}.chat-trigger{display:none}.app-layout{min-height:calc(100vh - 60px);grid-template-columns:56px minmax(0,1fr)}.sports-rail{top:60px;max-height:calc(100vh - 60px);min-height:calc(100vh - 60px)}.sport-icon{width:35px;height:35px;font-size:19px}.sport-choice{font-size:9px}.league-sidebar{left:56px;top:60px}.drawer-scrim:not([hidden]){inset:60px 0 0}.main-content{padding:15px}.intro-line{margin-bottom:12px}.prototype-pill{font-size:9px}.section-topline h1,.section-head h2{font-size:20px}.feature-stage{height:286px}.featured-player{min-width:0;width:83%;height:262px}.ghost-card{height:180px;top:35px}.stage-arrow{width:28px;height:35px}.player-lock h2{font-size:15px}.player-lock p{font-size:10px}.player-lock .lock-icon{width:27px;height:27px}.promo-copy{display:none}.promo-lines{margin-left:auto}.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{align-items:start;flex-direction:column}.search-matches{width:100%}.coming-panel{padding:17px}.coming-badge{display:none}.modal-content{grid-template-columns:1fr}.modal-video{min-height:210px}.modal-info{gap:0}}
@media(max-width:515px){.header-inner{gap:10px;padding:0 10px}.lang-picker{height:28px}.profile-chevron{display:none}.profile-button .avatar-placeholder{width:27px;height:27px}.brand-name{font-size:20px}.brand-name small{font-size:9px}.header-actions{gap:8px}.app-layout{grid-template-columns:0 minmax(0,1fr)}.sports-rail{display:none}.league-sidebar{left:0;top:60px;width:min(83vw,290px)}.main-content{padding:14px 12px}.intro-line{flex-direction:column;align-items:flex-start;gap:8px}.section-topline h1{font-size:20px}.today-label{font-size:10px}.today-label small{font-size:9px}.feature-stage{height:265px}.featured-player{width:calc(100% - 52px);height:245px}.player-topbar{height:33px}.player-topbar #featuredTitle{font-size:9px}.player-surface{height:calc(100% - 33px)}.player-lock h2{font-size:14px}.player-lock p{margin:4px 0 12px}.player-lock .lock-icon{margin-bottom:2px}.stage-arrow{width:25px;height:34px;font-size:10px}.ghost-card{width:40%;height:150px;top:42px}.promo-banner{height:75px;padding:0 13px;margin:8px 0 23px}.promo-trophy{font-size:39px}.promo-head strong{font-size:16px}.promo-brand{font-size:14px}.promo-brand small{font-size:7px}.promo-lines{margin-left:auto;margin-right:0}.section-head-copy h2{font-size:21px}.matches-toolbar{overflow:auto;scrollbar-width:none;gap:10px;margin-top:16px}.status-tabs{gap:13px}.status-tab{font-size:10px}.result-counter{display:none}.match-grid{gap:9px}.match-card{min-height:214px}.card-art{height:132px;padding:7px 6px 0}.fixture-meta{font-size:8px}.fixture-meta small{font-size:7px}.card-top .fixture-tag{font-size:8px;padding:3px 4px}.versus-line{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)}.club-badge{width:34px;height:41px;font-size:12px}.club-name{font-size:8px}.vs-mark{font-size:22px}.card-bottom{padding:7px 7px 10px}.match-name{font-size:10px}.favorite-button{top:75px}.coming-panel{gap:12px}.coming-icon{width:44px;height:44px}.coming-panel h2{font-size:16px}.coming-panel p{font-size:10px}.site-footer{font-size:8px;gap:6px}.modal-heading{padding:15px}.modal-heading h2{font-size:19px}.modal-content{padding:14px;gap:14px}.match-modal{padding:10px}}
@media(max-width:370px){.promo-brand{display:none}.promo-lines{display:none}.section-topline{align-items:start;flex-direction:column}.today-label{text-align:left}.feature-stage{height:254px}.match-grid{grid-template-columns:1fr}.match-card{min-height:220px}.card-art{height:143px}.club-badge{width:43px;height:50px;font-size:16px}.club-name{font-size:10px}.versus-line{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)}.vs-mark{font-size:26px}.card-bottom{min-height:83px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Date navigation and administrator shortcut */
.date-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}.date-selector{display:flex;align-items:center;gap:6px;color:#a6aab3;font-size:10px;font-weight:700}.date-selector>span{margin-right:7px}.date-selector button{height:30px;min-width:30px;border:1px solid #383051;border-radius:5px;background:#221d33;color:#fff;font-size:17px;line-height:1}.date-selector button:hover{background:#682585}.date-selector #dateToday{font:700 10px var(--main-font);padding:0 10px}.date-selector input{height:30px;min-width:125px;border:1px solid #383051;border-radius:5px;background:#1e1a2e;color:#eee;padding:0 8px;font:700 11px var(--main-font)}.admin-shortcut{color:#d7afe9;background:#391449;border:1px solid #65414b;border-radius:6px;padding:7px 10px;font-size:10px;font-weight:800}.admin-shortcut:hover{background:#561f6d}.date-toolbar+.matches-toolbar{margin-top:12px}
.club-badge.uploaded{background:transparent;clip-path:none;filter:drop-shadow(0 3px 4px #0008)}.club-badge.uploaded:after{display:none}.club-badge.uploaded img{width:100%;height:100%;object-fit:contain;display:block}.modal-club .club-badge.uploaded{width:60px;height:64px}
@media(max-width:515px){.date-toolbar{align-items:flex-start}.date-selector{width:100%;flex-wrap:wrap}.date-selector>span{width:100%;margin:0 0 3px}.admin-shortcut{margin-top:1px}}

/* TANGLIVE brand and black-plum art direction. */
.brand{min-width:195px;gap:0}.site-wordmark{width:188px;height:61px;object-fit:contain;object-position:left center;display:block}
.player-watermark{display:grid;place-items:center;opacity:.37}.player-watermark img{width:114px;height:40px;object-fit:contain}
.promo-brand{justify-content:center;gap:0}.promo-brand img{width:130px;height:48px;object-fit:contain}.promo-brand small{margin-top:-8px;letter-spacing:2px;color:#bfa4dc}
.promo-banner{background:radial-gradient(circle at 70% -20%,#52215a72 0%,transparent 47%),linear-gradient(110deg,#08070d 0%,#180d20 39%,#32143b 72%,#09070c 100%);border-color:#483050}
.promo-banner:after{background:repeating-linear-gradient(115deg,transparent 0 37px,#c589ee0b 38px 40px)}.promo-banner .promo-head em{color:#d99eff}.promo-banner .promo-head small,.promo-banner .promo-copy span{color:#cd9df1}.promo-banner .promo-lines{background:linear-gradient(transparent,#b576e7,transparent)}
/* The language flag remains the Thai flag, independent of theme hues. */
.thai-flag{background:linear-gradient(to bottom,#d92336 0 16%,white 16% 32%,#213b87 32% 68%,white 68% 84%,#d92336 84% 100%)}
@media(max-width:1390px){.brand{min-width:180px}.site-wordmark{width:175px}}@media(max-width:980px){.brand{min-width:0}.site-wordmark{width:160px}}@media(max-width:515px){.site-wordmark{width:142px;height:54px}.promo-brand img{width:104px;height:41px}.player-watermark img{width:95px;height:34px}}