:root { --ink:#24324a; --muted:#718096; --orange:#ff7048; --card:rgba(255,255,255,.94); }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:radial-gradient(circle at 9% 16%,rgba(255,209,83,.22) 0 5px,transparent 6px),radial-gradient(circle at 91% 24%,rgba(104,207,227,.2) 0 7px,transparent 8px),linear-gradient(155deg,#fff8e8,#e9f8ff 58%,#fff1ec); background-attachment:fixed; }
.shell { width:min(760px,100%); margin:auto; padding:calc(18px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
.hero { display:flex; align-items:center; gap:17px; padding:19px; border:1px solid rgba(255,255,255,.88); border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 16px 48px rgba(66,81,104,.13); backdrop-filter:blur(12px); }
.app-icon { width:86px; height:86px; object-fit:cover; border-radius:25px; box-shadow:0 12px 24px rgba(50,70,94,.2); }
.hero-copy { min-width:0; }
.eyebrow { color:#9aa5b5; font:800 9px/1.3 Arial,sans-serif; letter-spacing:.17em; }
.hero h1 { margin:5px 0 4px; font-size:clamp(26px,7vw,38px); letter-spacing:.02em; }
.hero p { margin:0; color:var(--muted); font-size:13px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin:28px 5px 12px; }
.section-heading span { color:var(--muted); font-size:11px; }
.section-heading h2 { margin:3px 0 0; font-size:22px; }
.online { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:99px; background:rgba(255,255,255,.72); }
.online i { width:7px; height:7px; border-radius:50%; background:#47bd83; box-shadow:0 0 0 4px rgba(71,189,131,.12); }
.game-grid { display:grid; gap:13px; }
.game-card { --accent:#ff7048; display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:105px; padding:16px; color:inherit; text-decoration:none; border:1px solid #fff; border-radius:25px; background:var(--card); box-shadow:0 13px 34px rgba(58,77,102,.12); transition:transform .16s; overflow:hidden; position:relative; }
.game-card::after { content:""; position:absolute; right:-28px; top:-38px; width:102px; height:102px; border-radius:50%; background:color-mix(in srgb,var(--accent) 16%,transparent); }
.game-card:active { transform:scale(.985); }
.game-icon { width:68px; height:68px; display:grid; place-items:center; border-radius:21px; background:color-mix(in srgb,var(--accent) 16%,#fff); font-size:37px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent); }
.game-copy { min-width:0; position:relative; z-index:1; }
.game-copy strong { display:block; font-size:18px; margin-bottom:5px; }
.game-copy small { display:block; color:var(--muted); font-size:12px; line-height:1.55; }
.play-button { position:relative; z-index:1; display:grid; place-items:center; width:43px; height:43px; border-radius:15px; color:#fff; background:var(--accent); font-size:18px; font-weight:900; box-shadow:0 8px 16px color-mix(in srgb,var(--accent) 30%,transparent); }
.loading-card { padding:31px; text-align:center; color:var(--muted); border-radius:24px; background:rgba(255,255,255,.72); }
.coming-card,.download-card { display:flex; align-items:center; gap:13px; width:100%; margin-top:13px; padding:16px 18px; color:inherit; font:inherit; text-align:left; border:1px dashed rgba(93,111,137,.22); border-radius:22px; background:rgba(255,255,255,.55); }
.coming-icons { font-size:20px; white-space:nowrap; }
.coming-icons span { opacity:.55; }
.coming-card strong,.download-card strong { display:block; font-size:14px; }
.coming-card small,.download-card small { display:block; margin-top:3px; color:var(--muted); font-size:10px; line-height:1.45; }
.download-card { border-style:solid; background:rgba(255,255,255,.82); cursor:pointer; }
.download-card>span { font-size:27px; }
.download-card>div { min-width:0; flex:1; }
.download-card>b { padding:8px 11px; color:#fff; background:#58aedd; border-radius:11px; font-size:11px; }
.download-dialog { width:min(390px,calc(100% - 30px)); padding:0; border:0; border-radius:26px; background:#fff; box-shadow:0 26px 80px rgba(38,52,74,.28); }
.download-dialog::backdrop { background:rgba(43,58,78,.32); backdrop-filter:blur(7px); }
.download-dialog form { position:relative; padding:28px 23px 23px; text-align:center; }
.dialog-close { position:absolute; right:13px; top:11px; width:34px; height:34px; border:0; border-radius:50%; color:#718096; background:#f2f5f8; font-size:23px; }
.dialog-icon { display:block; font-size:38px; }
.download-dialog h2 { margin:9px 0 5px; font-size:21px; }
.download-dialog p { margin:0 0 17px; color:var(--muted); font-size:12px; }
.download-dialog input { width:100%; height:49px; padding:0 14px; border:1px solid #dce3eb; border-radius:14px; outline:none; font:inherit; }
.download-dialog input:focus { border-color:#58aedd; box-shadow:0 0 0 3px rgba(88,174,221,.13); }
.dialog-submit { width:100%; height:50px; margin-top:11px; border:0; border-radius:14px; color:#fff; background:linear-gradient(135deg,#ff8b50,#ff6844); font-weight:900; }
.dialog-submit:disabled { opacity:.55; }
.dialog-error { display:block; min-height:17px; margin-top:9px; color:#df5656; font-size:11px; }
footer { text-align:center; margin-top:25px; color:#9aa5b5; font:700 10px/1.5 Arial,sans-serif; letter-spacing:.08em; }
@media(max-width:390px) { .shell{padding-left:12px;padding-right:12px}.hero{padding:15px;gap:13px}.app-icon{width:72px;height:72px;border-radius:21px}.hero p{font-size:11px}.game-card{grid-template-columns:61px minmax(0,1fr) 38px;gap:11px;padding:14px}.game-icon{width:61px;height:61px}.play-button{width:38px;height:38px}.coming-icons{display:none} }