/* ============================================================
   Game Center v2 · 玫红夜空主题 (与 index 同色谱)
   置于 game-center.css 之后, 用 !important 压旧版浅薄荷皮
   ============================================================ */

:root {
    --acg-bg-1: #2A0F1F;
    --acg-bg-2: #3A1228;
    --acg-bg-deep: #1A0610;
    --acg-surface: #C25578;
    --acg-surface-hi: #DC6E92;
    --acg-gold: #E8B79A;
    --acg-gold-light: #FFC09F;
    --acg-gold-soft: #FAD4C0;
    --acg-rose: #FF8FA3;
    --acg-rose-deep: #C44569;
    --acg-text-1: #FFF0E0;
    --acg-text-2: #E8B7A8;
    --acg-border: rgba(255, 192, 159, 0.32);
    --acg-border-strong: rgba(255, 192, 159, 0.55);
}

/* —— 页面底色: 玫红夜空 —— */
html.app-dark,
html.app-dark body,
html.app-dark .main-container {
    background: var(--acg-bg-1) !important;
    color: var(--acg-text-1) !important;
}

html.app-dark body {
    background:
        radial-gradient(110% 45% at 50% 0%, rgba(255, 90, 160, 0.22) 0%, transparent 60%),
        radial-gradient(60% 35% at 92% 18%, rgba(255, 143, 181, 0.20) 0%, transparent 55%),
        radial-gradient(80% 40% at 30% 50%, rgba(200, 70, 115, 0.16) 0%, transparent 60%),
        radial-gradient(70% 38% at 95% 95%, rgba(130, 35, 65, 0.22) 0%, transparent 60%),
        linear-gradient(180deg, #1A0610 0%, #2A0F1F 30%, #3A1228 60%, #2A0F1F 90%, #1A0610 100%) !important;
}

/* —— 背景装饰: 与首页(推荐页)同款挂件分布 —— 玫瑰×2 / 蝴蝶×2 / 月 / 缎带 / 羽毛 + 星点 —— */
html.app-dark .main-container::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/butterfly.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/butterfly.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/moon.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/ribbon-bow.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/feather.svg');
    background-repeat: no-repeat;
    background-position: 93% 91%, 5% 78%, 10% 32%, 88% 50%, 91% 13%, 6% 8%, 94% 70%;
    background-size: 58px, 44px, 36px, 30px, 48px, 30px, 22px;
    opacity: 0.5;
    animation: acgV2Float 18s ease-in-out infinite;
}

html.app-dark .main-container::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg');
    background-repeat: no-repeat;
    background-position: 22% 20%, 78% 28%, 48% 38%, 18% 55%, 82% 68%, 36% 74%, 62% 10%, 52% 88%;
    background-size: 22px, 20px, 12px, 14px, 11px, 13px, 10px, 12px;
    opacity: 0.55;
    animation: acgV2Twinkle 3.6s ease-in-out infinite;
}

@keyframes acgV2Float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes acgV2Twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* —— 顶部 header (logo + 搜索) —— 与首页同步 */
html.app-dark #headerTitle,
html.app-dark .header_menu,
html.app-dark .header_first_line,
html.app-dark .js_login_info {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 2;
}

/* 搜索栏: 玻璃质感 + 蜜桃金描边 */
html.app-dark .header_menu .header_search {
    background: rgba(74, 42, 64, 0.72) !important;
    border: 1px solid var(--acg-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(139, 44, 63, 0.28) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--acg-text-2) !important;
}
html.app-dark .header_menu .header_search .search-placeholder,
html.app-dark .header_menu .header_search .search-text,
html.app-dark .header_menu .header_search input {
    color: var(--acg-text-2) !important;
}
html.app-dark .header_menu .header_search .search-icon {
    opacity: 1;
    filter: none;
}

/* 福利按钮: 玫瑰金渐变胶囊 */
html.app-dark .header_menu .fuli_btn {
    background: linear-gradient(135deg, rgba(255, 192, 159, 0.85) 0%, rgba(255, 143, 163, 0.85) 100%) !important;
    border: 1px solid var(--acg-border-strong) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.4) !important;
}

