/* ============================================
   给 lsy 的一封信 — 书信质感样式表
   Inspired by classic letter-writing aesthetics
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Dancing+Script:wght@400;700&family=Noto+Serif+SC:wght@300;400;600;700&display=swap');

/* === CSS Reset & Variables === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 纸张色系 */
    --paper: #f7f1e3;
    --paper-light: #faf6ed;
    --paper-dark: #ede3d0;
    --paper-shadow: #ddd0b8;

    /* 墨水色系 */
    --ink: #2c1810;
    --ink-soft: #5c4033;
    --ink-light: #8b7355;
    --ink-faded: #b8a08a;

    /* 火漆色系 */
    --seal: #8b1a1a;
    --seal-light: #c41e3a;
    --seal-glow: #e84a5f;
    --seal-shadow: #5c0e0e;

    /* 点缀色 */
    --gold: #c9a96e;
    --gold-light: #e8d5a3;
    --rose: #c08a8a;
    --rose-light: #e8c8c8;

    /* 背景色 */
    --bg: #e8ddd0;
    --bg-dark: #d4c4b0;

    /* 字体 */
    --font-hand: 'Ma Shan Zheng', 'Dancing Script', 'KaiTi', cursive;
    --font-body: 'Noto Serif SC', 'ZCOOL XiaoWei', 'STKaiti', serif;
    --font-elegant: 'Dancing Script', 'Great Vibes', cursive;

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(44, 24, 16, 0.08);
    --shadow-md: 0 4px 20px rgba(44, 24, 16, 0.12);
    --shadow-lg: 0 8px 40px rgba(44, 24, 16, 0.15);
    --shadow-seal: 0 2px 12px rgba(139, 26, 26, 0.3);

    /* 间距 */
    --letter-padding: 48px;
}

/* === Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ink);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* 背景纹理 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(139, 115, 85, 0.03) 2px,
            rgba(139, 115, 85, 0.03) 3px
        ),
        radial-gradient(ellipse at 30% 20%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(192, 138, 138, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container {
    width: 100%;
    max-width: 660px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.8s ease;
}

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

/* ============================================
   Step 1: 信封
   ============================================ */
.step-1 {
    justify-content: center;
}

.envelope-scene {
    perspective: 1200px;
    cursor: pointer;
    margin-bottom: 32px;
}

.envelope-3d {
    width: 320px;
    height: 220px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.envelope-3d:hover {
    transform: translateY(-4px);
}

/* 信封背面 */
.envelope-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--envelope-dark, #b8895e), var(--envelope, #d4a574));
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

/* 信封正面主体 */
.envelope-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #d4a574, #c4956a);
    border-radius: 6px;
    z-index: 2;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* 信封 flap（盖口） */
.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 4;
    border-style: solid;
    border-width: 110px 160px 0 160px;
    border-color: #c4956a transparent transparent transparent;
    transform-origin: top center;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: drop-shadow(0 -2px 6px rgba(0,0,0,0.1));
}

.envelope-flap-closed .envelope-flap {
    transform: rotateX(0deg);
}

.envelope-open .envelope-flap {
    transform: rotateX(-180deg);
}

/* 信封装饰线 */
.envelope-border {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
}

/* 收信人 */
.envelope-to {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
}

.envelope-to .name {
    font-family: var(--font-hand);
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    display: block;
}

.envelope-to .label {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* 邮票 */
.envelope-stamp {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 48px;
    height: 56px;
    background: linear-gradient(135deg, var(--rose-light), var(--rose));
    border: 2px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transform: rotate(8deg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* 火漆印章（信封上） */
.wax-seal-envelope {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--seal-light), var(--seal), var(--seal-shadow));
    box-shadow: var(--shadow-seal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    transition: opacity 0.6s ease;
}

.envelope-open .wax-seal-envelope {
    opacity: 0;
}

/* 提示文字 */
.envelope-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink-light);
    letter-spacing: 2px;
    animation: hintPulse 2.5s ease-in-out infinite;
    text-align: center;
    margin-bottom: 8px;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%  { opacity: 1; transform: translateY(-4px); }
}

/* 手指引导动画 */
.guide-finger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: fingerBounce 2s ease-in-out infinite;
    margin-top: 12px;
}

.guide-finger .finger-icon {
    font-size: 28px;
    display: block;
}

.guide-finger .finger-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-faded);
    letter-spacing: 2px;
}

