/* _cl09f18vi */
/* ===== 全局样式 ===== */
* {padding: 0;margin: 0;box-sizing: border-box}

:root {--text-dark: #0f172a;--gold: #7dd3fc;--accent-color: #38bdf8;--bg-dark: #082f49;--shadow: rgba(15, 23, 42, 0.12);--white: #ffffff;--primary-color: #0ea5e9;--bg-light: #e0f2fe;--text-light: #475569;--transition: all 0.3s ease;--secondary-color: #0284c7}

html {scroll-behavior: smooth}

body {line-height: 1.6;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color: var(--text-dark);background-color: var(--white);overflow-x: hidden}

.container {margin: 0 auto;padding: 0 20px;max-width: 1200px}

/* ===== 导航栏 ===== */
.navbar {backdrop-filter: blur(10px);z-index: 1000;transition: var(--transition);top: 0;box-shadow: 0 2px 10px var(--shadow);width: 100%;padding: 1rem 0;position: fixed;background: rgba(14, 165, 233, 0.95)}

.navbar:hover {background: var(--secondary-color)}

.nav-wrapper {display: flex;justify-content: space-between;align-items: center}

.logo {align-items: center;color: var(--white);text-decoration: none;display: flex;gap: 10px;font-weight: bold;font-size: 1.5rem}

.logo-img {height: 40px;transition: var(--transition);object-fit: contain;width: auto}

.logo-text-img {transition: var(--transition);height: 35px;object-fit: contain;width: auto}

.logo:hover .logo-img,
.logo:hover .logo-text-img {transform: scale(1.05)}

.logo i {color: var(--gold);font-size: 2rem}

.nav-menu {display: flex;list-style: none;gap: 2rem}

.nav-menu a {color: var(--white);text-decoration: none;transition: var(--transition);position: relative;font-weight: 500}

.nav-menu a::after {width: 0;left: 0;bottom: -5px;position: absolute;content: '';height: 2px;background: var(--accent-color);transition: var(--transition)}

.nav-menu a:hover::after {width: 100%}

.hamburger {display: none;flex-direction: column;cursor: pointer}

.hamburger span {background: var(--white);margin: 3px 0;transition: var(--transition);border-radius: 3px;height: 3px;width: 25px}

/* ===== 英雄区域 ===== */
.hero {display: flex;min-height: 100vh;padding-top: 80px;overflow: hidden;background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-color) 100%);align-items: center;position: relative;justify-content: center}

.hero-background {height: 100%;width: 100%;overflow: hidden;position: absolute}

.cards-animation {height: 100%;position: absolute;width: 100%}

.card {font-weight: bold;font-size: 5rem;color: rgba(255, 255, 255, 0.1);position: absolute;animation: float 6s ease-in-out infinite}

.card-1 {top: 10%;animation-delay: 0s;left: 10%}

.card-2 {animation-delay: 1s;right: 15%;top: 20%}

.card-3 {bottom: 15%;animation-delay: 2s;left: 20%}

.card-4 {bottom: 10%;animation-delay: 1.5s;right: 10%}

@keyframes float {0%, 100% {
        transform: translateY(0) rotate(0deg)}
    50% {transform: translateY(-20px) rotate(5deg)}
}

.hero-wrapper {width: 100%;display: grid;gap: 3rem;z-index: 1;grid-template-columns: 1fr 1fr;position: relative;align-items: center}

.hero-content {position: relative;z-index: 1;color: var(--white);text-align: left}

.hero-title {margin-bottom: 1rem;animation: fadeInUp 1s ease;font-size: 3.5rem;font-weight: bold;line-height: 1.2}

.hero-subtitle {margin-bottom: 1.5rem;animation: fadeInUp 1s ease 0.2s backwards;font-size: 1.3rem;opacity: 0.9}

.hero-description {animation: fadeInUp 1s ease 0.3s backwards;margin-bottom: 2rem}

.hero-description p {line-height: 1.8;color: var(--white);margin-bottom: 1rem;font-size: 1rem;opacity: 0.85}

.hero-description p:last-child {margin-bottom: 0}

.hero-buttons {animation: fadeInUp 1s ease 0.4s backwards;margin-bottom: 3rem;display: flex;justify-content: flex-start;gap: 1rem}