/* —— 内容分栏容器 (覆盖原 #fff / #f8f9ff 浅底) —— */
html.app-dark .gc-split {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* —— 游戏列表 grid 透明 —— */
html.app-dark .game-list,
html.app-dark .gc-split .game-list {
    background: transparent !important;
    background-color: transparent !important;
}

/* —— 左侧竖向分类栏 —— */
html.app-dark #navigation {
    background: rgba(45, 16, 24, 0.72) !important;
    border-right: 1px solid var(--acg-border) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

html.app-dark .gc-split .tag-nav-wrapper,
html.app-dark .gc-split .tag-nav {
    background: transparent !important;
}

html.app-dark .gc-split .tag-link {
    background: transparent !important;
    color: var(--acg-text-2) !important;
    border-left-color: transparent !important;
    transition: background .18s ease, color .18s ease !important;
}

html.app-dark .gc-split .tag-link:hover {
    background: rgba(255, 192, 159, 0.08) !important;
}

html.app-dark .gc-split .tag-link.active {
    background: linear-gradient(90deg, rgba(255, 143, 163, 0.20) 0%, rgba(196, 69, 105, 0.10) 100%) !important;
    color: var(--acg-text-1) !important;
    border-left: 0.28rem solid transparent !important;
    border-image: linear-gradient(180deg, var(--acg-gold-light) 0%, var(--acg-rose) 50%, var(--acg-rose-deep) 100%) 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 6px rgba(196, 69, 105, 0.55);
    position: relative;
}

/* —— 右栏标题 + 筛选 —— */
html.app-dark #games.games-section {
    background: transparent !important;
}

html.app-dark .games-section h2,
html.app-dark .games-header #section-title {
    color: var(--acg-text-1) !important;
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    text-shadow: 0 2px 8px rgba(196, 69, 105, 0.5), 0 0 16px rgba(255, 143, 163, 0.3);
}

/* 筛选按钮 */
html.app-dark .games-header .filter-container {
    background: linear-gradient(135deg, rgba(255, 192, 159, 0.18) 0%, rgba(255, 143, 163, 0.14) 100%) !important;
    border: 1px solid var(--acg-border) !important;
    box-shadow: 0 2px 8px rgba(139, 44, 63, 0.3);
}
html.app-dark .filter-button,
html.app-dark .filter-text {
    color: var(--acg-text-1) !important;
}

/* 黑色 filter-icon.png 反色 + 蜜桃金调 (避免在暗底上看不见) */
html.app-dark .filter-button img,
html.app-dark .games-header .filter-container img {
    filter: brightness(0) invert(1) sepia(0.5) saturate(450%) hue-rotate(320deg) brightness(1.05) !important;
    opacity: 0.95;
}

/* 筛选弹窗：深酒红夜空底，统一到首页暗夜玫瑰，与其他弹窗一致(不用樱花亮粉 surface-hi/surface) */
html.app-dark .filter-modal-panel {
    background: linear-gradient(165deg, var(--acg-bg-2) 0%, var(--acg-bg-1) 100%) !important;
    border: 1px solid var(--acg-border-strong) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 192, 159, 0.18) !important;
}
html.app-dark .filter-modal-header {
    border-bottom: 1px solid var(--acg-border) !important;
}
html.app-dark .filter-modal-input {
    background: rgba(58, 18, 40, 0.7) !important;
    color: var(--acg-text-1) !important;
    border: 1px solid var(--acg-border) !important;
}
html.app-dark .filter-modal-input::placeholder {
    color: var(--acg-text-2) !important;
    opacity: 0.7;
}
html.app-dark .filter-modal-close {
    background: rgba(58, 18, 40, 0.6) !important;
    border: 1px solid var(--acg-border) !important;
}
html.app-dark .filter-modal-subtitle { color: var(--acg-text-1) !important; }
html.app-dark .filter-chip {
    background: rgba(58, 18, 40, 0.55) !important;
    color: var(--acg-text-1) !important;
    border: 1px solid var(--acg-border) !important;
}
html.app-dark .filter-chip.active {
    background: linear-gradient(135deg, #FAD4C0 0%, #FF8FA3 60%, #C44569 100%) !important;
    color: #2D1018 !important;
    border: 1px solid var(--acg-gold-light) !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.4);
}

