:root{--ink:#142131;--muted:#748196;--line:#e4e9ef;--paper:#f5f7fa;--card:#fff;--navy:#0d1420;--blue:#3e70ed;--cyan:#48c4c3;--lime:#c9ed71;--warm:#ffb45b;--radius:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.shell{width:min(1180px,calc(100% - 48px));margin:0 auto}.site-header{height:76px;background:rgba(245,247,250,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.header-inner{height:100%;display:flex;align-items:center;gap:48px}.brand{display:flex;align-items:center;gap:10px;min-width:150px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--navy);color:var(--lime);font-size:11px;font-weight:900;letter-spacing:.5px;border-radius:10px}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:18px;letter-spacing:1px}.brand-copy small{margin-top:5px;color:#8b96a5;font-size:8px;font-weight:800;letter-spacing:1.5px}.desktop-nav{display:flex;align-items:center;gap:30px;height:100%;flex:1}.nav-link{position:relative;color:#8190a2;font-size:13px;font-weight:700}.nav-link:hover,.nav-link.active{color:var(--ink)}.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-29px;height:2px;background:var(--blue)}.admin-link{border:1px solid var(--line);border-radius:8px;padding:9px 13px;color:#526174;font-size:12px;font-weight:700}.admin-link span{color:var(--blue);margin-left:5px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:470px;margin-top:28px;overflow:hidden;background:var(--navy);border-radius:20px;color:#fff}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:54px 58px}.eyebrow{margin:0 0 12px;color:#6681a4;font-size:10px;font-weight:900;letter-spacing:1.9px}.hero .eyebrow{color:var(--cyan)}.hero .eyebrow span{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:7px}.hero h1{margin:0;font-size:clamp(38px,4.3vw,60px);line-height:1.06;letter-spacing:-1px;font-weight:800}.hero h1 em{font-style:normal;color:var(--lime)}.hero-intro{max-width:390px;margin:22px 0 28px;color:#aab6c6;font-size:15px;line-height:1.8}.hero-search{display:flex;align-items:center;width:min(420px,100%);height:52px;background:#fff;border-radius:10px;padding:5px 5px 5px 15px}.search-symbol{color:#7e8b9b;font-size:25px;line-height:1;transform:rotate(-15deg)}.hero-search input{flex:1;min-width:0;border:0;outline:0;padding:0 10px;color:var(--ink);font-size:14px}.hero-search button,.inline-search button{border:0;border-radius:7px;height:42px;padding:0 18px;background:var(--blue);color:#fff;font-size:13px;font-weight:800}.hero-suggestions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;color:#8695a8;font-size:11px}.hero-suggestions button{border:0;padding:0;background:transparent;color:#c1cbd8;font-size:11px}.hero-suggestions button:hover{color:var(--lime)}.hero-visual{position:relative;overflow:hidden;background:#162337;min-height:470px}.hero-grid-lines{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:58px 58px;transform:skewY(-14deg) scale(1.3);transform-origin:center}.hero-art{position:absolute;background-position:center;background-size:cover;filter:saturate(.9)}.hero-art-back{width:64%;height:68%;right:4%;top:10%;background-image:url("https://media.9game.cn/ugame/2026-01/2618399_be8279.png");opacity:.33;transform:rotate(7deg)}.hero-art-front{width:54%;height:74%;right:17%;top:16%;background-image:url("https://media.9game.cn/ugame/2026-01/2618590_f10032.png");clip-path:polygon(10% 0,100% 0,88% 100%,0 92%);box-shadow:0 25px 50px #000}.hero-note{position:absolute;left:34px;bottom:34px;display:flex;align-items:center;gap:10px;padding:10px 13px;background:rgba(13,20,32,.82);border:1px solid rgba(255,255,255,.12);border-radius:9px}.hero-note strong,.hero-note small{display:block}.hero-note strong{font-size:11px}.hero-note small{margin-top:2px;color:#93a2b5;font-size:10px}.pulse-dot,.signal-live{display:block;width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 5px rgba(201,237,113,.12)}.hero-index{position:absolute;right:32px;bottom:34px;color:#fff;font-size:12px;font-weight:800;letter-spacing:1px}.hero-index span{color:#73859e;margin:0 7px}.signal-row{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;gap:20px;padding:25px 0 10px}.signal{display:flex;align-items:baseline;gap:8px;border-right:1px solid var(--line)}.signal strong{font-size:25px;letter-spacing:-.5px}.signal span{color:var(--muted);font-size:12px}.signal-note{border:0;align-items:center;justify-content:flex-end}.signal-note .signal-live{background:var(--cyan);margin-right:5px}.section-block,.category-section{padding-top:70px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.section-head h2{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.5px}.section-subtitle{margin:7px 0 0;color:var(--muted);font-size:13px}.text-link{color:var(--blue);font-size:12px;font-weight:800}.text-link span{font-size:17px;margin-left:3px}.compact-head{margin-bottom:18px}.category-scroll{display:flex;gap:8px;overflow-x:auto;padding:2px 0 16px;scrollbar-width:none}.category-scroll::-webkit-scrollbar{display:none}.category-item{flex:0 0 auto;padding:8px 15px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:#6e7b8e;font-size:12px;font-weight:700}.category-item.active,.category-item:hover{border-color:var(--ink);background:var(--ink);color:#fff}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.result-state{margin:0 0 12px;color:#9aa5b4;font-size:11px}.game-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card{display:flex;min-width:0;gap:13px;padding:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.game-card:hover{transform:translateY(-3px);border-color:#cbd5e2;box-shadow:0 12px 24px rgba(28,45,66,.08)}.game-icon{flex:0 0 72px;width:72px;height:72px;border-radius:11px;object-fit:cover;background:#e9eef4}.game-info{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center}.game-name{overflow:hidden;margin-bottom:6px;color:#1d2a3b;font-size:15px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.game-tags{display:flex;gap:5px;overflow:hidden;margin-bottom:8px}.game-tags .tag{padding:3px 7px;border-radius:4px;background:#eef3ff;color:#4c70cb;font-size:10px;white-space:nowrap}.game-meta{display:flex;justify-content:space-between;gap:8px;color:#9aa5b4;font-size:10px}.game-meta .rating{color:#de9640;font-weight:800}.side-panel{align-self:start;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}.side-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}.side-head .eyebrow{margin-bottom:4px}.side-head h3{margin:0;font-size:20px}.side-badge{padding:4px 6px;border-radius:4px;background:#e8f7f0;color:#25865f;font-size:9px;font-weight:900;letter-spacing:1px}.ranking-list{display:flex;flex-direction:column}.ranking-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #edf0f4;cursor:pointer}.ranking-item:last-child{border-bottom:0}.rank-number{width:22px;color:#9aa5b4;font-size:12px;font-weight:900;text-align:center}.rank-number.top3{color:var(--blue)}.ranking-item .game-icon{width:42px;height:42px;flex-basis:42px;border-radius:8px}.ranking-item .game-name{margin:0;font-size:12px}.ranking-item .game-tags,.ranking-item .game-meta span:not(.rating){display:none}.ranking-item .game-meta{margin-top:4px}.side-more{display:block;margin-top:10px;color:var(--blue);font-size:11px;font-weight:800}.empty-data{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#9aa5b4;font-size:12px}.empty-data strong{color:#667487;font-size:15px}.load-more{text-align:center;margin:22px 0}.outline-button{border:1px solid #ccd6e3;border-radius:8px;padding:10px 20px;background:#fff;color:#58708d;font-size:12px;font-weight:800}.outline-button:hover{border-color:var(--blue);color:var(--blue)}.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.category-card{padding:18px 10px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer}.category-card:hover{border-color:var(--blue);transform:translateY(-2px)}.category-icon{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;border-radius:9px;background:var(--navy);color:var(--lime);font-size:15px}.category-name{font-size:12px;font-weight:800}.category-count{margin-top:3px;color:#9aa5b4;font-size:10px}.search-section{padding:70px 0}.search-section-inner{padding:42px 48px;background:#eaf0f6;border-radius:16px}.search-section h2{margin:0;font-size:26px}.search-section p:not(.eyebrow){color:var(--muted);font-size:13px}.inline-search{display:flex;gap:8px;max-width:530px;margin-top:20px}.inline-search input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #d8e0e9;border-radius:8px;background:#fff;outline:0;font-size:13px}.inline-search input:focus{border-color:var(--blue)}.search-section .game-list{margin-top:20px}.empty-state{padding:28px 0;color:#7a889a;font-size:13px}.site-footer{margin-top:12px;border-top:1px solid var(--line);background:#fff}.footer-inner{display:flex;align-items:center;gap:28px;min-height:92px}.footer-brand{min-width:130px}.footer-inner p{flex:1;color:#98a3b1;font-size:11px}.footer-links{display:flex;gap:17px;color:#7c8999;font-size:11px}.mobile-nav{display:none}
@media(max-width:980px){.hero-copy{padding:42px}.hero h1{font-size:45px}.game-layout{grid-template-columns:1fr}.side-panel{margin-top:4px}.ranking-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:20px}.side-more{margin-top:14px}.category-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){body{padding-bottom:66px}.shell{width:calc(100% - 28px)}.site-header{height:64px}.header-inner{gap:0;justify-content:space-between}.desktop-nav{display:none}.brand{min-width:0}.brand-mark{width:32px;height:32px}.brand-copy strong{font-size:16px}.admin-link{padding:7px 10px;font-size:11px}.hero{display:block;margin-top:14px;border-radius:16px}.hero-copy{padding:32px 24px 30px}.hero h1{font-size:39px}.hero-intro{margin:16px 0 22px;font-size:13px}.hero-search{height:48px}.hero-search button{height:38px}.hero-visual{min-height:250px}.hero-art-back{width:58%;height:78%;right:3%;top:5%}.hero-art-front{width:52%;height:82%;right:20%;top:8%}.hero-note{left:18px;bottom:18px}.hero-index{right:18px;bottom:22px}.signal-row{grid-template-columns:repeat(3,1fr);gap:0;padding:20px 0 2px}.signal{display:block;text-align:left;border-right:0}.signal strong{display:block;font-size:20px}.signal span{font-size:10px}.signal-note{display:none}.section-block,.category-section{padding-top:45px}.section-head{align-items:flex-start;margin-bottom:16px}.section-head h2{font-size:23px}.text-link{padding-top:12px;font-size:11px}.navigation-grid{grid-template-columns:1fr!important}.game-list{grid-template-columns:1fr}.game-card{padding:12px}.side-panel{padding:16px}.ranking-list{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(3,1fr);gap:8px}.category-card{padding:14px 5px}.search-section{padding:45px 0}.search-section-inner{padding:28px 20px}.search-section h2{font-size:22px}.inline-search{gap:6px}.inline-search button{padding:0 13px}.footer-inner{display:block;padding:22px 0 80px}.footer-inner p{margin:14px 0}.mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;z-index:40;height:62px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px);justify-content:space-around}.mobile-nav-item{display:flex;align-items:center;justify-content:center;gap:3px;flex-direction:column;width:25%;color:#9aa5b4}.mobile-nav-item span{font-size:19px;line-height:1}.mobile-nav-item small{font-size:10px;font-weight:700}.mobile-nav-item.active{color:var(--blue)}}