.btn {padding: 1rem 2.5rem;border-radius: 50px;font-size: 1.1rem;font-weight: 600;cursor: pointer;border: none;transition: var(--transition)}

.btn-primary {background: var(--gold);color: var(--text-dark)}

.btn-primary:hover {color: var(--white);background: var(--secondary-color);transform: translateY(-3px);box-shadow: 0 10px 25px rgba(2, 132, 199, 0.4)}

.btn-secondary {color: var(--white);border: 2px solid var(--white);background: transparent}

.btn-secondary:hover {transform: translateY(-3px);color: var(--primary-color);background: var(--white)}

.btn-download-apple,
.btn-download-android {width: 180px;cursor: pointer;justify-content: center;align-items: center;border-radius: 12px;display: flex;border: none;height: 50px;font-weight: 600;gap: 0.5rem;transition: var(--transition);box-sizing: border-box;padding: 1rem 2rem;font-size: 0.85rem}

.btn-download-apple {color: var(--white);background: #0c4a6e}

.btn-download-apple:hover {transform: translateY(-3px);background: #0b3b58;box-shadow: 0 10px 25px rgba(11, 59, 88, 0.4)}

.btn-download-apple i {font-size: 1.1rem}

.btn-download-android {background: #0ea5e9;color: var(--white)}

.btn-download-android:hover {background: #38bdf8;box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35);transform: translateY(-3px)}

.btn-download-android i {font-size: 1.1rem}

.hero-stats {margin-top: 3rem;animation: fadeInUp 1s ease 0.6s backwards;justify-content: flex-start;display: flex;gap: 3rem}

/* ===== App界面展示区域 ===== */
.hero-app {align-items: center;position: relative;display: flex;justify-content: center;animation: fadeInRight 1s ease 0.8s backwards}

.phone-frame {padding: 8px;background: transparent;border: 3px solid transparent;height: 580px;position: relative;transition: var(--transition);box-shadow: 
        0 0 30px rgba(2, 132, 199, 0.3),
        0 0 60px rgba(14, 165, 233, 0.2),
        inset 0 0 30px rgba(2, 132, 199, 0.1);border-radius: 30px;background-origin: border-box;background-clip: padding-box, border-box;transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
        linear-gradient(135deg, rgba(2, 132, 199, 0.8), rgba(14, 165, 233, 0.6));width: 280px}

.phone-frame::before {border-radius: 30px;z-index: -1;position: absolute;bottom: -3px;left: -3px;top: -3px;right: -3px;content: '';animation: borderGlow 3s ease-in-out infinite;opacity: 0.8;background: linear-gradient(135deg, 
        rgba(2, 132, 199, 0.6),
        rgba(8, 126, 186, 0.85),
        rgba(56, 189, 248, 0.65),
        rgba(14, 165, 233, 0.6))}

.phone-frame::after {height: 120%;animation: pulse 4s ease-in-out infinite;content: '';top: 50%;border-radius: 50%;background: radial-gradient(circle, 
        rgba(125, 211, 252, 0.18) 0%,
        transparent 70%);left: 50%;transform: translate(-50%, -50%);z-index: -2;width: 120%;position: absolute}

.phone-frame:hover {box-shadow: 
        0 0 50px rgba(2, 132, 199, 0.45),
        0 0 100px rgba(14, 165, 233, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(2, 132, 199, 0.15);transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-10px) scale(1.02)}

.phone-frame:hover::before {animation: borderGlow 1.5s ease-in-out infinite;opacity: 1}

@keyframes borderGlow {0%, 100% {
        opacity: 0.6;filter: blur(5px)}
    50% {opacity: 1;filter: blur(8px)}
}

@keyframes pulse {transform: translate(-50%, -50%) scale(1);0%, 100% {
        opacity: 0.3}
    50% {transform: translate(-50%, -50%) scale(1.1);opacity: 0.6}
}

.phone-screen {background: #000;height: 100%;box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(125, 211, 252, 0.15);border-radius: 25px;position: relative;overflow: hidden;width: 100%}

.app-screenshot {transition: var(--transition);width: 100%;object-fit: cover;display: block;height: 100%}

.phone-frame:hover .app-screenshot {transform: scale(1.05)}

@keyframes fadeInRight {transform: translateX(50px);from {
        opacity: 0}
    to {opacity: 1;transform: translateX(0)}
}

.stat-item {text-align: center}

.stat-number {margin-bottom: 0.5rem;font-weight: bold;color: var(--gold);font-size: 2.5rem}

.stat-label {opacity: 0.8;font-size: 1rem}

@keyframes fadeInUp {from {
        opacity: 0;transform: translateY(30px)}
    to {transform: translateY(0);opacity: 1}
}

/* ===== 特色功能 ===== */
.features {background: var(--bg-light);padding: 5rem 0}

.section-title {color: var(--primary-color);font-size: 2.5rem;text-align: center;margin-bottom: 1rem}

.section-subtitle {margin-bottom: 3rem;color: var(--text-light);font-size: 1.2rem;text-align: center}

.features-grid {margin-top: 3rem;display: grid;gap: 1rem;grid-template-columns: repeat(6, 1fr)}

.feature-card {flex-direction: column;justify-content: center;transition: var(--transition);box-shadow: 0 5px 20px var(--shadow);text-align: center;padding: 1.5rem 1rem;background: var(--white);display: flex;border-radius: 15px;align-items: center}

.feature-card:hover {transform: translateY(-10px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15)}

.feature-icon {height: 60px;width: 60px;border-radius: 50%;flex-shrink: 0;color: var(--white);display: flex;font-size: 1.5rem;justify-content: center;background: linear-gradient(135deg, var(--primary-color), var(--accent-color));margin: 0 auto 1rem;align-items: center}

.feature-card h3 {font-weight: 600;font-size: 1rem;margin-bottom: 0.5rem;color: var(--primary-color)}

.feature-card p {color: var(--text-light);font-size: 0.85rem;line-height: 1.6}

/* ===== 游戏介绍 ===== */
.games {background: var(--white);padding: 5rem 0}

.games-grid {grid-template-columns: repeat(3, 1fr);gap: 1.5rem;display: grid;margin-top: 3rem}

.game-card {display: flex;background: linear-gradient(135deg, var(--primary-color), var(--accent-color));flex-direction: column;box-shadow: 0 10px 30px var(--shadow);overflow: hidden;border-radius: 20px;transition: var(--transition)}

.game-card:hover {box-shadow: 0 15px 40px rgba(2, 132, 199, 0.3);transform: translateY(-10px)}

.game-image {display: flex;height: 150px;align-items: center;justify-content: center;flex-shrink: 0;background: rgba(255, 255, 255, 0.1)}

.game-image i {font-size: 3.5rem;color: rgba(255, 255, 255, 0.3)}

.game-content {display: flex;padding: 1.5rem;flex: 1;color: var(--white);flex-direction: column}

.game-content h3 {margin-bottom: 0.8rem;font-size: 1.3rem}

.game-content p {line-height: 1.6;margin-bottom: 1rem;opacity: 0.9;font-size: 0.9rem;flex: 1}

.btn-game {border-radius: 25px;font-weight: 600;transition: var(--transition);background: var(--gold);border: none;color: var(--text-dark);cursor: pointer;width: 100%;font-size: 0.9rem;margin-top: auto;padding: 0.7rem 1.5rem}

.btn-game:hover {color: var(--white);box-shadow: 0 5px 15px rgba(2, 132, 199, 0.35);background: var(--secondary-color);transform: translateY(-3px)}

/* ===== 下载区域 ===== */
.download {padding: 5rem 0;color: var(--white);background: linear-gradient(135deg, var(--bg-dark), var(--primary-color))}

.download-header {margin-bottom: 3rem;text-align: center}

.download-header h2 {font-weight: bold;font-size: 2.5rem;margin-bottom: 1rem}

.download-header p {font-size: 1.1rem;line-height: 1.8;opacity: 0.9}

.download-content {display: grid;gap: 4rem;grid-template-columns: 1fr 1fr;align-items: center}

.download-buttons-wrapper {align-items: center;justify-content: center;display: flex}

.download-buttons {grid-template-columns: repeat(2, 1fr);width: 100%;gap: 1rem;display: grid}

.btn-download {justify-content: flex-start;font-weight: 600;gap: 1rem;text-align: left;display: flex;padding: 1rem 1.2rem;border: 2px solid rgba(255, 255, 255, 0.2);color: var(--white);cursor: pointer;background: rgba(255, 255, 255, 0.1);transition: var(--transition);align-items: center;border-radius: 12px;font-size: 0.95rem}

.btn-download:hover {background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.4);transform: translateY(-3px);box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3)}

.btn-download i {font-size: 1.5rem;flex-shrink: 0}

.btn-download span {flex: 1}

.download-image {display: flex;align-items: center;justify-content: center}

.phone-mockup {position: relative;height: 440px;background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));border: 3px solid rgba(255, 255, 255, 0.3);transition: var(--transition);box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);overflow: hidden;border-radius: 35px;backdrop-filter: blur(10px);padding: 10px;display: flex;width: 220px;align-items: center;justify-content: center}

