@charset "utf-8";
       /* 全局样式重置（匹配目标网站极简风格） */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
            font-weight: lighter;
        }

        /* 黑灰色背景核心样式 */
        body {
            background-color: #222; /* 黑灰色主背景 */
            color: #e0e0e0; /* 浅灰文字，保证可读性 */
            line-height: 1.7;
            padding: 5px;
        }

        /* 核心修改：最大宽度改为90%，适配不同屏幕 */
        .container {
            /* max-width: 90%; */
            min-width: 320px; /* 保证小屏设备最小宽度，避免过窄 */
            margin: 0 auto;
            background: #333; /* 容器深灰，与背景区分 */
            padding: 25px 20px;
            border: none;
            border-radius: 3px;
        }

        .page-title {
            text-align: center;
            font-size: 24px;
            color: #e0e0e0; 
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 1px solid #444; /* 深灰边框 */
            font-weight: normal;
        }

        .joke-content {
            font-size: 18px;
            color: #e5e5e5; /* 浅灰文字 */
            min-height: 90px;
            /* display: flex;*/
            align-items: center;
            justify-content: center;
            padding: 18px 15px;
            margin-bottom: 25px;
            background-color: #3a3a3a; /* 内容区深灰 */
            border-radius: 5px;
            border: 1px solid #e0e0e0; /* 深灰边框 */
        }

        .btn-group {
            display: flex;
            justify-content: center;
            gap: 10%;
            margin-bottom: 35px;
        }

        /* 核心修改：暗红色按钮 + 抖动动画 */
        .joke-btn {
            padding: 10px 35px;
            font-size: 15px;
            color: #fff;
            background-color: #c82506; /* 暗红色主色 */
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.2s;
            /* 防止动画时文字模糊 */
            transform-origin: center;
        }

        /* 鼠标hover：加深红色 + 抖动动画 */
        .joke-btn:hover {
            background-color: #b02005; /* 更深的暗红色 */
            animation: shake 0.3s ease-in-out; /* 抖动动画 */
        }

        .joke-btn:active {
            background-color: #9c1d04; /* 点击时更深的红色 */
        }
        a {
            color: #ffffff; 
            text-decoration: none;
        }

        /* 定义抖动动画关键帧 */
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(0); }
            75% { transform: translateX(3px); }
            100% { transform: translateX(0); }
        }

        .empty-tip {
            color: #999; /* 中灰提示文字 */
            font-style: normal;
            font-size: 18px;
        }

        .recommend-section {
            margin-top: 15px;
            border-top: 1px solid #444; /* 深灰分隔线 */
            padding-top: 20px;
        }

        .recommend-title {
            font-size: 18px;
            color: #c82506; /* 暗红色标题，与按钮呼应 */
            margin-bottom: 12px;
            font-weight: normal;
        }

        .recommend-list {
            list-style: none;
            display: grid;
            gap: 10px;
        }

        .recommend-item {
            padding: 8px 12px;
            background-color: #3a3a3a; /* 推荐项深灰背景 */
            border-radius: 2px;
            border: 1px solid #444; /* 深灰边框 */
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .recommend-item:hover {
            background-color: #444; /* hover时加深背景 */
           /*  border-color: #c82506; hover时暗红色边框 */
        }

        .recommend-link {
            text-decoration: none;
            color: #e0e0e0; /* 浅灰链接文字 */
            font-size: 16px;
            display: block;
        }

        .recommend-link:hover {
            color: #c82506; /* 暗红色hover */
        }

        /* 响应式优化：大屏设备限制最大宽度不超过1200px（可选） */
        @media (min-width: 1200px) {
            .container {
                max-width: 1080px; /* 大屏下最大宽度为1200×90%=1080px，比例匹配 */
            }
        }

        /* 版权信息样式 */
        .copyright {
            margin: 30px auto 20px;
            text-align: center;
            font-size: 14px;
            color: #525050;
            padding-top: 20px;
            border-top: 1px solid #444;
            max-width: 1080px;
        }

        .copyright a {
            color: #525050;
            /* text-decoration: underline; */
        }

        .copyright a:hover {
            color:#525050;
        }