:root {
    --bg: #24003f;
    --deep: #16002b;
    --panel: #2d0052;
    --panel-2: #3b006b;
    --panel-3: #4a007f;
    --title: #bfffff;
    --cyan: #25dff5;
    --pink: #f06bea;
    --text: #ffffff;
    --muted: #d8c7ff;
    --soft: #b99ee8;
    --border: rgba(191,255,255,0.14);
    --card: rgba(60, 0, 100, 0.56);
    --btn: linear-gradient(90deg, #21dff5 0%, #8f7bff 52%, #f06bea 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; background: radial-gradient(circle at 12% 8%, rgba(240,107,234,.18), transparent 30%), radial-gradient(circle at 88% 22%, rgba(37,223,245,.12), transparent 28%), var(--bg); color: var(--text); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
main { position: relative; z-index: 1; }
.emoji-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.emoji-bg span { position: absolute; font-size: 28px; opacity: .12; animation: floatEmoji 12s linear infinite; filter: drop-shadow(0 0 10px rgba(37,223,245,.25)); }
.emoji-bg span:nth-child(1){left:4%; animation-delay:0s; animation-duration:13s}.emoji-bg span:nth-child(2){left:15%; animation-delay:2s; animation-duration:16s}.emoji-bg span:nth-child(3){left:27%; animation-delay:4s; animation-duration:14s}.emoji-bg span:nth-child(4){left:38%; animation-delay:1s; animation-duration:17s}.emoji-bg span:nth-child(5){left:49%; animation-delay:3s; animation-duration:12s}.emoji-bg span:nth-child(6){left:58%; animation-delay:5s; animation-duration:18s}.emoji-bg span:nth-child(7){left:68%; animation-delay:1.5s; animation-duration:15s}.emoji-bg span:nth-child(8){left:77%; animation-delay:3.5s; animation-duration:13s}.emoji-bg span:nth-child(9){left:85%; animation-delay:6s; animation-duration:19s}.emoji-bg span:nth-child(10){left:92%; animation-delay:2.5s; animation-duration:16s}.emoji-bg span:nth-child(11){left:10%; animation-delay:7s; animation-duration:20s}.emoji-bg span:nth-child(12){left:72%; animation-delay:8s; animation-duration:18s}
@keyframes floatEmoji { 0% { transform: translate3d(0, 110vh, 0) rotate(0deg); opacity: 0; } 12% { opacity: .16; } 50% { transform: translate3d(22px, 45vh, 0) rotate(12deg); } 100% { transform: translate3d(-18px, -12vh, 0) rotate(28deg); opacity: 0; } }
.site-header { position: sticky; top: 0; width: 100%; z-index: 9999; background: rgba(36,0,63,0.62); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); border-bottom: 1px solid rgba(191,255,255,.08); }
.header-inner { max-width: 1280px; margin: 0 auto; min-height: 72px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.brand img, .drawer-logo img, .footer-brand img { width: 150px; object-fit: contain; }
.header-actions { display:flex; gap:14px; align-items:center; }
.main-btn { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding: 0 22px; background: var(--btn); color:#fff; border-radius:6px; font-weight:800; letter-spacing:.02em; box-shadow:0 14px 30px rgba(240,107,234,0.26); transition:.25s ease; border:0; }
.main-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(37,223,245,0.30); }
.menu-toggle { width:48px; height:44px; border:1px solid rgba(191,255,255,.22); border-radius:10px; background:rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.menu-toggle span { width:22px; height:2px; background:#fff; border-radius:2px; box-shadow:0 0 10px rgba(37,223,245,.35); }
.drawer-mask { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.5); opacity:0; transition:.22s ease; }
.drawer-mask.show { opacity:1; }
.site-drawer { position:fixed; right:0; top:0; width:min(420px, 88vw); height:100vh; z-index:10001; transform:translateX(104%); transition:.28s ease; background: radial-gradient(circle at 70% 20%, rgba(240,107,234,.2), transparent 32%), linear-gradient(180deg, #3b006b, #16002b); border-left:1px solid rgba(191,255,255,.14); box-shadow:-18px 0 50px rgba(0,0,0,.36); padding:22px; overflow-y:auto; }
.site-drawer.open { transform:translateX(0); }
.drawer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:22px; border-bottom:1px solid rgba(191,255,255,.12); }
.drawer-close { width:42px; height:42px; border-radius:50%; border:1px solid rgba(191,255,255,.22); background:rgba(255,255,255,.06); color:#fff; font-size:28px; cursor:pointer; }
.drawer-nav { display:grid; gap:10px; margin:24px 0; }
.drawer-nav a { padding:14px 16px; color:#fff; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid transparent; }
.drawer-nav a.active, .drawer-nav a:hover { color:var(--title); border-color:rgba(37,223,245,.38); box-shadow:0 0 22px rgba(37,223,245,.14); }
.drawer-note { color:var(--muted); padding:18px; border-radius:14px; background:rgba(36,0,63,.56); border:1px solid var(--border); }
.drawer-cta { width:100%; margin-top:14px; }
.hero-section { min-height: 100vh; background: linear-gradient(180deg, rgba(35,0,63,0.55) 0%, rgba(35,0,63,0.78) 58%, rgba(141,0,255,0.92) 100%), url("背景.webp") center center / cover no-repeat; position: relative; overflow: hidden; display:flex; align-items:center; }
.hero-section::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:230px; background:linear-gradient(180deg, rgba(141,0,255,0) 0%, rgba(157,0,255,0.95) 100%); pointer-events:none; }
.hero-content { width:min(1180px, calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; position:relative; z-index:2; padding:80px 0 120px; }
.hero-copy h1 { font-size: clamp(48px, 8vw, 104px); line-height:1; color:var(--title); margin:12px 0 22px; text-shadow:0 0 32px rgba(37,223,245,.34); }
.hero-copy p { color:#fff; max-width:680px; font-size:18px; }
.eyebrow { color:var(--cyan); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hero-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:34px; }
.text-link { color:var(--title); font-weight:800; border-bottom:1px solid rgba(191,255,255,.6); }
.hero-visual { filter: drop-shadow(0 34px 60px rgba(0,0,0,.36)) drop-shadow(0 0 36px rgba(37,223,245,.18)); }
.hero-visual img { width:100%; max-height:620px; object-fit:contain; }
.stats-strip { max-width:1080px; margin:-46px auto 90px; border-radius:12px; background:linear-gradient(100deg, #f06bea 0%, #9b67f0 48%, #6d67ff 100%); box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 16px 38px rgba(0,0,0,0.28); border-bottom:4px solid #25f5e7; position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.stats-strip div { padding:26px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.24); }
.stats-strip div:last-child { border-right:0; }
.stats-strip strong { display:block; font-size:32px; color:#fff; line-height:1.1; }
.stats-strip span { color:var(--title); font-weight:800; }
.section { width:min(1180px, calc(100% - 40px)); margin:0 auto 90px; position:relative; z-index:1; }
.compact-section { margin-bottom:38px; }
.section-head { text-align:center; max-width:760px; margin:0 auto 38px; }
h1,h2,h3,.section-title { color: var(--title); text-shadow:0 0 18px rgba(37,223,245,0.20); }
h2 { font-size: clamp(30px, 4vw, 52px); line-height:1.15; margin:10px 0 16px; }
h3 { margin:10px 0 8px; }
p { color:var(--muted); margin:0 0 16px; }
.capsule-nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.capsule-nav a { padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(191,255,255,.16); color:#fff; transition:.2s ease; }
.capsule-nav a:hover { color:var(--title); border-color:rgba(37,223,245,.48); box-shadow:0 0 22px rgba(37,223,245,.14); }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.category-card, .card, .zone-card, .info-card, .article-card, .game-card { background: var(--card); border:1px solid var(--border); box-shadow:0 18px 46px rgba(0,0,0,0.32); backdrop-filter: blur(10px); border-radius:18px; }
.category-card { padding:22px; transition:.25s ease; min-height:210px; }
.category-card:hover, .game-card:hover, .info-card:hover { transform:translateY(-5px); box-shadow:0 24px 54px rgba(0,0,0,.36), 0 0 30px rgba(37,223,245,.13); }
.category-card b { color:var(--cyan); font-size:28px; }
.category-card p { color:var(--soft); font-size:15px; }
.service-ribbon { width:min(1180px, calc(100% - 40px)); margin:0 auto 90px; padding:20px; border-radius:18px; background:linear-gradient(90deg, rgba(37,223,245,.14), rgba(240,107,234,.14)); border:1px solid rgba(191,255,255,.16); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-around; color:var(--title); font-weight:800; position:relative; z-index:1; }
.split-section { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; padding:28px; border-radius:24px; background:linear-gradient(135deg, rgba(45,0,82,.72), rgba(22,0,43,.72)); border:1px solid rgba(191,255,255,.12); box-shadow:0 24px 70px rgba(0,0,0,.34); }
.split-copy p { font-size:17px; }
.check-list { list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:10px; }
.check-list li { color:#fff; padding-left:30px; position:relative; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--cyan); font-weight:900; }
.neon-frame { border-radius:22px; background:radial-gradient(circle at 50% 20%, rgba(37,223,245,.22), rgba(240,107,234,.09)); border:1px solid rgba(191,255,255,.16); padding:18px; box-shadow:inset 0 0 36px rgba(37,223,245,.08), 0 20px 52px rgba(0,0,0,.28); }
.neon-frame img, .content-img, .zone-card img, .app-section img, .hero-visual img, .poster-banner img, .page-visual img, .game-card img, .media-card img { width:100%; height:auto; object-fit:contain; }
.poster-banner { max-width:1040px; margin:70px auto 36px; border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.38); position:relative; z-index:1; }
.game-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.small-grid { grid-template-columns:repeat(3,1fr); }
.game-card { padding:14px; transition:.25s ease; }
.game-card img { aspect-ratio: 1 / 1; border-radius:14px; background:#16002b; }
.game-card h3 { font-size:18px; }
.game-card p { color:var(--soft); font-size:14px; }
.game-card a, .info-card a { color:var(--cyan); font-weight:800; }
.two-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.media-card { padding:18px; }
.media-card img { max-height:260px; border-radius:14px; margin:0 auto 16px; }
.app-visual img { max-height:520px; margin:auto; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.mini-grid span { padding:12px; border-radius:10px; background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(191,255,255,.12); }
.three-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.info-card { padding:24px; }
.faq-list { display:grid; gap:14px; }
details { background:rgba(60,0,100,.56); border:1px solid var(--border); border-radius:14px; padding:18px 20px; }
summary { color:#fff; font-weight:800; cursor:pointer; }
details p { margin:12px 0 0; }
.responsible-strip, .notice-band { text-align:center; padding:34px; border-radius:22px; background:linear-gradient(100deg, rgba(37,223,245,.12), rgba(240,107,234,.13)); border:1px solid rgba(191,255,255,.16); }
.page-hero { width:min(1180px, calc(100% - 40px)); margin:50px auto 70px; position:relative; z-index:1; }
.page-hero-inner { min-height:440px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:36px; padding:34px; border-radius:28px; background:radial-gradient(circle at 72% 20%, rgba(37,223,245,.16), transparent 34%), linear-gradient(135deg, rgba(59,0,107,.78), rgba(22,0,43,.82)); border:1px solid rgba(191,255,255,.14); box-shadow:0 24px 70px rgba(0,0,0,.36); }
.page-hero h1 { font-size:clamp(36px, 5vw, 66px); line-height:1.1; margin:12px 0 18px; }
.page-visual img { max-height:360px; margin:auto; }
.content-section { margin-bottom:42px; }
.article-card { padding:32px; }
.article-card p { font-size:17px; }
.site-footer { background:#140024; color:#d8c7ff; position:relative; z-index:1; border-top:1px solid rgba(191,255,255,.12); }
.footer-inner { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:46px 0; display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:32px; }
.footer-links { display:grid; gap:10px; }
.footer-links a { color:#fff; }
.footer-safe { padding:18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(191,255,255,.12); }
.footer-safe strong { color:var(--title); }
.footer-bottom { text-align:center; padding:18px; color:var(--soft); border-top:1px solid rgba(191,255,255,.08); }
@media (max-width: 1024px) { .hero-content, .split-section, .page-hero-inner { grid-template-columns:1fr; } .category-grid { grid-template-columns:repeat(3,1fr); } .game-grid { grid-template-columns:repeat(3,1fr); } .footer-inner { grid-template-columns:1fr; } .hero-section { min-height:auto; } }
@media (max-width: 720px) { .header-inner { min-height:64px; padding:0 14px; } .brand img, .drawer-logo img, .footer-brand img { width:122px; } .header-cta { min-height:38px; padding:0 12px; font-size:13px; } .menu-toggle { width:42px; height:38px; } .hero-content { width:calc(100% - 28px); padding:54px 0 90px; } .hero-copy p { font-size:16px; } .stats-strip { grid-template-columns:repeat(2,1fr); margin:-30px 14px 60px; } .stats-strip div { padding:18px 10px; } .stats-strip strong { font-size:25px; } .section, .service-ribbon, .page-hero { width:calc(100% - 28px); margin-bottom:60px; } .category-grid, .game-grid, .small-grid, .two-cards, .three-grid, .mini-grid { grid-template-columns:1fr 1fr; } .split-section, .page-hero-inner, .article-card { padding:20px; } .page-hero { margin-top:28px; } .page-visual img { max-height:280px; } .emoji-bg span { font-size:22px; } .emoji-bg span:nth-child(n+7) { display:none; } }
@media (max-width: 480px) { .category-grid, .two-cards, .three-grid, .mini-grid { grid-template-columns:1fr; } .game-grid, .small-grid { grid-template-columns:1fr 1fr; gap:12px; } .game-card { padding:10px; } .game-card h3 { font-size:16px; } .game-card p { font-size:13px; } .hero-actions { gap:14px; } .main-btn { width:auto; padding:0 16px; } .stats-strip { grid-template-columns:1fr 1fr; } .page-hero-inner { min-height:auto; } }