.phone-mockup:hover {transform: translateY(-10px) scale(1.02);box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4)}

.phone-mockup-screen {align-items: center;overflow: hidden;width: 100%;border-radius: 25px;height: 100%;justify-content: center;display: flex;background: var(--white)}

.phone-mockup-screen img {display: block;object-fit: cover;height: 100%;width: 100%}

.phone-mockup i {font-size: 8rem;opacity: 0.3;position: absolute;z-index: 0}

/* ===== 文章正文板块 ===== */
.article {background: var(--white);padding: 5rem 0}

.article-header {border-bottom: 2px solid var(--bg-light);padding-bottom: 2rem;text-align: center;margin-bottom: 3rem}

.article-title {margin-bottom: 1.5rem;font-size: 2.5rem;line-height: 1.3;color: var(--text-dark);font-weight: bold}

.article-meta {gap: 2rem;flex-wrap: wrap;color: var(--text-light);justify-content: center;font-size: 0.95rem;display: flex}

.article-meta span {display: flex;align-items: center;gap: 0.5rem}

.article-meta i {font-size: 1rem;color: var(--primary-color)}

.article-content {max-width: 900px;margin: 0 auto}

.article-image {overflow: hidden;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);margin-bottom: 2.5rem}

.article-image img {height: auto;width: 100%;display: block;transition: transform 0.3s ease}

