@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=ZCOOL+KuaiLe&display=swap');

:root {
    --primary-red: #d32f2f;
    --dark-red: #b71c1c;
    --gold: #ffd700;
    --orange: #ff9800;
    --deep-orange: #f57c00;
    --cream: #fff8e1;
    --blue-banner: #1a237e;
    --text-dark: #333;
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }

body {
    font-family: "FangSong", "STFangsong", "SimSun", "STSong", "Microsoft YaHei", serif;
    background: #c62828;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-dark);
}

.container {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    padding-bottom: 20px;
}

/* Common Components */
.page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 9999;
}
.toast.show { opacity: 1; }

/* 1. Landing Page Styles (Refactored) */
.landing-page {
    padding: 0;
    /* 多层背景叠加：红色渐变 + 古风纹理 + 顶部灯笼装饰 */
    background: 
        url('../../logo/bjt2.jpg') no-repeat center top/cover, /* 顶部主视觉图 */
        radial-gradient(circle at 50% 30%, rgba(255, 235, 59, 0.1) 0%, transparent 40%), /* 中心光晕 */
        linear-gradient(180deg, #d32f2f 0%, #b71c1c 40%, #8e0000 100%); /* 红色背景渐变 */
    background-blend-mode: normal, screen, normal;
    overflow-y: auto;
    display: block;
}

/* 增加背景纹理 */
.app-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: url("../../logo/bjt2.jpg") no-repeat center top/cover;
}

