:root {
    /* Bảng màu theo đúng ảnh mẫu: nền trắng, chữ đỏ mận, tiêu đề đen,
       hoa sen trắng + lá sen xanh, loang hồng nước nhẹ ở mép */
    --ink: #2b2622;          /* đen/nâu đen cho tiêu đề & ngày */
    --wine: #7d1f2e;         /* đỏ mận đậm cho tên (viết tay) */
    --wine-soft: #9e3a48;    /* đỏ mận nhạt cho phần phụ */
    --happy-pink: #d9a9b5;   /* hồng nhạt cho chữ 囍 */
    --leaf: #4f7a43;         /* xanh lá sen */
    --leaf-soft: #7fa96f;    /* xanh lá nhạt */
    --lotus-pink: #f3d3dd;   /* hồng cánh sen */
    --blush: rgba(226, 150, 170, 0.28); /* hồng nước loang mép */
    --paper: #fdfbf7;        /* nền trắng ngà (giấy) */

    /* giữ lại tên biến cũ để phần code khác không lỗi, ánh xạ sang màu mới */
    --green-dark: var(--ink);
    --green-mid: var(--wine-soft);
    --green-soft: var(--leaf);
    --green-faded: var(--leaf-soft);
}

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

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e2df;
    padding: 24px;
    font-family: 'Cormorant Garamond', serif;
}

/* ---------- Card ---------- */
.card {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(60, 40, 45, 0.22);

    /* dùng ảnh nền hoa sen thật (background.jpg) */
    background-color: var(--paper);
    background-image: url("background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* subtle paper grain */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 3px);
    pointer-events: none;
}

/* ---------- Central 囍 ---------- */
.happiness-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-size: clamp(120px, 26vw, 260px);
    color: var(--happy-pink);
    line-height: 1;
    font-family: 'Cinzel', serif;
    font-weight: 500;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}

/* ---------- Content ---------- */
.content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4% 6% 3%;
    text-align: center;
}

.title {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    letter-spacing: 0.35em;
    color: var(--green-dark);
    font-size: clamp(16px, 2.6vw, 30px);
    margin-top: 2%;
    padding-left: 0.35em;
}

/* ---------- Names ---------- */
.names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 4vw, 60px);
    margin-top: 1%;
    width: 100%;
}

.name-block {
    display: flex;
    flex-direction: column;
    font-family: 'Great Vibes', cursive;
    color: var(--wine);
    line-height: 0.95;
}

.name-block .name-first {
    font-size: clamp(38px, 8vw, 88px);
}

.name-block .name-last {
    font-size: clamp(38px, 8vw, 88px);
    margin-top: -0.08em;
}

.name-block.left {
    align-items: flex-end;
    transform: translateY(-6%);
}

.name-block.right {
    align-items: flex-start;
    transform: translateY(6%);
}

/* stagger the two words like the original */
.name-block.left .name-last { transform: translateX(-8%); }
.name-block.right .name-last { transform: translateX(10%); }

/* ---------- Rings ---------- */
.rings {
    flex: 0 0 auto;
    width: clamp(70px, 12vw, 130px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rings svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1px 2px rgba(125, 31, 46, 0.2));
}

/* nhẫn xoay tròn liên tục khi thiệp đang chạy */
.card.play .rings svg {
    animation: ringSpin 6s linear infinite;
}
@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------- Thank you line ---------- */
.thanks {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--wine);
    font-size: clamp(15px, 2.4vw, 26px);
    margin-top: 1%;
    max-width: 84%;
}

/* ---------- Date ---------- */
.date {
    margin-top: auto;
    margin-bottom: 4%;   /* chừa chỗ cho cụm hoa sen ở đáy ảnh nền */
    color: var(--green-dark);
    font-family: 'Cinzel', serif;
}

.date .month {
    letter-spacing: 0.28em;
    font-size: clamp(14px, 2.2vw, 26px);
    padding-left: 0.28em;
}

.day-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.6vw, 18px);
    margin-top: 4px;
}

