:root {
  --ratio: 1.7768331562167907;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020517;color:#fff;font-family:"Microsoft YaHei",Arial,sans-serif}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.app{min-height:100vh;background:#020517}

/* ========== 电脑端 ========== */
.desktop-view{position:relative;width:100vw;height:100dvh;display:block;overflow:hidden;padding:0;background:#020517}
.desktop-bg{position:absolute;inset:0;overflow:hidden;display:none}
.desktop-bg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.45) saturate(1.18);transform:scale(1.10)}
.desktop-view::after{content:"";display:none}
.poster{position:relative;z-index:2;width:100vw;height:100dvh;aspect-ratio:auto;overflow:hidden;border-radius:0;box-shadow:none;background:#040926}
.poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.hot{position:absolute;z-index:8;display:block}
.platform{border-radius:18px;overflow:hidden;transition:transform .22s ease,filter .22s ease,box-shadow .22s ease;animation:softBreath 4.2s ease-in-out infinite}
.platform::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.26);box-shadow:0 0 10px var(--glow),inset 0 0 14px rgba(255,255,255,.08);opacity:.7;pointer-events:none}
.platform::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 45%,rgba(255,255,255,.06));opacity:.42;pointer-events:none}
.platform span{position:absolute;top:-55%;left:-42%;width:28%;height:210%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:rotate(20deg);animation:sweep 5.8s linear infinite}
.platform:hover{transform:translateY(-4px) scale(1.01);filter:brightness(1.05);box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 18px var(--glow)}
.star{--glow:rgba(34,210,255,.72);left:4.55%;top:42.82%;width:30.5%;height:14.88%}
.mk{--glow:rgba(184,62,255,.72);left:35.82%;top:42.82%;width:28.82%;height:14.88%;animation-delay:.55s}
.kaiyun{--glow:rgba(31,239,226,.72);left:65.10%;top:42.82%;width:30.4%;height:14.88%;animation-delay:1.1s}
.enter{left:17.95%;top:33.25%;width:15.95%;height:5.95%;border-radius:999px;animation:ctaPulse 2.8s ease-in-out infinite}
.game{border-radius:12px;transition:.18s ease}
.game:hover{transform:translateY(-2px);background:rgba(255,255,255,.06);box-shadow:0 0 12px rgba(45,221,255,.20),inset 0 0 10px rgba(255,255,255,.08)}
.g1{left:11.52%;top:65.10%;width:24.28%;height:11.58%}
.g2{left:36.44%;top:65.10%;width:24.28%;height:11.58%}
.g3{left:61.34%;top:65.10%;width:24.28%;height:11.58%}
.g4{left:11.52%;top:78.22%;width:24.28%;height:11.54%}
.g5{left:36.44%;top:78.22%;width:24.28%;height:11.54%}
.g6{left:61.34%;top:78.22%;width:24.28%;height:11.54%}
.wc-flash{position:absolute;z-index:9;left:17.0%;top:10.2%;font-size:clamp(56px,5.4vw,114px);font-weight:1000;letter-spacing:.02em;line-height:1;color:#fff7cf;text-shadow:0 0 10px rgba(255,230,120,.78),0 0 22px rgba(255,98,255,.58),0 0 36px rgba(86,179,255,.44);animation:wcBlink 1.5s ease-in-out infinite;pointer-events:none;transform:skewX(-8deg)}
.particles{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.particles i{position:absolute;border-radius:2px;filter:drop-shadow(0 0 5px rgba(255,255,255,.8));animation:fall linear infinite}

/* ========== 手机端重排 ========== */
.mobile-view{display:none}
@media (max-width: 760px){
  .wc-flash{display:none}

  body{overflow:auto;background:#020517}
  .desktop-view{position:relative;width:100vw;height:100dvh;display:block;overflow:hidden;padding:0;background:#020517}
  .mobile-view{display:block;position:relative;min-height:100dvh;padding:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 16px);overflow:hidden}
  .m-bg{position:fixed;inset:0;z-index:0;overflow:hidden}
  .m-bg img{width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.45) saturate(1.18);transform:scale(1.12)}
  .m-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,5,22,.28),rgba(2,5,22,.78)),radial-gradient(circle at 50% 18%,rgba(88,42,196,.32),transparent 45%)}
  .m-hero,.m-platforms,.m-section-title,.m-games,.m-security{position:relative;z-index:1}
  .m-hero{height:42dvh;min-height:330px;max-height:440px;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.28),0 0 36px rgba(42,218,255,.18);background:#050a2b}
  .m-hero img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .m-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(3,7,30,.55) 100%),radial-gradient(circle at 80% 25%,rgba(239,64,255,.14),transparent 35%)}

  .m-platforms{display:grid;gap:12px;margin-top:14px}
  .m-card{position:relative;min-height:96px;border-radius:22px;padding:14px 14px;display:grid;grid-template-columns:92px 1fr 56px;align-items:center;gap:10px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 22px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.20);animation:mBreath 4.4s ease-in-out infinite}
  .m-card::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 16px var(--glow),inset 0 0 14px rgba(255,255,255,.08);opacity:.56;pointer-events:none}
  .m-card:active{transform:scale(.985)}
  .m-card img{max-width:90px;max-height:70px;object-fit:contain;filter:drop-shadow(0 0 12px var(--glow))}
  .m-card b{display:block;font-size:24px;line-height:1.1;text-shadow:0 0 12px var(--glow)}
  .m-card small{display:block;margin-top:6px;font-size:12px;color:#d8eaff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-card em{justify-self:end;display:inline-grid;place-items:center;width:48px;height:36px;border-radius:999px;font-style:normal;font-size:15px;font-weight:900;background:linear-gradient(90deg,#1ee1ff,#b14dff);box-shadow:0 0 12px var(--glow)}
  .m-flow{position:absolute;top:-60%;left:-40%;width:26%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transform:rotate(20deg);animation:sweep 6s linear infinite}
  .m-star{--glow:rgba(34,210,255,.70)}
  .m-mk{--glow:rgba(184,62,255,.70);animation-delay:.45s}
  .m-kaiyun{--glow:rgba(31,239,226,.70);animation-delay:.9s}

  .m-section-title{margin:18px 0 12px;text-align:center;font-size:24px;font-weight:1000;letter-spacing:.08em;background:linear-gradient(180deg,#fff,#8ef4ff 55%,#ffe477);-webkit-background-clip:text;color:transparent}
  .m-games{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .m-games a{min-height:88px;border-radius:18px;background:linear-gradient(145deg,rgba(41,216,255,.13),rgba(183,67,255,.10));border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;box-shadow:inset 0 0 16px rgba(255,255,255,.05)}
  .m-games b{margin-top:6px;font-size:15px}
  .m-games a:active{transform:scale(.985)}
  .m-security{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
  .m-security div{min-height:58px;border-radius:16px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;gap:7px;font-size:18px}
  .m-security b{font-size:13px}
}

/* 小屏再压缩一点 */
@media (max-width: 390px){
  .mobile-view{padding-left:9px;padding-right:9px}
  .m-hero{height:39dvh;min-height:300px;border-radius:20px}
  .m-card{grid-template-columns:78px 1fr 48px;min-height:88px;border-radius:18px;padding:12px}
  .m-card img{max-width:78px;max-height:58px}
  .m-card b{font-size:21px}
  .m-card small{font-size:11px}
  .m-card em{width:42px;height:32px;font-size:13px}
}

@keyframes softBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.04)}}
@keyframes mBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.035)}}
@keyframes sweep{0%{transform:translateX(-170%) rotate(20deg);opacity:0}8%{opacity:.8}24%,100%{transform:translateX(450%) rotate(20deg);opacity:0}}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 rgba(39,224,255,0)}50%{box-shadow:0 0 16px rgba(39,224,255,.44),0 0 28px rgba(241,63,255,.32)}}
@keyframes fall{0%{transform:translate3d(0,-12vh,0) rotate(0deg);opacity:0}12%{opacity:.82}100%{transform:translate3d(var(--dx),105vh,0) rotate(360deg);opacity:0}}

@keyframes wcBlink{0%,100%{opacity:1;filter:brightness(1)}35%{opacity:.58;filter:brightness(1.15)}50%{opacity:1;filter:brightness(1.34)}62%{opacity:.7;filter:brightness(1.1)}80%{opacity:1;filter:brightness(1.28)}}