/* 弹窗底部 footer (原 #fff 白底 → 透明融入面板) */
html.app-dark .filter-modal-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--acg-border) !important;
}

html.app-dark .filter-btn.confirm {
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 25%, #FF8FA3 55%, #C44569 85%, #6B1A2F 100%) !important;
    color: #2D1018 !important;
    font-weight: 800;
    border: 1px solid rgba(244, 212, 168, 0.85) !important;
    box-shadow: 0 4px 14px rgba(255, 107, 138, 0.45);
}
html.app-dark .filter-btn.reset {
    background: rgba(58, 18, 40, 0.75) !important;
    color: var(--acg-text-1) !important;
    border: 1px solid var(--acg-border) !important;
}

/* 弹窗内部滚动条 */
html.app-dark .filter-modal-results::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--acg-gold) 0%, var(--acg-rose) 100%) !important;
}
html.app-dark .filter-modal-results::-webkit-scrollbar-track {
    background: rgba(58, 18, 40, 0.4) !important;
}

/* —— 游戏卡片 —— */
html.app-dark .game-card {
    background: linear-gradient(180deg, var(--acg-surface-hi) 0%, var(--acg-surface) 100%) !important;
    border: 1px solid var(--acg-border) !important;
    box-shadow:
        0 6px 20px rgba(139, 44, 63, 0.4),
        inset 0 1px 0 rgba(255, 192, 159, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden;
    transition: transform 0.18s ease;
}
html.app-dark .game-card-link:active .game-card {
    transform: scale(0.97);
}

/* 卡片图片占位 */
html.app-dark .card-banner {
    background-color: var(--acg-bg-2) !important;
}

/* 左上角徽标 (tag_name) */
html.app-dark .card-badge {
    background: linear-gradient(135deg, rgba(196, 69, 105, 0.85) 0%, rgba(74, 24, 40, 0.92) 100%) !important;
    color: var(--acg-text-1) !important;
    border: 1px solid var(--acg-border-strong);
    box-shadow: 0 2px 6px rgba(139, 44, 63, 0.5);
}

/* 卡片内容区 */
html.app-dark .card-content {
    background: transparent !important;
}

/* 卡片标题 */
html.app-dark .card-title {
    color: var(--acg-text-1) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(80, 20, 50, 0.4);
    font-weight: 700 !important;
}

/* 卡片描述 (3 列下原本隐藏, 2 列下可能显示) */
html.app-dark .card-desc {
    color: var(--acg-text-2) !important;
}

/* 分类 (原紫色 #7C3AED → 蜜桃金) */
html.app-dark .card-cat {
    color: var(--acg-gold-light) !important;
    text-shadow: 0 0 6px rgba(255, 192, 159, 0.4);
}

/* 大小 */
html.app-dark .card-size {
    color: var(--acg-text-2) !important;
}

/* "去玩" 按钮: 移除, 整张卡可点 */
html.app-dark .card-play {
    display: none !important;
}

/* —— 卡片重设计: 图片铺满整卡, 文字悬浮底部, 渐变蒙版 —— */
html.app-dark .game-card {
    position: relative !important;
    aspect-ratio: 4 / 5;
    overflow: hidden !important;
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.32s ease;
    animation: acgCardFadeIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* 入场: 错峰 fade-in */
html.app-dark .game-card-link:nth-child(2n)   .game-card { animation-delay: 0.06s; }
html.app-dark .game-card-link:nth-child(3n)   .game-card { animation-delay: 0.12s; }
html.app-dark .game-card-link:nth-child(4n)   .game-card { animation-delay: 0.18s; }
html.app-dark .game-card-link:nth-child(5n)   .game-card { animation-delay: 0.24s; }
html.app-dark .game-card-link:nth-child(6n)   .game-card { animation-delay: 0.30s; }

/* 悬浮 / 点击反馈 */
html.app-dark .game-card-link:hover .game-card {
    transform: translateY(-4px) scale(1.015);
    box-shadow:
        0 14px 32px rgba(255, 107, 138, 0.5),
        0 0 0 1px var(--acg-gold-light) !important;
}
html.app-dark .game-card-link:active .game-card {
    transform: scale(0.97);
    transition-duration: 0.12s;
}

/* 图片区: 绝对定位铺满整卡 */
html.app-dark .card-media {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
    border-radius: 14px !important;
}
html.app-dark .card-banner {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
html.app-dark .game-card-link:hover .card-banner {
    transform: scale(1.08);
}

/* 角标: 漂浮 + 提到图片之上 */
html.app-dark .card-badge {
    z-index: 3;
    animation: acgBadgeFloat 3.6s ease-in-out infinite;
}

/* 内容区: 绝对定位悬浮在图片底部, 透明 + 渐变蒙版 */
html.app-dark .card-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 36px 12px 10px !important;
    gap: 3px !important;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(20, 5, 12, 0.35) 35%,
        rgba(20, 5, 12, 0.78) 70%,
        rgba(20, 5, 12, 0.95) 100%) !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 标题: 暖白 + 强阴影 */
html.app-dark .card-title {
    color: #FFF0E0 !important;
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(80, 20, 50, 0.55) !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 简介隐藏: features 字段常与标题重复, 显示冗余 */
html.app-dark .gc-split .card-desc,
html.app-dark .card-desc {
    display: none !important;
}

/* meta 行: 分类胶囊 + 大小 */
html.app-dark .card-meta {
    margin-top: 4px !important;
    gap: 6px !important;
    align-items: center;
}
html.app-dark .card-cat {
    color: var(--acg-gold-light) !important;
    background: rgba(255, 192, 159, 0.18);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem !important;
    text-shadow: 0 0 4px rgba(255, 192, 159, 0.4);
    border: 1px solid rgba(255, 192, 159, 0.3);
}
html.app-dark .card-size {
    color: rgba(255, 220, 200, 0.78) !important;
    font-size: 0.7rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* 关键帧 */
@keyframes acgCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes acgBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    html.app-dark .game-card,
    html.app-dark .card-banner,
    html.app-dark .card-badge {
        animation: none !important;
        transition: none !important;
    }
}

/* —— 底部 nav (推荐/分类/速玩/日常/我的) —— */
/* —— 底部 nav: 与首页(推荐页)完全一致 —— 玻璃底 + 激活态玫红光晕 —— */
html.app-dark .bottom-nav {
    background: rgba(45, 16, 24, 0.85) !important;
    border-top: 1px solid var(--acg-border) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 16px rgba(139, 44, 63, 0.35) !important;
}
html.app-dark .bottom-nav .nav-label {
    color: var(--acg-text-2) !important;
    transition: color 0.18s ease;
}
html.app-dark .bottom-nav .nav-item.active .nav-label {
    color: var(--acg-rose) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 143, 163, 0.6);
}
html.app-dark .bottom-nav .nav-item .nav-icon {
    transition: transform 0.18s ease;
}
html.app-dark .bottom-nav .nav-item.active .nav-icon {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 0 8px rgba(255, 143, 163, 0.55));
}
html.app-dark .bottom-nav .nav-item.active .nav-icon img {
    filter: drop-shadow(0 0 6px rgba(255, 143, 163, 0.55));
}

/* icon 着色: 非激活降饱和, 激活恢复 + 玫红色调滤镜 */



/* —— 加载/空状态 —— */
html.app-dark .loading-indicator,
html.app-dark .empty-text {
    color: var(--acg-text-2) !important;
}
html.app-dark .loading-spinner {
    border-color: var(--acg-bg-2) !important;
    border-top-color: var(--acg-rose) !important;
}

/* —— 滚动条 —— */
html.app-dark .game-list::-webkit-scrollbar-thumb,
html.app-dark .gc-split .tag-nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--acg-gold) 0%, var(--acg-rose) 100%) !important;
}

/* —— 可访问: reduced-motion —— */
@media (prefers-reduced-motion: reduce) {
    html.app-dark .main-container::before,
    html.app-dark .main-container::after {
        animation: none !important;
    }
}