:root { --ink:#eaf3e8; --muted:#abc0b1; --leaf:#b5de57; --teal:#05b5d9; --night:#071712; --panel:#102a20; --line:rgba(224,255,216,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 75% -10%, #174a37 0, transparent 33%), var(--night); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { width:min(1180px,calc(100% - 40px)); height:96px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; min-width:0; }.brand-logo { width:244px; height:66px; object-fit:contain; object-position:left; }
nav { display:flex; gap:28px; font-size:14px; color:#d6e8db; } nav a { opacity:.78; transition:.2s; } nav a:hover { opacity:1; color:var(--leaf); }
.hero { width:min(1180px,calc(100% - 40px)); min-height:590px; margin:10px auto 72px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:linear-gradient(122deg,rgba(18,49,37,.96),rgba(7,23,18,.7)); }
.hero-copy { padding:78px 32px 66px 66px; z-index:1; }.eyebrow,.card-kicker { margin:0 0 16px; color:var(--leaf); font-size:11px; font-weight:800; letter-spacing:.16em; }.hero h1,.section-heading h2,.download-intro h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(42px,5vw,70px); line-height:1.04; letter-spacing:-.055em; }.hero h1 em { color:var(--leaf); font-style:normal; }.hero-text { max-width:490px; margin:26px 0; color:var(--muted); line-height:1.8; font-size:16px; }.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }.button { min-height:50px; padding:0 21px; border-radius:10px; display:inline-flex; align-items:center; gap:15px; font-weight:800; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--leaf); color:#152715; }.button-ghost { border:1px solid rgba(225,255,221,.28); }.hero-points { display:flex; flex-wrap:wrap; gap:23px; padding:0; margin:53px 0 0; list-style:none; color:#d7e7d8; font-size:13px; }.hero-points li::before { content:"●"; color:var(--teal); margin-right:8px; }
.hero-art { position:relative; min-height:440px; overflow:hidden; background:linear-gradient(160deg,#e7f1db,#94cbb8); }.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,23,18,.42),transparent 45%),linear-gradient(0deg,rgba(7,23,18,.34),transparent 48%); }.hero-art img { position:absolute; width:100%; height:100%; object-fit:contain; object-position:65% center; mix-blend-mode:multiply; }.art-glow { position:absolute; width:380px; height:380px; border-radius:50%; right:-60px; bottom:-80px; background:rgba(181,222,87,.44); filter:blur(30px); }.hero-badge { position:absolute; z-index:2; bottom:34px; right:33px; border:1px solid rgba(255,255,255,.5); border-radius:50%; width:92px; height:92px; display:grid; place-content:center; text-align:center; color:#173326; background:var(--leaf); font-size:10px; line-height:1.2; transform:rotate(12deg); }.hero-badge strong { font-size:12px; }
.experience-section,.download-section { width:min(1180px,calc(100% - 40px)); margin:0 auto 110px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:32px; }.section-heading h2,.download-intro h2 { font-size:44px; }.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.game-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:rgba(17,43,32,.55); }.card-image { aspect-ratio:1.59; overflow:hidden; }.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }.game-card:hover .card-image img { transform:scale(1.04); }.card-body { min-height:210px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; }.card-body h3 { margin:0 0 12px; font-size:25px; }.card-body p:not(.card-kicker) { margin:0; color:var(--muted); line-height:1.7; font-size:14px; }.text-link { margin-top:20px; color:var(--leaf); font-weight:800; }.text-link span { padding-left:8px; }
.download-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; padding:55px 60px; border-radius:26px; background:linear-gradient(125deg,#133b2b,#0c2119); border:1px solid var(--line); }.download-intro p:not(.eyebrow) { color:var(--muted); line-height:1.8; }.download-note { font-size:12px; } code { color:var(--leaf); }.download-list { display:grid; gap:11px; align-content:center; }.download-item { padding:18px 19px; display:flex; gap:15px; align-items:center; border:1px solid rgba(235,255,228,.14); border-radius:14px; background:rgba(255,255,255,.04); transition:.2s; }.download-item:hover { border-color:rgba(181,222,87,.7); background:rgba(181,222,87,.1); transform:translateX(4px); }.disk-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:11px; background:#efffe6; color:#113325; font-weight:900; font-size:12px; }.download-item strong,.download-item small { display:block; }.download-item small { margin-top:4px; color:var(--muted); font-size:12px; }.download-arrow { margin-left:auto; font-size:21px; color:var(--leaf); }.empty-state { color:var(--muted); } footer { width:min(1180px,calc(100% - 40px)); margin:auto; padding:0 0 38px; display:flex; align-items:center; gap:9px; color:#8da799; font-size:12px; } footer img { width:25px; height:25px; object-fit:contain; }
@media (max-width:780px) { .site-header { height:72px; width:min(100% - 28px,1180px); }.brand-logo { width:153px; height:55px; } nav { gap:13px; font-size:12px; }.hero { width:min(100% - 28px,1180px); grid-template-columns:1fr; margin:4px auto 55px; }.hero-copy { padding:48px 28px 39px; }.hero-art { min-height:330px; }.hero h1 { font-size:49px; }.hero-points { margin-top:32px; gap:11px; }.experience-section,.download-section { width:min(100% - 28px,1180px); }.section-heading h2,.download-intro h2 { font-size:36px; }.game-grid,.download-section { grid-template-columns:1fr; }.download-section { padding:38px 27px; gap:20px; margin-bottom:70px; }.card-body { min-height:190px; }.hero-art img { width:100%; object-position:66% center; } }