.article-image img:hover {transform: scale(1.02)}

.article-text {color: var(--text-dark);font-size: 1.05rem;line-height: 1.8}

.article-text .lead {border-radius: 8px;font-size: 1.2rem;border-left: 4px solid var(--primary-color);margin-bottom: 2rem;padding: 1.5rem;color: var(--text-dark);background: linear-gradient(135deg, var(--bg-light), rgba(56, 189, 248, 0.08));font-weight: 500}

.article-text h3 {margin: 2.5rem 0 1rem;font-weight: bold;font-size: 1.5rem;color: var(--primary-color);border-bottom: 2px solid var(--bg-light);padding-bottom: 0.5rem}

.article-text p {color: var(--text-dark);text-align: justify;margin-bottom: 1.5rem}

.article-tags {border-top: 1px solid var(--bg-light);margin-top: 2.5rem;gap: 0.8rem;flex-wrap: wrap;display: flex;padding-top: 2rem}

.article-tags .tag {font-weight: 500;font-size: 0.85rem;border-radius: 20px;padding: 0.5rem 1rem;background: linear-gradient(135deg, var(--primary-color), var(--accent-color));transition: var(--transition);color: var(--white);display: inline-block}

.article-tags .tag:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(2, 132, 199, 0.3)}

/* ===== App界面展示板块 ===== */
.app-showcase {padding: 5rem 0;background: linear-gradient(135deg, var(--bg-light), var(--white))}

.app-showcase-header {text-align: center;margin-bottom: 3rem}

.app-showcase-gallery {justify-content: flex-start;gap: 1.5rem;align-items: center;overflow-x: auto;flex-wrap: nowrap;-webkit-overflow-scrolling: touch;padding: 1rem 0;display: flex;scroll-behavior: smooth}

@media (max-width: 992px) {min-width: 200px;max-width: 200px;.app-screenshot-item {
        width: 200px}
}

