/* 基础样式 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0iTTAgMCBMMTAwIDEwMCBNMTAwIDAgTDAgMTAwIiBzdHJva2U9IiNlMmU4ZjAiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
    background-color: #faf6f1;
}

/* 游戏容器样式 */
.game-container {
    min-height: 800px;
    background: linear-gradient(135deg, rgba(54, 209, 196, 0.95) 0%, rgba(91, 134, 229, 0.95) 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
    position: relative;
    overflow: hidden;
}

.game-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTAgMCBMMTAwIDEwMCBNMTAwIDAgTDAgMTAwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMC41IiBvcGFjaXR5PSIwLjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
    opacity: 0.1;
}

/* 头部渐变样式 */
.header-gradient {
    background: linear-gradient(135deg, #36d1c4 0%, #5b86e5 100%);
    position: relative;
    overflow: hidden;
}

.header-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTAgMCBMMTAwIDEwMCBNMTAwIDAgTDAgMTAwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMC41IiBvcGFjaXR5PSIwLjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
    opacity: 0.1;
    pointer-events: none;
}

/* 文字阴影 */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.15);
}

/* Logo样式 */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.08);
}

.logo svg {
    width: 85px;
    height: 85px;
}

.logo-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 2rem;
    color: #1E293B;
    font-weight: bold;
    letter-spacing: 2px;
}

.logo-text {
    color: inherit;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    position: relative;
}

.logo-text::after {
    display: none;
}

.logo-footer svg {
    width: 75px;
    height: 75px;
}

/* 中国风边框 */
.chinese-border {
    border: 2px solid #FFD700;
    border-radius: 8px;
    position: relative;
}

.chinese-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    pointer-events: none;
}

.chinese-pattern {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHBhdGggZD0iTTAgMCBMMTAwIDEwMCBNMTAwIDAgTDAgMTAwIiBzdHJva2U9IiNGRkQ3MDAiIHN0cm9rZS13aWR0aD0iMC41IiBvcGFjaXR5PSIwLjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
}

/* 响应式设计 */
@media (max-width: 768px) {
    .game-container {
        min-height: 500px;
    }
}

/* 标题样式 */
h1 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 4px 16px rgba(0,0,0,0.38);
}

h2, h3 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 动画关键帧 */
@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes float2 {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(15px) rotate(-10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* 麻将SVG背景 */
.mahjong-svg-bg {
    position: absolute;
    z-index: 0;
    opacity: 0.18;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mahjong-svg-1 {
    top: 30px;
    left: 5vw;
    width: 90px;
    height: 90px;
    animation: float 6s ease-in-out infinite;
}

.mahjong-svg-2 {
    top: 120px;
    right: 8vw;
    width: 70px;
    height: 70px;
    animation: float2 7s ease-in-out infinite;
}

.mahjong-svg-3 {
    bottom: 40px;
    left: 12vw;
    width: 60px;
    height: 60px;
    animation: float2 8s ease-in-out infinite;
}

.mahjong-svg-4 {
    bottom: 80px;
    right: 10vw;
    width: 100px;
    height: 100px;
    animation: float 9s ease-in-out infinite;
}

/* 游戏占位符样式 */
#game-placeholder {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* 加载动画 */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}