/* 通用样式 - 所有页面共用 */

/* 首页 Hero 免费试用角标（不依赖 Tailwind brand-yellow） */
.qfgame-hero-free-trial-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transform: translateY(-50%) translateX(25%);
    background-color: #facc15;
    color: #111827;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

/* 基础字体 */
body {
    font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

/* Footer 下载图标 */
.footer-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: #3b82f6;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-download-icon:hover {
    background-color: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
    transform: translateY(-2px);
}

/* Footer 社交图标 */
.footer-social-icon {
    background-color: #2d3748;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.footer-social-icon:hover {
    background-color: #3b82f6;
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* Alpine.js 隐藏 */
[x-cloak] {
    display: none !important;
}

/* 读屏专用文案（分页「上一页」等） */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* 通用分页样式 - 匹配游戏列表页样式 */
nav.flex.items-center.space-x-2 > a,
nav.flex.items-center.space-x-2 > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: #374151;
    color: #d1d5db;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    min-width: 2.5rem;
    height: 2.5rem;
}

nav.flex.items-center.space-x-2 > a:hover {
    background-color: #3b82f6;
    color: white;
}

nav.flex.items-center.space-x-2 > span.bg-brand-blue {
    background-color: #3b82f6 !important;
    color: white !important;
}

nav.flex.items-center.space-x-2 > span.text-gray-500 {
    background-color: transparent !important;
    color: #6b7280 !important;
    padding: 0.5rem 1rem;
}

/* 统一所有容器的 box-sizing，确保宽度计算一致 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 限制网页最大宽度为1300px - 仅桌面端 */
@media (min-width: 769px) {
    .container,
    .container.mx-auto,
    nav.container,
    header .container,
    footer .container,
    main .container,
    section .container,
    article .container,
    div.container,
    .container.px-6,
    .container.mx-auto.px-6 {
        max-width: 1300px !important;
    }
}

/* 缩小所有页面的左右间距，参考 test.liveat.online 的间距 */
/* 将默认的 px-6 (1.5rem) 缩小到 px-4 (1rem)，让内容更接近边缘 */
/* 仅应用于桌面端，移动端保持原有间距 */
/* 使用最高优先级的选择器来覆盖 Tailwind 的 utility 类 */
@media (min-width: 769px) {
    /* 方法1: 覆盖所有包含 px-6 类的元素（使用属性选择器） */
    [class*="px-6"],
    [class*=" px-6"],
    [class*="px-6 "] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 方法2: 覆盖所有容器的 padding */
    .container,
    .container.mx-auto,
    .container.mx-auto.px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 方法3: 特别针对页眉和页脚 */
    header nav.container.mx-auto.px-6,
    header .container.mx-auto.px-6,
    footer .container.mx-auto.px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 方法4: 覆盖所有可能的组合 */
    .container.px-6,
    nav.container.px-6,
    div.container.px-6,
    section .container.px-6,
    main .container.px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* 首页 / 专题页三列攻略矩阵：文章标题单行省略 */
.qfgame-jsq-matrix-link {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 首页最新资讯：卡片主标题单行省略，保证各行对齐 */
.qfgame-home-news-title {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.75rem;
    min-height: 1.75rem;
}