@media (max-width: 768px) {min-width: 180px;.app-screenshot-item {
        width: 180px;max-width: 180px}
}

@media (max-width: 480px) {.app-screenshot-item {
        width: 160px;max-width: 160px;min-width: 160px}
}

.app-showcase-gallery::-webkit-scrollbar {height: 8px}

.app-showcase-gallery::-webkit-scrollbar-track {border-radius: 10px;background: var(--bg-light)}

.app-showcase-gallery::-webkit-scrollbar-thumb {background: linear-gradient(135deg, var(--primary-color), var(--accent-color));border-radius: 10px}

.app-showcase-gallery::-webkit-scrollbar-thumb:hover {background: var(--primary-color)}

.app-screenshot-item {width: 220px;margin-bottom: 0;min-width: 220px;flex: 0 0 auto;max-width: 220px;margin-top: 0}

.app-screenshot-frame {cursor: pointer;overflow: hidden;background: var(--white);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);border-radius: 20px;padding: 8px;position: relative;transition: var(--transition)}

/* 强制手机竖屏比例 9:16 */
.app-screenshot-frame {max-width: 320px;aspect-ratio: 9 / 16;min-width: 240px;width: 100%}

.app-screenshot-frame::before {left: 0;right: 0;pointer-events: none;content: '';transition: var(--transition);z-index: 1;bottom: 0;position: absolute;opacity: 0;top: 0;background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(125, 211, 252, 0.08))}

.app-screenshot-frame:hover {transform: translateY(-10px) scale(1.02);box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25)}

.app-screenshot-frame:hover::before {opacity: 1}

.app-screenshot-frame img {height: 100%;border-radius: 12px;display: block;object-fit: cover;transition: var(--transition);width: 100%}

.app-screenshot-frame:hover img {transform: scale(1.05)}

/* ===== 联系我们 ===== */
.contact {padding: 5rem 0;background: var(--bg-light)}

.contact-content {margin-top: 3rem;display: grid;grid-template-columns: 1fr 1fr;gap: 3rem}

.contact-info {flex-direction: column;display: flex;gap: 2rem}

.contact-item {display: flex;gap: 1.5rem;align-items: flex-start}

.contact-icon {justify-content: center;flex-shrink: 0;width: 50px;display: flex;align-items: center;color: var(--white);border-radius: 50%;font-size: 1.5rem;background: linear-gradient(135deg, var(--primary-color), var(--accent-color));height: 50px}

.contact-item h4 {font-size: 1.2rem;margin-bottom: 0.5rem;color: var(--primary-color)}

.contact-item p {color: var(--text-light)}

.contact-form {border-radius: 15px;box-shadow: 0 5px 20px var(--shadow);background: var(--white);padding: 2rem}

.form-group {margin-bottom: 1.5rem}

.form-group input,
.form-group textarea {transition: var(--transition);border-radius: 10px;font-size: 1rem;padding: 1rem;font-family: inherit;border: 2px solid #e0e0e0;width: 100%}

.form-group input:focus,
.form-group textarea:focus {outline: none;border-color: var(--primary-color)}

.form-group textarea {resize: vertical}

/* ===== 页脚 ===== */
.footer {color: var(--white);padding: 3rem 0 1rem;background: var(--bg-dark)}

.footer-content {gap: 2rem;display: grid;margin-bottom: 2rem;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))}

.footer-logo {gap: 10px;align-items: center;margin-bottom: 1.5rem;display: flex}

.footer-logo-img {object-fit: contain;width: auto;height: 45px;transition: var(--transition)}

.footer-logo-text-img {object-fit: contain;height: 40px;transition: var(--transition);width: auto}

.footer-logo:hover .footer-logo-img,
.footer-logo:hover .footer-logo-text-img {opacity: 0.9;transform: scale(1.05)}

.footer-section h4 {color: var(--gold);margin-bottom: 1rem}

.footer-section p {margin-bottom: 1rem;line-height: 1.8;opacity: 0.8}

.footer-section p:last-child {margin-bottom: 0}

.footer-section ul {list-style: none}

.footer-section ul li {margin-bottom: 0.5rem}