@keyframes fingerBounce {
    0%, 100% { transform: translateY(0); }
    30%  { transform: translateY(-10px); }
    50%  { transform: translateY(-6px); }
}

/* 信纸点击引导 */
.letter-click-hint {
    text-align: center;
    padding: 16px 0 8px;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.letter-click-hint.show {
    opacity: 1;
}

.letter-click-hint .hint-arrow {
    display: block;
    font-size: 22px;
    animation: arrowBounce 1.8s ease-in-out infinite;
    margin-bottom: 4px;
}

.letter-click-hint .hint-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-faded);
    letter-spacing: 2px;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    30%  { transform: translateY(-6px); }
    50%  { transform: translateY(-3px); }
}

/* 信纸完成引导 */
.letter-next-hint {
    text-align: center;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-faded);
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.6s ease;
    position: relative;
    z-index: 1;
}

.letter-next-hint.show {
    opacity: 1;
    animation: hintPulse 2.5s ease-in-out infinite;
}

/* ============================================
   Step 2: 信纸
   ============================================ */
.step-2 {
    padding: 32px 0;
}

/* 信纸整体容器 */
.letter-container {
    width: 100%;
    max-width: 580px;
    position: relative;
}

/* 信纸主体 */
.letter-paper {
    background: linear-gradient(170deg, var(--paper-light), var(--paper), var(--paper-dark));
    padding: var(--letter-padding) 40px 40px;
    border-radius: 2px;
    box-shadow:
        var(--shadow-lg),
        inset 0 0 60px rgba(139, 115, 85, 0.05),
        0 0 0 1px rgba(139, 115, 85, 0.08);
    position: relative;
}

/* 信纸横线 — 更真实的笔记本横线效果 */
.letter-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 30px,
            rgba(192, 138, 138, 0.12) 30px,
            rgba(192, 138, 138, 0.12) 30.5px
        );
    pointer-events: none;
}

/* 信纸折痕效果 */
.letter-paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, transparent 30px, rgba(0,0,0,0.02) 30px, transparent 32px),
        linear-gradient(90deg, transparent calc(100% - 30px), rgba(0,0,0,0.02) calc(100% - 30px), transparent calc(100% - 28px));
    pointer-events: none;
}

/* 信纸 Header */
.letter-header {
    position: relative;
    z-index: 1;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--gold-light);
    text-align: center;
}

.letter-salutation {
    font-family: var(--font-hand);
    font-size: 24px;
    color: var(--ink);
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInText 0.8s ease 0.3s forwards;
}

.letter-date {
    font-family: var(--font-elegant);
    font-size: 13px;
    color: var(--ink-faded);
    margin-top: 4px;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInText 0.8s ease 0.5s forwards;
}

/* 信纸内容 */
.letter-content {
    position: relative;
    z-index: 1;
    min-height: 280px;
}

.letter-line {
    font-size: 16px;
    line-height: 2.2;
    color: var(--ink-soft);
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.6s ease;
    position: relative;
    padding-left: 24px;
    text-indent: -24px;
}

.letter-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.letter-line.highlight {
    color: var(--ink);
    font-weight: 600;
}

.letter-line.indent {
    padding-left: 48px;
    text-indent: -24px;
}

.letter-line.spacer {
    height: 16px;
    opacity: 0;
}

/* 信纸底部签名区 */
.letter-footer {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gold-light);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.letter-signature {
    text-align: right;
}

.signature-name {
    font-family: var(--font-hand);
    font-size: 26px;
    color: var(--ink);
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeInText 0.8s ease 2s forwards;
}

.signature-label {
    font-family: var(--font-elegant);
    font-size: 12px;
    color: var(--ink-faded);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -4px;
    opacity: 0;
    animation: fadeInText 0.8s ease 2.2s forwards;
}

/* 火漆印章（信纸上） */
.wax-seal-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.wax-seal {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--seal-light), var(--seal), var(--seal-shadow));
    box-shadow: var(--shadow-seal), inset 0 -2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255,255,255,0.85);
    position: relative;
    opacity: 0;
    animation: fadeInSeal 0.6s ease 2.5s forwards;
    flex-shrink: 0;
}

.wax-seal::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}

.wax-seal::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: rotate(-20deg);
}