.day-row .weekday {
    letter-spacing: 0.22em;
    font-size: clamp(11px, 1.4vw, 16px);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 3px 8px;
    padding-left: calc(8px + 0.22em);
}

.day-row .day-number {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(30px, 5vw, 58px);
    line-height: 1;
    transform: translateY(-6px);
}

.day-row .lunar {
    font-size: clamp(11px, 1.5vw, 17px);
    letter-spacing: 0.05em;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.day-row .lunar-year {
    font-size: 0.9em;
}

.date .year {
    letter-spacing: 0.3em;
    font-size: clamp(14px, 2vw, 24px);
    margin-top: 2px;
    padding-left: 0;
    margin-left: -1.6em;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

/* Giảm khoảng đệm ngoài trên màn hình nhỏ */
@media (max-width: 768px) {
    body { padding: 14px; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
    .names { gap: clamp(4px, 2vw, 24px); }
    .thanks { max-width: 88%; }
}

/* ---- Điện thoại (ngang hoặc rộng vừa) ---- */
@media (max-width: 600px) {
    body { padding: 10px; align-items: flex-start; }

    /* chuyển sang khổ dọc, cao hơn để chứa nội dung */
    .card { aspect-ratio: 3 / 4; }

    .content { padding: 6% 5% 5%; }

    .title { font-size: clamp(14px, 4.6vw, 22px); letter-spacing: 0.25em; }

    .names { gap: 2px; margin-top: 3%; }
    .name-block .name-first,
    .name-block .name-last { font-size: clamp(34px, 13vw, 60px); }

    .rings { width: clamp(58px, 16vw, 84px); }

    .thanks { max-width: 94%; font-size: clamp(15px, 5vw, 22px); }

    /* chữ 囍 nhỏ lại kẻo tràn */
    .happiness-bg { font-size: clamp(120px, 42vw, 190px); }

    .date .month { font-size: clamp(13px, 4.2vw, 20px); letter-spacing: 0.2em; }
    .day-row { gap: clamp(6px, 2.4vw, 14px); }
    .day-row .day-number { font-size: clamp(28px, 10vw, 46px); }
    .tap-hint { bottom: 2%; right: 3%; }
}

/* ---- Điện thoại nhỏ (dọc, hẹp) ---- */
@media (max-width: 380px) {
    .name-block .name-first,
    .name-block .name-last { font-size: clamp(30px, 15vw, 48px); }

    .day-row .weekday { letter-spacing: 0.12em; padding: 2px 5px; }
    .day-row .lunar { font-size: 11px; }
    .thanks { font-size: 15px; }
}

/* ---- Màn hình rất rộng: giới hạn để thiệp không quá to ---- */
@media (min-width: 1400px) {
    .card { max-width: 1120px; }
}

/* ---- Màn hình thấp & ngang (vd điện thoại xoay ngang) ---- */
@media (max-height: 480px) and (orientation: landscape) {
    body { padding: 8px; }
    .card { aspect-ratio: 16 / 9; height: 96vh; width: auto; max-width: none; }
    .tap-hint { font-size: 9px; }
}

/* =======================================================
   ANIMATIONS
   ======================================================= */

.card { cursor: pointer; }

/* ---- Entrance: các phần tử bắt đầu ẩn, rồi hiện dần ---- */
.rings {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nhẫn vẫn "pop" vào sau khi hai tên đã hiện xong */
.card.play .rings       { animation-name: popIn;        animation-delay: var(--rings-delay, 1.6s); }

/* =======================================================
   HIỆU ỨNG CHỮ HIỆN DẦN TỪNG KÝ TỰ
   (trái -> phải trong mỗi dòng, các dòng trên -> dưới)
   ======================================================= */

/* mỗi ký tự được JS bọc trong .char, bắt đầu ẩn */
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    white-space: pre;   /* giữ khoảng trắng giữa các chữ */
}

/* khi thiệp "play" thì cho từng ký tự hiện lần lượt */
.card.play .char {
    animation: charIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--char-delay, 0s);
}

@keyframes charIn {
    from { opacity: 0; transform: translateY(0.5em); }
    to   { opacity: 1; transform: translateY(0); }
}

/* chữ 囍 phóng to nhẹ khi xuất hiện + đập nhịp liên tục */
.card.play .happiness-bg {
    animation: happyIn 1.1s ease 0.2s both, happyPulse 4s ease-in-out 1.4s infinite;
}

@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.3) rotate(-25deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes happyIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.6); }
    to   { opacity: 1; transform: translate(-50%, -46%) scale(1); }
}
@keyframes happyPulse {
    0%, 100% { transform: translate(-50%, -46%) scale(1);   color: var(--happy-pink); }
    50%      { transform: translate(-50%, -46%) scale(1.05); color: #e6bcc7; }
}
/* ---- Nhẫn lấp lánh: thêm tia sáng ---- */
.rings { position: relative; }
.rings .sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 16%;
    left: 36%;
    background:
        linear-gradient(#fff, #fff) center/100% 2px no-repeat,
        linear-gradient(#fff, #fff) center/2px 100% no-repeat;
    filter: drop-shadow(0 0 3px #fff);
    opacity: 0;
    transform: scale(0) rotate(0deg);
}
.card.play .rings .sparkle {
    animation: sparkle 2.6s ease-in-out 1.6s infinite;
}
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* ---- Hiệu ứng "nhấn" cả tấm thiệp ---- */
.card.pulse { animation: cardPulse 0.5s ease; }
@keyframes cardPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.985); }
    100% { transform: scale(1); }
}