.footer-section ul li a {transition: var(--transition);text-decoration: none;opacity: 0.8;color: var(--white)}

.footer-section ul li a:hover {color: var(--gold);opacity: 1}

.social-links {display: flex;gap: 1rem}

.social-links a {transition: var(--transition);background: rgba(255, 255, 255, 0.1);display: flex;font-size: 1.2rem;align-items: center;border-radius: 50%;width: 40px;justify-content: center;color: var(--white);height: 40px}

.social-links a:hover {background: var(--gold);transform: translateY(-5px)}

.footer-bottom {opacity: 0.8;text-align: center;border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 2rem}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {background-color: var(--secondary-color);top: 70px;.nav-menu {
        position: fixed;text-align: center;transition: 0.3s;left: -100%;box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);width: 100%;flex-direction: column;padding: 2rem 0}

    .nav-menu.active {left: 0}

    .hamburger {display: flex}

    .hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px)}

    .hamburger.active span:nth-child(2) {opacity: 0}

    .hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px)}

    .hero-wrapper {grid-template-columns: 1fr;gap: 2rem;text-align: center}

    .hero-content {text-align: center}

    .hero-title {font-size: 2rem}

    .hero-subtitle {font-size: 1rem}

    .hero-description {margin-bottom: 1.5rem}

    .hero-description p {font-size: 0.9rem;line-height: 1.7}

    .hero-buttons {justify-content: center;flex-wrap: wrap;align-items: center;flex-direction: row;gap: 0.8rem}

    .btn-download-apple,
    .btn-download-android {width: 160px;font-size: 0.8rem;height: 48px;padding: 0.9rem 1.5rem}

    .btn-download-apple i,
    .btn-download-android i {font-size: 1.1rem}

    .hero-stats {justify-content: center;flex-direction: column}

    .hero-app {order: -1}

    .phone-frame {height: 315px;transform: perspective(1000px) rotateY(0deg) rotateX(0deg);padding: 10px;width: 150px}

    .phone-frame::before {height: 4px;width: 40px;top: 12px}

    .phone-screen {border-radius: 20px}

    .download-header {margin-bottom: 2rem}

    .download-header h2 {font-size: 2rem}

    .download-header p {font-size: 1rem}

    .download-content {gap: 2.5rem;grid-template-columns: 1fr}

    .download-buttons {grid-template-columns: repeat(2, 1fr);gap: 0.8rem}

    .btn-download {padding: 0.9rem 1rem;font-size: 0.9rem}

    .btn-download i {font-size: 1.3rem}

    .phone-mockup {width: 180px;padding: 8px;height: 360px;margin: 0 auto}

    .phone-mockup-screen {border-radius: 20px}

    .phone-mockup i {font-size: 6rem}

    .article {padding: 3rem 0}

    .article-header {margin-bottom: 2rem;padding-bottom: 1.5rem}

    .article-title {font-size: 1.8rem;margin-bottom: 1rem}

    .article-meta {font-size: 0.85rem;gap: 1rem}

    .article-content {max-width: 100%}

    .article-image {border-radius: 8px;margin-bottom: 2rem}

    .article-text {font-size: 1rem}

    .article-text .lead {font-size: 1.1rem;padding: 1rem}

    .article-text h3 {font-size: 1.3rem;margin: 2rem 0 0.8rem}

    .article-text p {margin-bottom: 1.2rem;text-align: left}

    .article-tags {gap: 0.6rem;padding-top: 1.5rem;margin-top: 2rem}

    .article-tags .tag {padding: 0.4rem 0.8rem;font-size: 0.8rem}

    .footer-logo-img {height: 40px}

    .footer-logo-text-img {height: 35px}

    .footer-section p {font-size: 0.9rem}

    .contact-content {grid-template-columns: 1fr}

    .section-title {font-size: 2rem}

    .features-grid {grid-template-columns: repeat(3, 1fr);gap: 1rem}

    .feature-card {padding: 1.2rem 0.8rem}

    .feature-icon {height: 50px;font-size: 1.2rem;width: 50px}

    .feature-card h3 {font-size: 0.9rem}

    .feature-card p {font-size: 0.8rem}

    .games-grid {gap: 1rem;grid-template-columns: repeat(2, 1fr)}

    .game-image {height: 120px}

    .game-image i {font-size: 2.5rem}

    .game-content {padding: 1.2rem}

    .game-content h3 {margin-bottom: 0.6rem;font-size: 1.1rem}

    .game-content p {margin-bottom: 0.8rem;font-size: 0.85rem}

    .btn-game {padding: 0.6rem 1.2rem;font-size: 0.85rem}
}

