/* ============ 全局基础样式 ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============ 标题字体 ============ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
}

/* ============ 头部区域背景 ============ */
#hero {
    background: radial-gradient(ellipse at center, #f97316 0%, #ea580c 40%, #c2410c 70%, #9a3412 100%);
}

.hero-overlay {
    background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.3) 0%, rgba(154, 52, 18, 0.7) 100%);
}

.bg-gradient-radial {
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
}

/* ============ 卡牌样式 ============ */
.card-cell {
    perspective: 800px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.card-inner {
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-cell.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.card-front {
    background-color: #fff7ed;
    border: 2px solid #fed7aa;
    color: #9a3412;
    font-size: 0.85rem;
    padding: 0.25rem;
    text-align: center;
    word-break: break-all;
    font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
}

.card-front:hover {
    border-color: #fb923c;
}

.card-back {
    transform: rotateY(180deg);
    color: white;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.25rem;
    word-break: break-all;
    font-family: 'Noto Serif SC', 'Noto Sans SC', serif;
}

/* 身份颜色 */
.card-back.identity-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 2px solid #b91c1c;
}

.card-back.identity-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 2px solid #1d4ed8;
}

.card-back.identity-bystander {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border: 2px solid #a16207;
}

.card-back.identity-assassin {
    background: linear-gradient(135deg, #374151, #111827);
    border: 2px solid #000;
}

/* ============ 规则卡片样式 ============ */
.rule-card {
}

/* ============ 复制按钮反馈 ============ */
#copy-feedback.show {
    opacity: 1;
}

/* ============ 滚动条美化 ============ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============ 响应式调整 ============ */
@media (max-width: 640px) {
    .card-front {
        font-size: 0.7rem;
    }
    .card-back {
        font-size: 0.65rem;
    }
    #board {
        gap: 0.4rem;
    }
}

@media (min-width: 768px) {
    .card-front {
        font-size: 1rem;
    }
    .card-back {
        font-size: 0.9rem;
    }
}