/* 动态祥云 */
.decor-cloud {
    position: absolute;
    width: 200px;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M20,50 Q40,20 70,40 T120,30 T170,50' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='3'/%3E%3Cpath d='M30,60 Q50,30 80,50 T130,40 T180,60' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}
.c1 { top: 10%; left: -100px; animation: floatCloud 25s linear infinite; }
.c2 { top: 40%; right: -100px; animation: floatCloud 30s linear infinite reverse; }

@keyframes floatCloud {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

/* 悬挂灯笼 */
.decor-lantern {
    position: absolute;
    width: 60px;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30,0 L30,10 M10,10 Q5,40 10,70 L50,70 Q55,40 50,10 Z' fill='%23d32f2f' stroke='%23ffd700' stroke-width='2'/%3E%3Cpath d='M10,10 L50,10 M10,70 L50,70' stroke='%23ffd700' stroke-width='2'/%3E%3Cpath d='M30,70 L30,80' stroke='%23ffd700' stroke-width='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: top center;
    animation: swing 4s ease-in-out infinite;
}
.l1 { top: -10px; left: 20px; animation-delay: 0s; }
.l2 { top: -20px; right: 20px; animation-delay: 2s; transform: scale(0.8); }

@keyframes swing {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
}

/* 烟花效果 */
.firework {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: explode 2s ease-out infinite;
    opacity: 0;
}
.f1 { top: 20%; left: 20%; background: #ffd700; animation-delay: 1s; }
.f2 { top: 30%; right: 30%; background: #ff9800; animation-delay: 3s; }

@keyframes explode {
    0% { transform: scale(0); opacity: 1; box-shadow: 0 0 0 0 #ffd700; }
    100% { transform: scale(10); opacity: 0; box-shadow: 0 0 20px 20px transparent; }
}

.app-bg::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 祥云纹理 */
    background-image: 
        repeating-radial-gradient(circle at 0 0, transparent 0, #c62828 10px),
        repeating-linear-gradient(#c62828, #c62828);
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* Logo */
.landing-header-logo {
    padding: 20px 15px 10px;
    display: flex;
    justify-content: center;
}
.landing-header-logo img {
    max-width: 280px; /* 增加宽度限制 */
    height: auto;     /* 高度自适应 */
    max-height: 80px; /* 限制最大高度 */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.landing-content {
    padding: 10px 20px 80px; /* 底部留白给固定按钮 */
}

/* 主标题区 */
.main-title-section {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.main-title {
    font-family: "SimHei", "STHeiti", sans-serif;
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 20px;
    letter-spacing: 2px;

    line-height: 1.3;
    color: #ffeb3b;
    text-shadow:
        0 2px 0 #3e2723,
        0 6px 10px rgba(0,0,0,0.45);
}

.couplet-text {
    background: #b71c1c;
    color: #ffd700;
    font-family: "SimSun", "STSong", serif; /* 对联使用宋体 */
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    padding: 15px 6px;
    border-radius: 50px;
    border: 3px solid #ffd700;
    line-height: 1.3;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 0 #3e2723;
}

/* 时间条 */
.time-banner {
    background: #d32f2f;
    border: 2px solid #ffd700;
    border-radius: 30px;
    padding: 8px 20px;
    display: inline-block;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    max-width: 100%;
}
.time-banner::before, .time-banner::after {
    content: '❄'; /* 装饰符号 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffd700;
    font-size: 14px;
}
.time-banner::before { left: 10px; }
.time-banner::after { right: 10px; }

.time-content {
    color: #fff;
    text-align: center;
}
.sub-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 2px;
}
.time-range {
    font-size: 12px;
    opacity: 0.9;
}

/* 规则卡片 */
.rules-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 60px; /* 增加上边距，使卡片位置下移 */
}

/* 答题输入框 */
.input-answer-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.input-answer {
    width: 80%;
    padding: 12px;
    font-size: 22px; /* 增大输入框字号 */
    border: 2px solid #e1b12c;
    border-radius: 8px;
    text-align: center;
    color: #3e2723;
    background: #fff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.input-answer:focus {
    outline: none;
    border-color: #d32f2f;
    box-shadow: 0 0 5px rgba(211, 47, 47, 0.5);
}

.rule-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px 15px 15px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 2px solid #ffd700;
    text-align: center;
}

.card-header-pill {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid #d32f2f;
    border-radius: 20px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap;
}

.pill-icon { font-size: 16px; }
.pill-text {
    color: #d32f2f;
    font-weight: bold;
    font-size: 16px;
}

.card-body {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

/* 底部文字 */
.landing-footer-text {
    margin-top: 30px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    line-height: 1.5;
}

/* 底部固定按钮 */
.fixed-bottom-btn {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 100;
    padding: 0 20px;
}

.btn-start-large {
    font-family: "SimHei", "STHeiti", sans-serif;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(to bottom, #ff9800, #f57c00);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 0;
    border: 2px solid #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 2. Info Page */
.info-page {
    justify-content: center;
    background: rgba(0,0,0,0.5);
}
.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.card-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--dark-red);
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #666; font-size: 14px; }
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
}
.btn-confirm {
    width: 100%;
    padding: 12px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    margin-top: 10px;
}

/* 3. Quiz Page */
.quiz-page {
    padding-top: 20px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    min-height: 100vh;       /* 确保占满全屏高度 */
}

.question-slide {
    animation: fadeIn 0.3s ease-out;
    width: 100%;             /* 确保内容宽度正常 */
    margin-top: -60px;       /* 稍微上移一点视觉中心 */
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.question-card {
    background: #fff8e1; /* Cream/Yellow paper */
    border: 2px solid #e1b12c;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-bottom: 20px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Decorative corners */
.question-card::before, .question-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #c62828;
    transition: all 0.3s;
}
.question-card::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.question-card::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.q-header {
    position: absolute;
    top: -15px;
    background: #e1b12c;
    color: #3e2723;
    padding: 5px 20px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.q-content {
    font-size: 26px; /* 增大题干字号 */
    font-weight: bold;
    color: #3e2723;
    text-align: center;
    line-height: 1.5;
}

/* Answer Area */
.answer-area {
    margin-bottom: 20px;
}

.answer-boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.box {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 2px solid #e1b12c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #d32f2f;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}
.box.filled { border-color: #d32f2f; background: #fffde7; }

/* Tool Buttons */
.tool-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.btn-tool {
    background: linear-gradient(to bottom, #ffcc80, #ffb74d);
    border: 1px solid #fff;
    color: #fff;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* Keyboard Grid */
.keyboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 10px;
}

.key-btn {
    aspect-ratio: 1;
    background: #fff;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 4px 0 #ccc, 0 5px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.1s;
}
.key-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #ccc;
}
.key-btn:disabled {
    opacity: 0.3;
    cursor: default;
    box-shadow: none;
    transform: translateY(4px);
}

/* Navigation */
.quiz-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 0 20px;
}
.btn-nav {
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    background: rgba(0,0,0,0.35);
    color: #fff;
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.btn-nav.submit {
    background: #ffd700;
    color: #d32f2f;
    border-color: #ffd700;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

/* Result Page */
.result-page {
    justify-content: center;
    align-items: center;
}
.result-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.lantern-icon { font-size: 60px; margin-bottom: 20px; }
.btn-restart {
    margin-top: 20px;
    padding: 10px 30px;
    background: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
}