/* Pixel artwork, quieter frames and a clearer reading hierarchy. */
:root{--paper:#101e2b;--ink:#edf2e9;--line:#2b4350;--muted:#9db3ba}
body{background-image:radial-gradient(ellipse at 80% 0,#23483e33,transparent 55%);background-size:100% 100%;background-repeat:no-repeat;background-attachment:fixed}
.sidebar{width:218px;background:#142531;border-right:1px solid #2c414b;padding:32px 20px}.brand{font-size:24px}.brand-mark{width:42px;height:44px;line-height:44px;background:#dccc9b;box-shadow:3px 3px #070f17}.nav-label{margin-top:48px;color:#819da6}.nav-button{font-size:12px;padding:12px 13px;margin:5px 0;color:#91aab5}.nav-button.active{background:#223d43;color:#cde8cf;box-shadow:inset 3px 0 #93cbb5}.nav-button em{background:#345452;color:#c6e1ca}.sidebar-bottom{border-top:1px solid #2a424a;padding-top:15px}.sidebar-bottom .little-star{font-size:28px}.sidebar-bottom p{color:#8199a4}.version{font:9px Consolas,monospace;letter-spacing:1px}
main{margin-left:218px;padding:0 40px;max-width:1740px}.topbar{height:90px}.breadcrumb{color:#9eb4ba}.search{width:310px;background:#192e3a;border:1px solid #314b55;padding:9px 14px}.search input{font-size:12px}.avatar{background:#a6c8ad;color:#233e3a}
.hero{min-height:375px;border:1px solid #405e60;box-shadow:0 12px 45px #05101845;background:#18333b;isolation:isolate}.hero:after{content:'';position:absolute;inset:0;pointer-events:none;border:7px solid #ffffff03;z-index:3}.hero-copy{padding:38px 38px 35px;max-width:535px}.hero h1{font-size:clamp(32px,3.6vw,50px);font-weight:700;line-height:1.28;letter-spacing:1px;margin:19px 0}.hero h1 span{color:#a8d4bc}.hero p{font-size:12px;line-height:1.9;color:#adbec0;max-width:340px}.eyebrow{font:9px Consolas,monospace;letter-spacing:2.1px;color:#9bbcae}.hero canvas{width:53%;right:-1%;mask-image:linear-gradient(90deg,transparent,#000 25%);opacity:.85}.hero-note{right:24px;bottom:24px;background:#18333bd9;border:1px solid #658778;box-shadow:3px 3px #0b1c26}.hero-note strong{color:#d8e8c3}.hero-note span{color:#b2d9b9}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-actions button{min-height:44px;padding:11px 18px;font-size:12px}.primary{background:#dbcc9e;border:1px solid #f4e6b8;color:#223a3a;box-shadow:3px 3px #0d2029}.hero-secondary{background:#25464c;color:#c9e6d2;border:1px solid #688b7e;box-shadow:3px 3px #0d2029}.hero-foot{gap:20px;margin-top:22px;font-size:10px;color:#97b2b4}.hero-foot b{color:#d8e3c9;font:14px Consolas,monospace;margin-right:5px}.hero-foot span{border-right:1px solid #52716c;padding-right:18px}.hero-foot span:last-child{border:0}
.collection{padding-top:34px}.section-title h2{font-size:23px;margin-top:8px;letter-spacing:1px}.muted{color:#77999b;font-size:9px}.section-title h2 span{background:#223a45;border:0;color:#afd2c0;font:12px Consolas,monospace;padding:4px 9px}.random{padding:10px 15px;border:1px solid #3e5861;color:#c2d5c9;font-size:11px}.random:disabled{opacity:.4;cursor:default}.collection-tools{display:flex;align-items:center;gap:15px;margin:24px 0 21px;justify-content:space-between}.chips{margin:0;gap:4px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap;padding-bottom:5px;justify-content:flex-start}.chip{flex-shrink:0;font-size:11px;padding:9px 13px;color:#9bb0b6;min-height:38px}.chip.active{background:#284b49;color:#dbefcf;box-shadow:inset 0 -2px #a2ceaf}.sort-label{white-space:nowrap;color:#8fa7af;font-size:11px;display:flex;gap:8px;align-items:center}.sort-label select{background:#192e39;color:#cedcd3;border:1px solid #3b525e;font:11px 'Microsoft YaHei',sans-serif;padding:8px;max-width:130px}
.game-grid{gap:22px;grid-template-columns:repeat(4,minmax(0,1fr))}.game-card{background:#1b303c;border:1px solid #344e59;box-shadow:0 4px 0 #0a1722;transition:transform .18s,border-color .18s,box-shadow .18s}.game-card:hover{border-color:#99c4b4;transform:translateY(-4px);box-shadow:0 8px 22px #040e1955}.game-cover{height:auto;aspect-ratio:8/5;border-bottom:1px solid #344e59;background:#223646}.card-body{padding:16px}.card-heading h3{font-size:15px;letter-spacing:.3px;font-weight:600;color:#e5eddf}.card-play{width:29px;height:29px;color:#b9e1c9;background:#305751;box-shadow:none}.card-meta{font-size:10px;color:#91b7b5;margin-top:10px;gap:8px;flex-wrap:wrap}.card-meta .dot{display:none}.player-tag{color:#d4dcbc;background:#334846;padding:2px 6px;font-size:9px}.player-tag.duo{background:#324b60;color:#b5d1e4}.card-description{font-size:11px;line-height:1.8;color:#8da6b0;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}.card-number{font-size:9px;color:#e2e8d4;left:10px;top:10px;background:#10232dd9;border:1px solid #506872;padding:3px 6px;letter-spacing:.7px}.favorite{right:10px;top:10px;width:30px;height:30px;line-height:25px;border:1px solid #557078;background:#172c39df;color:#c5dbcc}.favorite.saved{color:#f2b8a2;background:#493c43}.badge{bottom:auto;top:47px;left:10px;background:#d6c895;border:0;color:#29443f;font-size:9px;padding:2px 6px}.grid-footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:33px 0 5px}.grid-footer small{color:#86a1aa;font:11px Consolas,monospace}.load-more{padding:12px 40px;background:#264a47;border:1px solid #5e8176;color:#d0e4cb;font-size:12px;box-shadow:3px 3px #0a1a24}#empty{padding:55px 20px;border:1px dashed #425761;background:#192d3788;margin-top:20px}footer{font-size:10px;color:#75949f;padding:27px 0}.footer-brand{color:#aac4b5}.play-shell>canvas{box-shadow:0 0 0 1px #4c696b,0 20px 80px #0007}#play-view{background:#101e2b}.game-guide{border-left:1px solid #34505b;padding-left:30px;width:290px}.game-guide p{color:#9eb6bb}.game-guide h2{color:#dae6d1}.guide-tip{padding:14px 0;border-top:1px solid #34505b;border-bottom:1px solid #34505b}.game-guide .outline{border-width:1px;color:#b7d6bc}
@media(min-width:1500px){main{padding:0 60px}.hero{min-height:400px}.game-grid{gap:26px}.card-body{padding:18px}}
@media(max-width:1180px){main{padding:0 26px}.sidebar{width:190px;padding:28px 14px}main{margin-left:190px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.collection-tools{align-items:flex-start}.sort-label>span{display:none}.hero-copy{padding:32px;max-width:475px}.hero h1{font-size:38px}}
@media(max-width:820px){.sidebar{display:none}main{margin-left:0;padding:0 22px}.topbar{height:75px}.hero{min-height:360px}.hero canvas{right:-14%;width:65%;opacity:.65}.hero-copy{max-width:440px}.game-guide{display:none}.game-grid{gap:16px}.collection-tools{flex-direction:column;gap:10px}.chips{width:100%}.sort-label{align-self:flex-end}.card-body{padding:13px}.card-heading h3{font-size:14px}}
@media(max-width:560px){main{padding:0 16px}.topbar{height:72px}.breadcrumb{display:none}.search{width:100%;margin:0;min-height:42px}.search input{font-size:12px}.hero{min-height:340px}.hero-copy{padding:28px 23px;max-width:100%;width:100%}.hero h1{font-size:35px;line-height:1.22}.hero p{font-size:11px;max-width:290px;text-shadow:0 1px #153039}.hero canvas{right:-33%;width:105%;opacity:.32;mask-image:linear-gradient(90deg,transparent,#000 60%)}.hero .eyebrow{font-size:8px;letter-spacing:1.2px}.hero-actions{gap:9px}.hero-actions button{font-size:11px;padding:10px 13px}.hero-foot{font-size:9px;margin-top:20px;gap:13px}.hero-foot span{padding-right:13px}.hero-foot b{font-size:12px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.section-title h2{font-size:20px}.section-title .random{font-size:10px;padding:8px}.card-body{padding:12px 10px}.card-heading h3{font-size:13px}.card-play{width:25px;height:25px;line-height:23px}.card-meta{gap:5px;font-size:9px;min-height:20px}.card-description{font-size:10px;line-height:1.8;min-height:36px;margin-top:7px}.collection{padding-top:29px}.collection-tools{margin:18px 0}.chip{padding:8px 12px}.game-cover{aspect-ratio:1.45}.card-number{font-size:8px;left:7px;top:7px}.favorite{width:27px;height:27px;right:7px;top:7px}.badge{top:39px;left:7px;font-size:8px}.sort-label select{font-size:10px}.play-shell>canvas{box-shadow:none}footer{gap:9px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.game-card{transition:none}.game-card:hover{transform:none}}
.chips{flex-wrap:nowrap;min-width:0}.sort-label{flex-shrink:0}