@keyframes fadeInSeal {
    0%   { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    60%  { opacity: 1; transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes fadeInText {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 继续按钮 */
.letter-continue {
    text-align: center;
    margin-top: 32px;
    position: relative;
    z-index: 1;
}

.btn-next {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 32px;
    border: 1px solid var(--ink-faded);
    border-radius: 2px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.4s ease;
    letter-spacing: 3px;
    opacity: 0;
    display: none;
}

.btn-next.show {
    display: inline-block;
    animation: fadeInText 0.6s ease forwards;
}

.btn-next:hover {
    background: var(--ink);
    color: var(--paper-light);
    border-color: var(--ink);
}

/* ============================================
   Step 3: 表白 + 选择
   ============================================ */
.step-3 {
    text-align: center;
}

.confession-card {
    background: linear-gradient(170deg, var(--paper-light), var(--paper));
    padding: 56px 40px 40px;
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    position: relative;
}

.confession-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.confession-text h2 {
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--ink-soft);
    font-weight: 400;
    line-height: 2;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.confession-text .question {
    font-family: var(--font-hand);
    font-size: 32px;
    color: var(--ink);
    margin: 20px 0 32px;
    letter-spacing: 3px;
    line-height: 1.5;
}

.confession-text .small-text {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink-light);
    line-height: 2;
    margin-bottom: 16px;
}

/* 按钮容器 */
.choice-buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px;
    position: relative;
}

.btn-yes {
    font-family: var(--font-hand);
    font-size: 20px;
    padding: 14px 40px;
    border: none;
    background: var(--seal);
    color: var(--paper-light);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-seal);
    letter-spacing: 3px;
    position: relative;
    z-index: 2;
    border-radius: 2px;
}

.btn-yes:hover {
    background: var(--seal-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(139, 26, 26, 0.4);
}

.btn-yes::after {
    content: '❤️';
    font-size: 14px;
    margin-left: 8px;
}

.btn-no {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 24px;
    border: 1px solid var(--ink-faded);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    border-radius: 2px;
    letter-spacing: 1px;
    touch-action: none;
}

.btn-no:hover {
    border-color: var(--rose);
    color: var(--rose);
}

.no-hint {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-faded);
    margin-top: 24px;
    font-style: italic;
    animation: hintPulse 2.5s ease-in-out infinite;
}

/* ============================================
   Step 4: 庆祝
   ============================================ */
.step-4 {
    text-align: center;
}

.celebration-card {
    background: linear-gradient(170deg, var(--paper-light), var(--paper));
    padding: 56px 40px 40px;
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.celebration-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: heartbeat 1.5s ease-in-out infinite;
    display: block;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%  { transform: scale(1.12); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.08); }
    56%  { transform: scale(1); }
}

.celebration-title {
    font-family: var(--font-hand);
    font-size: 32px;
    color: var(--seal);
    margin-bottom: 24px;
    letter-spacing: 3px;
}

.celebration-body {
    position: relative;
    padding: 24px 0;
}

.celebration-body::before,
.celebration-body::after {
    content: '~ ~ ~';
    display: block;
    font-family: var(--font-elegant);
    font-size: 14px;
    color: var(--ink-faded);
    letter-spacing: 6px;
}

.celebration-body::before {
    margin-bottom: 20px;
}

.celebration-body::after {
    margin-top: 20px;
}

.celebration-text {
    font-size: 16px;
    line-height: 2.2;
    color: var(--ink-soft);
}

.celebration-text p {
    margin-bottom: 12px;
}

.celebration-text .highlight {
    color: var(--ink);
    font-weight: 600;
}

.celebration-sign {
    font-family: var(--font-hand);
    font-size: 24px;
    color: var(--ink);
    margin-top: 24px;
    letter-spacing: 2px;
}

/* 在一起计时器 */
.together-timer {
    font-family: var(--font-elegant);
    font-size: 14px;
    color: var(--ink-faded);
    margin-top: 20px;
    letter-spacing: 1px;
}

.btn-reset {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 20px;
    border: 1px solid var(--ink-faded);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
    letter-spacing: 2px;
    border-radius: 2px;
}

.btn-reset:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* 彩纸 Canvas */
#confettiCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 鼠标爱心拖尾 */
.heart-trail {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    font-size: 16px;
}

/* ============================================
   按钮逃跑提示
   ============================================ */
.running-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--rose);
    margin-top: 16px;
    width: 100%;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