/* ---- Gợi ý bấm ---- */
.tap-hint {
    position: absolute;
    bottom: 3%;
    right: 4%;
    z-index: 4;
    font-family: 'Cinzel', serif;
    font-size: clamp(9px, 1.2vw, 12px);
    letter-spacing: 0.15em;
    color: var(--green-mid);
    background: rgba(255, 255, 255, 0.5);
    padding: 4px 10px;
    border-radius: 20px;
    animation: hintBlink 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hintBlink {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.9; }
}

/* ---- Cánh hoa rơi ---- */
.petals {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}
.petal {
    position: absolute;
    top: -8%;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #fbe9ef, #f3d3dd 70%);
    border-radius: 0 100% 0 100%;
    opacity: 0.9;
    animation: fall linear forwards;
}
@keyframes fall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.95; }
    100% { transform: translateY(115%) translateX(var(--drift, 30px)) rotate(540deg); opacity: 0; }
}

/* ---- Lớp trái tim phủ toàn màn hình ---- */
.hearts-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
}

/* ---- Trái tim rơi ---- */
.heart {
    position: absolute;
    top: -10%;
    line-height: 1;
    color: #c9788b;
    opacity: 0;                       /* để keyframe điều khiển */
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
    will-change: transform, opacity;
    animation: heartFall linear forwards;
}
.heart::before {
    content: "\2665";                 /* ♥ */
    display: block;
}

@keyframes heartFall {
    0%   { transform: translate3d(0, 0, 0) scale(var(--scale, 1)); opacity: 0; }
    12%  { opacity: 0.95; }
    90%  { opacity: 0.95; }
    100% { transform: translate3d(var(--drift, 24px), 115vh, 0) scale(var(--scale, 1)); opacity: 0; }
}

/* ---- Trái tim bay lên ---- */
.heart.up {
    top: auto;
    bottom: -6%;
    animation: heartRise ease-in forwards;
}
@keyframes heartRise {
    0%   { transform: translate3d(0, 0, 0) scale(calc(var(--scale, 1) * 0.5)); opacity: 0; }
    15%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate3d(var(--drift, 24px), -115vh, 0) scale(var(--scale, 1)); opacity: 0; }
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    .char, .rings, .happiness-bg {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    /* giữ lại vị trí lệch của hai tên khi tắt hiệu ứng */
    .name-block.left  { transform: translateY(-6%) !important; }
    .name-block.right { transform: translateY(6%) !important; }
    .tap-hint { animation: none; }
    .petal, .heart { display: none !important; }
}