/* ========================================
   Steam租号系统 - 移动端专用样式 v4.0 (极致紧凑版)
   ======================================== */

@media (max-width: 768px) {
    /* --- 基础重置 --- */
    html {
        font-size: 13px !important;
    }

    body {
        background-color: #f4f6f8;
        padding-top: 48px;
        overflow-x: hidden;
    }

    /* 打开汉堡菜单时禁止页面滚动（JS会切换该class） */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    .container, .container.nav-container {
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- 导航栏 --- */
    .navbar {
        height: 48px !important;
        background: #1a2332 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        border-bottom: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
    }

    .nav-brand {
        color: #ffffff !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .nav-brand .brand-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 4px !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        clip-path: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        width: 40px !important;
        height: 40px !important;
        border: none !important;
        background: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

    .mobile-menu-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    .nav-menu {
        display: none !important;
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        right: 0 !important;
        background: #2c3e50 !important;
        border-bottom: 2px solid #c9a961 !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        flex-direction: column !important;
        z-index: 999 !important;
    }

    .nav-menu.show {
        display: flex !important;
    }

    .nav-menu .nav-link {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding: 12px 16px !important;
        font-size: 1rem !important;
        border-radius: 0 !important;
        clip-path: none !important;
        background: none !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* --- 全局SVG修复 --- */
    svg {
        max-width: 100% !important;
    }

    /* --- Hero & 输入区 (更紧凑) --- */
    .hero-section {
        padding: 10px 0 8px !important;
        min-height: auto !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e7ecf0 !important;
    }

    .hero-title {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
        color: #1a2332 !important;
        text-align: center !important;
    }

    .hero-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        color: #64748b !important;
        text-align: center !important;
    }

    .card-input-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 4px !important;
    }

    .input-wrapper {
        flex: 1 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .card-input {
        height: 40px !important;
        font-size: 14px !important;
        padding: 0 10px 0 32px !important;
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
        color: #000 !important;
        box-shadow: none !important;
        clip-path: none !important;
        border-radius: 6px !important;
        width: 100% !important;
    }

    .input-icon {
        left: 8px !important;
        width: 16px !important;
        height: 16px !important;
        color: #64748b !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .btn-primary {
        width: auto !important;
        min-width: 80px !important;
        height: 40px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        clip-path: none !important;
        border-radius: 6px !important;
        background: #c9a961 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* --- 注意事项 (2列布局) --- */
    .notices-section {
        padding: 8px 0 !important;
        background: none !important;
        margin-top: 0 !important;
    }

    .notices-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 强制2列 */
        gap: 6px !important;
        margin-top: 6px !important;
    }

    .notice-card {
        padding: 8px !important;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        border-radius: 6px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 40px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    .notice-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        border-radius: 4px !important;
        padding: 4px !important;
    }

    .notice-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .notice-title {
        font-size: 0.75rem !important;
        margin: 0 !important;
        color: #334155 !important;
        line-height: 1.2 !important;
    }

    .notice-desc, .notice-arrow {
        display: none !important;
    }

    /* “继续租用老账号”展开教程：移动端彻底压缩，避免占用过多空间 */
    .rent-old-guide {
        margin-top: 8px !important;
    }

    .rent-old-guide .guide-card {
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        clip-path: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
        overflow: hidden !important;
    }

    .guide-header-bar {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    .guide-steps-list {
        padding: 10px !important;
        gap: 10px !important;
    }

    .guide-step {
        gap: 8px !important;
    }

    .step-marker {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
        box-shadow: none !important;
    }

    .step-title {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }

    .step-desc {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .guide-tip {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* 移动端：压缩“使用教程”区块本身的上下留白（style.css 默认 5rem 太大） */
    .tutorial-section {
        padding: 8px 0 12px !important;
        background: none !important;
    }

    /* --- 使用教程 (折叠面板) --- */
    .collapsible-panel {
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        border-radius: 6px !important;
        margin-bottom: 8px !important;
        overflow: hidden !important;
    }

    .collapsible-header {
        padding: 8px 12px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    .collapsible-header h3 {
        font-size: 0.9rem !important;
        color: #1e293b !important;
        margin: 0 !important;
        font-weight: 600 !important;
    }

    .collapsible-arrow {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        flex-shrink: 0 !important;
        color: #64748b !important;
        transition: transform 0.3s !important;
        display: block !important;
    }

    .collapsible-header.active .collapsible-arrow {
        transform: rotate(180deg) !important;
    }

    .collapsible-content {
        display: none;
    }
    
    .collapsible-content.active {
        display: block !important;
    }

    .collapsible-body {
        padding: 10px 12px !important;
        color: #475569 !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* 折叠面板内容：补回列表缩进（style.css 全局 * 重置导致 ul/ol 无 padding） */
    .collapsible-body ul,
    .collapsible-body ol {
        padding-left: 18px !important;
        margin: 0 !important;
        list-style-position: outside !important;
    }

    .collapsible-body ul {
        list-style: disc !important;
    }

    .collapsible-body ol {
        list-style: decimal !important;
    }

    .collapsible-body li {
        margin: 4px 0 !important;
    }

    .collapsible-body strong {
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    /* --- 使用须知：移动端 2列展示（4条不再一行一个） --- */
    #notices .collapsible-body ul {
        padding-left: 0 !important;
        list-style: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 8px !important;
    }

    #notices .collapsible-body ul li {
        margin: 0 !important;
        padding: 7px 8px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        color: #334155 !important;
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    /* --- 历史记录/过期界面 (极致压缩) --- */
    .history-section {
        padding: 10px 0 !important;
        background: none !important;
        min-height: auto !important;
    }

    .history-card {
        padding: 12px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        border: 1px solid #e2e8f0 !important;
        margin-top: 0 !important;
        clip-path: none !important;
    }

    .history-header {
        padding: 0 0 10px 0 !important;
        margin-bottom: 10px !important;
        border-bottom: 1px dashed #e2e8f0 !important;
        background: none !important;
    }
    
    .history-header::after {
        display: none !important;
    }

    .history-header h2 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
        color: #1e293b !important;
    }

    .history-header p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* 关键：清掉桌面端 history-list 的大 padding，避免空白过多 */
    .history-list {
        padding: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    .expired-status-badge {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
        border-radius: 4px !important;
        clip-path: none !important;
    }

    .expired-status-badge svg {
        width: 14px !important;
        height: 14px !important;
    }

    .expired-tip-box {
        padding: 8px !important;
        margin-top: 8px !important;
        font-size: 0.8rem !important;
        border-radius: 4px !important;
        clip-path: none !important;
        border-left-width: 3px !important;
    }

    .expired-cardkey-info {
        padding: 8px !important;
        margin-top: 8px !important;
        border-radius: 6px !important;
        clip-path: none !important;
    }

    .expired-cardkey-info .info-row {
        padding: 4px 0 !important;
    }

    .expired-cardkey-info .info-value {
        font-size: 0.85rem !important;
    }

    .btn-extend-primary {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        height: 36px !important;
        width: 100% !important;
        clip-path: none !important;
        border-radius: 6px !important;
    }

    .history-footer {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        padding: 10px 0 0 0 !important;
        border-top: none !important;
        background: none !important;
        gap: 6px !important;
    }

    .history-footer button {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        margin: 0 !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* 移动端历史页底部按钮：隐藏图标，避免占宽 */
    .history-footer button svg {
        display: none !important;
    }

    /* history-footer 内的 mobile-only/desktop-only 文本不要换行 */
    .history-footer .btn-label.mobile-only {
        display: inline !important;
    }

    .history-footer .btn-label.desktop-only {
        display: none !important;
    }

    .btn-select-account, .btn-auto-account {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        clip-path: none !important;
        border-radius: 6px !important;
    }

    .history-item {
        padding: 10px !important;
        border-radius: 6px !important;
        clip-path: none !important;
        margin-bottom: 8px !important;
    }

    .account-info {
        gap: 6px !important;
    }

    .account-username {
        font-size: 1rem !important;
    }

    .account-status {
        padding: 2px 6px !important;
        font-size: 0.7rem !important;
    }

    /* --- 游戏列表 (一行3个) --- */
    .games-section {
        padding: 8px 0 20px !important;
    }

    .section-title {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
        text-align: left !important;
        border-left: 3px solid #c9a961 !important;
        padding-left: 8px !important;
        line-height: 1.2 !important;
        color: #1e293b !important;
    }
    
    .section-title::after {
        display: none !important;
    }

    .games-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .game-card {
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        overflow: hidden !important;
        clip-path: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }

    .game-card img {
        height: 60px !important;
        width: 100% !important;
        object-fit: cover !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        clip-path: none !important;
    }

    .game-card-content {
        padding: 4px !important;
        text-align: center !important;
    }

    .game-card h3 {
        font-size: 0.7rem !important;
        margin: 0 0 2px 0 !important;
        color: #1e293b !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 600 !important;
    }

    .game-stats {
        justify-content: center !important;
        gap: 2px !important;
        flex-wrap: wrap !important;
    }

    .game-stats span {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        border-radius: 3px !important;
    }

    /* --- 底部 --- */
    .footer {
        padding: 16px 0 !important;
        margin-top: 20px !important;
        background: #1a2332 !important;
        color: #94a3b8 !important;
        border-top: none !important;
    }
    
    .footer p {
        font-size: 0.75rem !important;
    }
    
    /* 隐藏所有桌面端装饰元素 */
    .geometric-shapes, .shape, .hero-badge, .floating-element {
        display: none !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    /* 账号信息展示 (取号成功) */
    .account-section {
        padding: 10px 0 !important;
    }

    .account-card {
        padding: 0 !important;
        border-radius: 10px !important;
        clip-path: none !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
        overflow: hidden !important;
    }

    .account-card::before,
    .account-card::after {
        display: none !important;
    }

    .account-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        grid-template-columns: none !important;
    }

    .account-header::after {
        display: none !important;
    }

    .game-image {
        width: 64px !important;
        height: 64px !important;
        border-radius: 8px !important;
        clip-path: none !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .game-info {
        min-width: 0 !important;
    }

    .game-name {
        font-size: 1.05rem !important;
        margin: 0 0 4px 0 !important;
        padding-left: 0 !important;
        line-height: 1.15 !important;
    }

    .game-name::before {
        display: none !important;
    }

    .countdown-timer {
        padding: 2px 8px !important;
        font-size: 0.75rem !important;
        border-radius: 999px !important;
        clip-path: none !important;
        border-width: 1px !important;
        gap: 6px !important;
        box-shadow: none !important;
        flex-wrap: wrap !important;
    }

    .countdown-timer .timer-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .account-details {
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        grid-template-columns: none !important;
    }

    .detail-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

    .detail-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    .detail-label .label-icon {
        width: 14px !important;
        height: 14px !important;
        color: #c9a961 !important;
    }

    .detail-value {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        clip-path: none !important;
    }

    .detail-value span {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 56vw !important;
    }

    /* 邮箱/账号过长：允许在极小屏时换行显示（避免挤到看不见） */
    @media (max-width: 360px) {
        .detail-value span {
            max-width: 48vw !important;
        }
    }

    .btn-copy {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        clip-path: none !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
    }

    .btn-copy svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* 验证码区：彻底压缩，避免按钮被挤到屏幕外 */
    .verification-section {
        padding: 10px !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .verification-section::before {
        display: none !important;
    }

    .verification-guide {
        display: none !important;
        padding: 10px !important;
        border-left-width: 3px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    .guide-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .guide-title {
        font-size: 0.8rem !important;
        letter-spacing: 0.02em !important;
    }

    .guide-steps {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .step-item {
        padding: 6px !important;
        gap: 8px !important;
        transform: none !important;
    }

    .step-item:hover {
        transform: none !important;
    }

    .step-number {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.75rem !important;
        box-shadow: none !important;
    }

    .step-text {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    .verification-content {
        padding: 10px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    .verification-header {
        margin-bottom: 10px !important;
    }

    .verification-title {
        font-size: 0.95rem !important;
        padding-bottom: 8px !important;
        border-bottom-width: 1px !important;
        margin: 0 !important;
    }

    .verification-code-wrapper {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .verification-code {
        padding: 12px 10px !important;
        min-height: 64px !important;
        border-width: 1px !important;
        border-radius: 10px !important;
    }

    /* 压住 main.js 里验证码 32px 的 inline 样式（移动端太大） */
    #verificationCode > span:not(.code-placeholder) {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .code-placeholder {
        font-size: 0.8rem !important;
        gap: 8px !important;
    }

    /* 验证码错误/成功详情：移动端更紧凑，避免“红色提示重叠/太大” */
    .error-detail,
    .success-detail {
        padding: 10px !important;
        border-radius: 10px !important;
        line-height: 1.35 !important;
    }

    .error-title,
    .success-title {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    .error-desc,
    .success-desc {
        font-size: 0.82rem !important;
        margin-bottom: 6px !important;
    }

    .error-steps {
        margin: 6px 0 !important;
    }

    .error-step {
        font-size: 0.8rem !important;
        padding: 4px 0 !important;
        padding-left: 14px !important;
        margin-left: 6px !important;
        line-height: 1.3 !important;
        border-left-width: 2px !important;
    }

    .error-step::before {
        top: 8px !important;
        width: 7px !important;
        height: 7px !important;
        left: -5px !important;
    }

    .error-tip {
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        margin-top: 6px !important;
    }

    /* 取号页红色错误条：移动端不再占太多高度 */
    .error-message {
        padding: 8px 10px !important;
        margin: 8px auto 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
        border-width: 1px !important;
        border-left-width: 3px !important;
        clip-path: none !important;
        border-radius: 8px !important;
        word-break: break-word !important;
    }

    /* 取号成功 toast：移动端改到底部居中，宽度自适应 */
    .toast {
        left: 50% !important;
        right: auto !important;
        bottom: 16px !important;
        top: auto !important;
        transform: translate(-50%, 10px) !important;
        max-width: calc(100vw - 20px) !important;
        width: max-content !important;
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
        clip-path: none !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .toast.show {
        transform: translate(-50%, 0) !important;
    }

    .code-placeholder svg {
        width: 18px !important;
        height: 18px !important;
    }

    .verification-actions {
        gap: 8px !important;
    }

    .btn-main {
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 0.95rem !important;
    }

    .btn-group-secondary {
        flex-direction: row !important;
        gap: 8px !important;
    }

    .btn-secondary,
    .btn-outline {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        clip-path: none !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .btn-small {
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 0.85rem !important;
    }

    /* 账号底部按钮：去掉大 padding，改为紧凑纵向 */
    .account-footer {
        padding: 10px !important;
        gap: 8px !important;
        flex-direction: row !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .account-footer .btn-primary,
    .account-footer .btn-outline {
        width: auto !important;
        flex: 1 1 0 !important;
        height: 38px !important;
        padding: 0 12px !important;
        min-width: 0 !important;
    }

    /* 游戏卡片：标题更大，描述更小（避免“描述比标题大”） */
    .game-card-title {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        margin: 4px 0 2px 0 !important;
        color: #0f172a !important;
    }

    .game-card-desc {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        margin: 0 0 6px 0 !important;
        color: #64748b !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .game-card-stats {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        margin-top: 0 !important;
    }

    .stat-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 2px 6px !important;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }

    .stat-value {
        color: #c9a961 !important;
        font-weight: 800 !important;
    }

    /* 页脚：提高对比度，确保可读 */
    .footer {
        background: #0b1220 !important;
        color: #cbd5e1 !important;
    }

    .footer p,
    .footer .footer-note {
        color: #e2e8f0 !important;
        opacity: 0.95 !important;
    }
}

/* 超小屏适配 */
@media (max-width: 360px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}