@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap');
:root{--bg:#0B1220;--side:#080E18;--card:#152238;--card2:#1b2c45;--gold:#C68865;--pale:#DBA98D;--silver:#F2F4F7;--muted:#A9B5C6;--line:#2A3A50}
:root[data-theme=blue]{--gold:#38BDF8;--pale:#9ADFFF}
body,button,input,select,.en,.asset-number,.image-guide,.category-guide,.hero-guide,.footer-logo-guide{font-family:'IBM Plex Sans Thai',sans-serif!important}
body{color:var(--silver)}body:before{display:none}.sidebar,.topbar,.footer,.mobile-nav{background:var(--side);backdrop-filter:none}.sidebar{border-color:var(--line)}
.button{background:var(--gold);color:var(--bg);border:1px solid var(--gold);box-shadow:none;min-height:44px;font-size:14px;font-weight:500}.button.secondary{background:var(--card);color:var(--silver);border-color:var(--line)}
.nav-link{color:var(--muted);font-size:14px}.nav-link.active{background:var(--card);border-color:var(--line);color:var(--gold);box-shadow:inset 3px 0 var(--gold)}.nav-link:hover{color:var(--silver);background:var(--card)}
.hero,.hero.has-image{background:linear-gradient(120deg,var(--card),var(--bg));border-color:var(--line);border-radius:12px}.hero:before,.hero.has-image:after,.hero-art{display:none!important}.hero-copy{width:100%;max-width:620px}.hero h1{background:none;-webkit-text-fill-color:var(--silver);color:var(--silver);font-weight:600}.hero p{color:var(--muted);font-size:16px}.hero-guide{color:var(--muted);font-size:11px}
.panel,.article-card,.extra-card,.gallery-card,.hub-game,.hub-category{background:var(--card);border-color:var(--line);box-shadow:none;border-radius:12px}.placeholder-art,.tone-1,.tone-2,.tone-3{background:var(--card2)!important}.placeholder-art:before,.placeholder-art:after,.orbital{display:none!important}.placeholder-art .brand-icon{opacity:.2;filter:grayscale(1)}.asset-number{color:var(--muted)}.asset-label{color:var(--muted)}
.hero-guide,.image-guide,.category-guide{color:var(--muted)}.image-guide{background:var(--bg);border-color:var(--line)}.image-guide strong{color:var(--muted);font-size:11px}.image-guide>span{font-size:11px}.promo-image-link{display:block}.promo-image-link:focus-visible{outline-offset:-3px}.promo-caption{background:linear-gradient(transparent,var(--bg))}.promo-caption p,.article-body p,.extra-copy p,.footer p,.page-intro p,.detail-body,.footer-contact-placeholder{color:var(--muted)}.promo-caption h3,.article-body h3,.section-label h2,.page-intro h1,.footer h2,.hub-game h3{color:var(--silver)}.text-link,.article-bottom,.back-link{color:var(--gold)}
.home-games-teaser{background:var(--card)}.home-games-teaser:before,.home-games-teaser:after{display:none}.home-games-teaser p{color:var(--muted)}.home-games-teaser h2{color:var(--silver)}
.control,.hub-all{background:var(--card2);border-color:var(--line);color:var(--silver);min-width:44px;min-height:44px}.dot.active{background:var(--gold)}.mobile-nav a{color:var(--muted)}.mobile-nav a.active{color:var(--gold)}.noticebar{background:var(--card);border-color:var(--line);color:var(--muted)}.notice-label{color:var(--gold)}.notice-toggle{color:var(--silver);background:var(--card2);min-width:44px;min-height:44px}.breadcrumb,.breadcrumb b{color:var(--muted)}.footer-menu a,.footer-contact a,.footer-contact span{color:var(--muted);font-size:13px}.footer-bottom{color:var(--muted);font-size:11px}.footer-logo-guide{font-size:11px;color:var(--muted)}
@media(max-width:650px){.hero{min-height:255px}.hero-copy{width:100%;max-width:100%;padding:0}.hero h1{font-size:29px}.hero p{font-size:14px}.button,.top-right>.button.auth-button{font-size:14px;min-height:46px}.section-label h2{font-size:20px}.article-body h3{font-size:16px}.article-body p{font-size:13px}.image-guide strong,.hero-guide,.category-guide,.gallery-card .image-guide strong{font-size:11px}.footer-menu a,.footer-main h2,.footer-contact-placeholder{font-size:13px}.footer .footer-brand p,.footer-bottom{font-size:12px}.mobile-nav a span{font-size:11px}.topbar{background:var(--side)}}
/* Mobile buttons: consistent touch targets and a floating five-item navigation */
@media(max-width:650px){
body{padding-bottom:108px}
.topbar{padding:14px 16px 16px;gap:12px 8px}
.menu-toggle{width:46px;height:46px;border-radius:13px;background:var(--card);border:1px solid var(--line);color:var(--silver)}
.top-right>.button.auth-button{height:48px;min-height:48px;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:500;letter-spacing:0;box-shadow:none}
.top-right>.button.auth-button.secondary{border:1px solid var(--line);background:var(--card);color:var(--silver)}
.top-right>.button.auth-button:not(.secondary){background:var(--gold);border-color:var(--gold);color:var(--bg)}
.auth-button:disabled{opacity:.6;cursor:default}
.button,.hero .button,.home-games-teaser .button,.hub-game .button{min-height:48px;border-radius:12px;padding:13px 20px;font-size:14px;font-weight:500;gap:10px;box-shadow:none}
.button:hover{transform:none}.button:not(:disabled):active{transform:scale(.98)}
.control,.notice-toggle,.hub-all{min-width:44px;min-height:44px;border-radius:11px}
.mobile-nav{inset:auto 12px calc(12px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:430px;margin:0 auto;padding:7px 5px;border:1px solid var(--line);border-radius:21px;background:var(--side);box-shadow:0 8px 24px #0004;backdrop-filter:none;gap:2px}
.mobile-nav a{position:relative;min-width:0;min-height:58px;justify-content:center;gap:5px;border-radius:14px;color:var(--muted);font-size:11px;line-height:1.3;transition:background .15s,color .15s}
.mobile-nav .icon{width:21px;height:21px;stroke-width:1.7}.mobile-nav a span{white-space:nowrap;font-size:11px}
.mobile-nav a.active{background:var(--card);color:var(--gold)}
.mobile-nav a.active:before{content:'';position:absolute;width:16px;height:3px;border-radius:3px;top:4px;left:50%;transform:translateX(-50%);background:var(--gold)}
.mobile-nav a:active{background:var(--card2)}
.mobile-nav a:focus-visible{outline:2px solid var(--pale);outline-offset:1px}
.footer.footer-full{padding-bottom:30px}
}
@media(max-width:360px){.mobile-nav{left:8px;right:8px;width:calc(100% - 16px);padding-inline:3px;gap:0}.mobile-nav a span{font-size:10px}.mobile-nav .icon{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.mobile-nav a,.button{transition:none!important}}
/* Modern mobile controls */
@media(max-width:650px){
.top-right>.button.auth-button,.button,.hero .button,.home-games-teaser .button,.hub-game .button{border-radius:16px;border-width:0;font-weight:600;min-height:50px}
.top-right>.button.auth-button.secondary,.button.secondary{background:var(--card2);color:var(--silver);border:0}
.menu-toggle{border:0;border-radius:50%;background:var(--card2)}
.mobile-nav{border-radius:26px;padding:8px 5px 9px;border-color:color-mix(in srgb,var(--silver) 9%,transparent);background:var(--side);gap:2px;box-shadow:0 12px 32px #0005}
.mobile-nav a{border-radius:0;gap:4px;min-height:61px;color:var(--muted)}
.mobile-nav a.active,.mobile-nav a:active{background:transparent;color:var(--gold)}
.mobile-nav a.active:before{display:none}
.mobile-nav .nav-icon{display:grid;place-items:center;width:42px;height:34px;border-radius:13px;background:transparent;transition:background .15s,color .15s}
.mobile-nav .active .nav-icon{background:var(--gold);color:var(--bg)}
.mobile-nav .icon{width:20px;height:20px;stroke-width:1.8}
.control,.notice-toggle,.hub-all{border:0;background:var(--card2);border-radius:14px}
}
/* Approved 19-esports logo kit: one header asset, responsive JS icon */
.logo picture{display:flex;align-items:center;justify-content:center;line-height:0;max-width:100%}
.logo img,.mobile-logo img,.footer .footer-brand img{object-fit:contain}
@media(min-width:651px) and (max-width:900px){.sidebar .logo:after{display:none}.sidebar .logo img{display:block;width:52px;height:52px}.sidebar .logo{min-height:60px}.sidebar .logo picture{width:52px;height:52px}}