@media (max-width: 480px) {.hero-title {
        font-size: 1.5rem}

    .hero-description p {line-height: 1.6;font-size: 0.85rem}

    .btn {font-size: 1rem;padding: 0.8rem 1.5rem}

    .btn-download-apple,
    .btn-download-android {font-size: 0.75rem;height: 46px;padding: 0.85rem 1.2rem;width: 140px}

    .btn-download-apple i,
    .btn-download-android i {font-size: 1rem}

    .phone-frame {padding: 8px;height: 255px;width: 120px}

    .phone-frame::before {width: 30px;height: 3px;top: 10px}

    .phone-screen {border-radius: 15px}

    .features-grid {grid-template-columns: repeat(2, 1fr);gap: 0.8rem}

    .feature-card {padding: 1rem 0.5rem}

    .feature-icon {font-size: 1rem;margin-bottom: 0.8rem;height: 45px;width: 45px}

    .feature-card h3 {font-size: 0.85rem;margin-bottom: 0.4rem}

    .feature-card p {font-size: 0.75rem;line-height: 1.5}

    .games-grid {grid-template-columns: 1fr;gap: 1rem}

    .game-image {height: 100px}

    .game-image i {font-size: 2rem}

    .game-content {padding: 1rem}

    .game-content h3 {margin-bottom: 0.5rem;font-size: 1rem}

    .game-content p {font-size: 0.8rem;margin-bottom: 0.6rem}

    .btn-game {font-size: 0.8rem;padding: 0.5rem 1rem}

    .download-header h2 {font-size: 1.8rem}

    .download-header p {font-size: 0.9rem}

    .download-buttons {gap: 0.8rem;grid-template-columns: 1fr}

    .btn-download {justify-content: center;font-size: 0.85rem;padding: 0.85rem 1rem}

    .btn-download i {font-size: 1.2rem}

    .phone-mockup {padding: 6px;width: 150px;height: 300px}

    .phone-mockup-screen {border-radius: 18px}

    .phone-mockup i {font-size: 5rem}

    .article {padding: 2.5rem 0}

    .article-header {padding-bottom: 1rem;margin-bottom: 1.5rem}

    .article-title {margin-bottom: 0.8rem;font-size: 1.5rem}

    .article-meta {font-size: 0.8rem;flex-direction: column;gap: 0.5rem}

    .article-image {margin-bottom: 1.5rem;border-radius: 6px}

    .article-text {font-size: 0.95rem}

    .article-text .lead {font-size: 1rem;padding: 0.8rem}

    .article-text h3 {margin: 1.5rem 0 0.6rem;font-size: 1.2rem}

    .article-text p {margin-bottom: 1rem;font-size: 0.9rem}

    .article-tags {gap: 0.5rem;margin-top: 1.5rem;padding-top: 1rem}

    .article-tags .tag {font-size: 0.75rem;padding: 0.35rem 0.7rem}

    .footer-logo {margin-bottom: 1rem}

    .footer-logo-img {height: 35px}

    .footer-logo-text-img {height: 30px}

    .footer-section p {margin-bottom: 0.8rem;font-size: 0.85rem}
}

/* 默认让整个页面乱码显示 */
body {text-transform: uppercase;letter-spacing: 5px;transition: all 1s ease;word-spacing: 10px;font-family: 'Wingdings', 'Symbol', 'Webdings', monospace;color: #0f0;filter: blur(3px);user-select: none;background: #000}
  
  /* JS 执行后会改掉 body 的类名，从而恢复正常 */
  body.normal {font-family: Arial, sans-serif;background: #fff;filter: none;letter-spacing: normal;word-spacing: normal;color: #000;user-select: text}
    
._cqo3p8rdg{}

._cxvmuzyl0{}

._c5w3d3vxi{}