/* ============================================
   响应式 — 手机 / 平板 / 桌面
   ============================================ */

/* 平板 (768px 以下) */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }

    .envelope-3d {
        width: 280px;
        height: 195px;
    }

    .envelope-flap {
        border-width: 98px 140px 0 140px;
    }

    .step-2 {
        padding: 24px 0;
    }

    :root {
        --letter-padding: 36px;
    }

    .letter-paper {
        padding: var(--letter-padding) 32px 32px;
    }

    .letter-line {
        font-size: 15px;
        padding-left: 22px;
        text-indent: -22px;
    }

    .confession-card {
        padding: 48px 32px 36px;
    }

    .celebration-card {
        padding: 48px 32px 36px;
    }
}

/* 手机 (520px 以下) */
@media (max-width: 520px) {
    .container {
        padding: 16px;
    }

    .envelope-3d {
        width: 240px;
        height: 168px;
    }

    .envelope-flap {
        border-width: 84px 120px 0 120px;
    }

    .envelope-to .name {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .envelope-to .label {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .envelope-stamp {
        width: 36px;
        height: 44px;
        font-size: 16px;
        top: 10px;
        right: 10px;
    }

    .wax-seal-envelope {
        width: 28px;
        height: 28px;
        font-size: 11px;
        bottom: 12px;
        right: 16px;
    }

    .guide-finger .finger-icon {
        font-size: 22px;
    }

    .guide-finger .finger-text {
        font-size: 12px;
    }

    :root {
        --letter-padding: 24px;
    }

    .letter-paper {
        padding: var(--letter-padding) 20px 24px;
    }

    .letter-line {
        font-size: 14px;
        line-height: 2;
        padding-left: 18px;
        text-indent: -18px;
        margin-bottom: 6px;
    }

    .letter-salutation {
        font-size: 20px;
    }

    .letter-header {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .letter-footer {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .wax-seal-container {
        order: -1;
    }

    .wax-seal {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .signature-name {
        font-size: 22px;
    }

    .letter-signature {
        text-align: center;
        width: 100%;
    }

    /* 信纸点击引导在手机端更紧凑 */
    .letter-click-hint .hint-arrow {
        font-size: 18px;
    }

    .letter-click-hint .hint-text {
        font-size: 12px;
    }

    .confession-card {
        padding: 36px 20px 28px;
    }

    .confession-text .question {
        font-size: 24px;
        margin: 16px 0 24px;
    }

    .confession-text h2 {
        font-size: 20px;
    }

    .confession-text .small-text {
        font-size: 14px;
    }

    .celebration-card {
        padding: 36px 20px 28px;
    }

    .celebration-title {
        font-size: 24px;
    }

    .celebration-icon {
        font-size: 48px;
    }

    .celebration-text {
        font-size: 15px;
    }

    .choice-buttons {
        gap: 14px;
        flex-direction: column;
        align-items: center;
    }

    .btn-yes {
        font-size: 18px;
        padding: 14px 40px;
        width: 80%;
        max-width: 240px;
    }

    .btn-no {
        font-size: 14px;
        padding: 10px 24px;
        width: 60%;
        max-width: 180px;
    }

    .together-timer {
        font-size: 13px;
    }
}

/* 小手机 (360px 以下) */
@media (max-width: 360px) {
    .envelope-3d {
        width: 200px;
        height: 140px;
    }

    .envelope-flap {
        border-width: 70px 100px 0 100px;
    }

    .letter-paper {
        padding: 18px 14px 20px;
    }

    .letter-line {
        font-size: 13px;
    }

    .confession-text .question {
        font-size: 20px;
    }

    .btn-yes {
        font-size: 16px;
        padding: 12px 32px;
    }
}

/* 平板横屏/桌面小屏 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 32px;
    }

    .envelope-3d {
        width: 340px;
        height: 236px;
    }

    .envelope-flap {
        border-width: 118px 170px 0 170px;
    }

    :root {
        --letter-padding: 44px;
    }

    .letter-paper {
        padding: var(--letter-padding) 36px 36px;
    }
}

/* 桌面大屏 (1200px 以上) */
@media (min-width: 1200px) {
    .container {
        max-width: 720px;
    }

    .envelope-3d {
        width: 360px;
        height: 250px;
    }

    .envelope-flap {
        border-width: 125px 180px 0 180px;
    }

    .letter-line {
        font-size: 17px;
    }
}