@charset "utf-8";
:root{
 --ygks-navy:#07162e;
 --ygks-blue:#0759f3;
 --ygks-cyan:#38d7ff;
 --ygks-page:#f3f6fb;
 --ygks-ink:#14213a;
 --ygks-muted:#748198;
 --ygks-line:#e4eaf2;
}
html,body{height:100%;overflow:hidden;background:var(--ygks-page);}
.category-shell{height:calc(100dvh - 56px - 68px - env(safe-area-inset-bottom));display:grid;grid-template-columns:104px minmax(0,1fr);margin:0;background:var(--ygks-page);}
.category-rail{overflow:auto;padding:12px 8px;background:#eaf0f8;border-right:1px solid #dce4ef;scrollbar-width:none;}
.category-rail::-webkit-scrollbar,.category-content::-webkit-scrollbar{display:none;}
.category-tab{position:relative;width:100%;min-height:56px;margin:0 0 7px;padding:8px;border:0;border-radius:14px;background:transparent;color:#657288;font:700 14px/1.35 "PingFang SC","Microsoft YaHei",sans-serif;text-align:center;transition:color .18s ease,background-color .18s ease,transform .18s ease;}
.category-tab:before{content:"";position:absolute;left:-8px;top:15px;width:3px;height:26px;border-radius:0 3px 3px 0;background:transparent;}
.category-tab.is-active{background:#fff;color:var(--ygks-navy);box-shadow:0 8px 20px rgba(19,55,103,.08);}
.category-tab.is-active:before{background:var(--ygks-blue);}
.category-tab:active{transform:scale(.98);}
.category-content{min-width:0;overflow:auto;padding:18px 14px 28px;scrollbar-width:none;}
.category-panel[hidden]{display:none;}
.category-intro{margin:0 0 18px;padding:0 2px;text-align:left;}
.category-intro span{display:block;margin:0 0 5px;color:var(--ygks-blue);font-size:9px;font-weight:900;letter-spacing:.18em;}
.category-intro h1{margin:0;color:var(--ygks-navy);font-size:24px;line-height:1.2;font-weight:900;letter-spacing:-.04em;}
.category-intro p{margin:7px 0 0;color:var(--ygks-muted);font-size:12px;line-height:1.55;}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;margin:0;}
.category-card{min-width:0;display:flex;flex-direction:column;align-items:center;margin:0;color:var(--ygks-ink);text-align:center;}
.ygks-game-avatar{display:block;width:min(100%,78px);height:auto;margin:0;filter:drop-shadow(0 10px 14px rgba(8,34,73,.15));transition:transform .18s ease,filter .18s ease;}
.category-card strong{width:100%;margin:9px 0 0;overflow:hidden;color:#1d2940;font-size:13px;line-height:18px;font-weight:750;text-overflow:ellipsis;white-space:nowrap;}
.category-card small{margin:2px 0 0;color:#9aa5b5;font-size:9px;line-height:14px;}
.category-card:active .ygks-game-avatar{transform:scale(.96);filter:drop-shadow(0 5px 8px rgba(8,34,73,.16));}
.category-card-all .ygks-game-avatar{outline:2px solid rgba(7,89,243,.14);outline-offset:3px;border-radius:24px;}
@media (min-width:600px){.category-shell{grid-template-columns:130px minmax(0,1fr)}.category-content{padding:24px}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.ygks-game-avatar{width:86px}.category-intro h1{font-size:28px}}
@media (max-width:359px){.category-shell{grid-template-columns:88px minmax(0,1fr)}.category-rail{padding-left:6px;padding-right:6px}.category-tab{font-size:13px}.category-content{padding-left:10px;padding-right:10px}.category-grid{gap:16px 6px}.ygks-game-avatar{width:64px}.category-card strong{font-size:11px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Real game artwork and readable two-line names. */
.category-shell{grid-template-columns:88px minmax(0,1fr)}
.category-content{padding-left:12px;padding-right:12px}
.category-card strong{white-space:normal;min-height:36px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.category-card img.ygks-game-avatar{border-radius:22%;filter:none;object-fit:contain}
@media(min-width:600px){.category-shell{grid-template-columns:130px minmax(0,1fr)}}

.category-tab{white-space:nowrap;padding:8px 2px;font-size:13px}