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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #080808;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.screen {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

/* Мягкое бело-розовое свечение */
.screen::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 700px;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #fffafa 35%, #ffdce8 70%, #f8b8cf 100%);
    filter: blur(80px);
    opacity: .65;
    animation: backgroundGradient 8s ease-in-out infinite alternate;
}

@keyframes backgroundGradient {
    0% { transform: translate(-55%, -50%) scale(.9); opacity: .45; }
    50% { transform: translate(-45%, -52%) scale(1.05); opacity: .7; }
    100% { transform: translate(-50%, -48%) scale(1.15); opacity: .55; }
}

/* Первая карточка */
.card {
    position: relative;
    z-index: 2;
    width: 500px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 80px rgba(255,190,215,.08);
    transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translateZ(-300px);
    opacity: 0;
    animation: cardAppear 2s cubic-bezier(.16,1,.3,1) forwards;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08), transparent 80%);
    opacity: .5;
    pointer-events: none;
}

.card-content {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: translateZ(40px);
}

.small-text {
    margin-bottom: 25px;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    opacity: 0;
    animation: textAppear 1.5s ease 1.1s forwards;
}

h1 {
    font-size: 52px;
    font-weight: 300;
    letter-spacing: -2px;
    opacity: 0;
    transform: translateY(20px);
    animation: titleAppear 1.4s cubic-bezier(.16,1,.3,1) 1.4s forwards;
}

/* Жмакай — только увеличение + белое свечение */
.hint {
    display: inline-block;
    margin-top: 30px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    opacity: 0;
    cursor: pointer;
    animation: hintAppear 1s ease 2.3s forwards;
    transform: scale(1);
    transition:
        transform 1.2s cubic-bezier(.16,1,.3,1),
        color 1.2s ease,
        text-shadow 1.2s ease;
}

.hint:hover {
    transform: scale(1.4);
    color: #fff;
    text-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 20px rgba(255,255,255,.65),
        0 0 35px rgba(255,255,255,.35);
}

@keyframes hintAppear {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: rotateX(35deg) rotateY(-30deg) rotateZ(-8deg) translateZ(-900px) scale(.7);
        filter: blur(12px);
    }
    60% { opacity: 1; }
    100% {
        opacity: 1;
        transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translateZ(-300px) scale(1);
        filter: blur(0);
    }
}

@keyframes textAppear {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes titleAppear {
    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Большая карточка */
.message-card {
    position: absolute;
    z-index: 5;
    width: min(1000px, 82vw);
    height: min(600px, 70vh);
    padding: 70px 60px 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px;
    background: linear-gradient(125deg, rgba(255,255,255,.18), rgba(255,220,232,.12), rgba(248,184,207,.18), rgba(255,255,255,.08));
    background-size: 300% 300%;
    box-shadow: 0 40px 120px rgba(0,0,0,.65), 0 0 100px rgba(255,190,215,.16);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) scale(.25) translateZ(-700px);
}

.message-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, #fff, #ffdce8, #f8b8cf, #fff, #ffeaf1, #fff);
    background-size: 400% 400%;
    animation: borderGradient 6s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.message-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(255,190,215,.16), transparent 40%);
    pointer-events: none;
}

@keyframes borderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Персонаж */
.message-character-wrap {
    position: absolute;
    z-index: 1;
    right: -20px;
    bottom: -45px;
    height: 118%;
    width: auto;
    max-width: 56%;
    aspect-ratio: 1024 / 1536;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform: translate3d(55px, 35px, 0) scale(.94);
}

/* Градиентное свечение по силуэту Кристины */
.message-character-wrap::before,
.message-character-wrap::after {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    background:
        radial-gradient(circle at 45% 20%, rgba(255,255,255,.95) 0%, rgba(255,235,244,.75) 18%, rgba(255,190,220,.55) 42%, rgba(180,110,255,.28) 68%, transparent 82%);
    -webkit-mask: url("kristina.png") center bottom / contain no-repeat;
    mask: url("kristina.png") center bottom / contain no-repeat;
    filter: blur(18px);
    opacity: .78;
}

.message-character-wrap::after {
    inset: -10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,220,236,.9) 28%, rgba(245,155,205,.72) 52%, rgba(145,95,255,.55) 78%, rgba(255,255,255,.7) 100%);
    filter: blur(9px);
    opacity: .48;
}

.message-character {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 18px 25px rgba(0,0,0,.38));
}

.message-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 820px;
    margin-right: 30%;
    text-align: left;
    opacity: 0;
    transform: translateY(25px);
}

.message-label {
    margin-bottom: 25px;
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.message-card h2 {
    margin-bottom: 30px;
    font-size: clamp(42px, 4.2vw, 76px);
    line-height: .95;
    font-weight: 300;
    letter-spacing: -3px;
    color: #fff;
    text-shadow: 0 0 30px rgba(255,210,225,.18);
}

.message-text {
    max-width: 610px;
    margin: 0;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.48;
    color: rgba(255,255,255,.72);
}

.message-text p {
    margin: 0 0 10px;
}

.message-text p:last-child {
    margin-bottom: 0;
}

.message-text strong {
    color: #fff;
    font-weight: 500;
    text-shadow: 0 0 14px rgba(255,255,255,.35);
}

.message-highlight {
    margin-top: 14px !important;
    color: #fff;
    font-size: 1.08em;
    line-height: 1.35;
    text-shadow:
        0 0 12px rgba(255,220,235,.55),
        0 0 28px rgba(245,155,205,.22);
}

.message-ending {
    color: rgba(255,255,255,.92);
    font-size: 1.02em;
}

.message-signature {
    margin-top: 15px !important;
    font-size: .72em;
    letter-spacing: 1.1px;
    color: rgba(255,255,255,.42);
}

/* Таймеры внутри карточки */
.timers {
    position: absolute;
    z-index: 4;
    left: 42px;
    right: 42px;
    bottom: 28px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
    align-items: end;
    gap: 14px;
    text-align: left;
}

.timer-item { min-width: 0; }

.timer-caption {
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
    white-space: normal;
    overflow: visible;
}

.timer-info {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.timer-date {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .7px;
    color: rgba(255,210,225,.7);
}

.timer-value {
    min-width: 0;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .45px;
    color: rgba(255,255,255,.65);
    white-space: normal;
}

.timer-divider {
    width: 1px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
}

/* Открытие */
.screen.open .card {
    pointer-events: none;
    animation: cardTransform 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.screen.open .message-card {
    visibility: visible;
    pointer-events: auto;
    animation:
        messageAppear 1.6s cubic-bezier(.16,1,.3,1) forwards,
        messageFloat 8s ease-in-out 1.6s infinite;
}

.screen.open .message-card-content {
    animation: messageContentAppear 1.2s cubic-bezier(.16,1,.3,1) 1.25s forwards;
}

.screen.open .message-character-wrap {
    animation:
        characterAppear 1.3s cubic-bezier(.16,1,.3,1) 1s forwards,
        characterFloat 5.5s ease-in-out 2.3s infinite;
}

@keyframes cardTransform {
    0% {
        opacity: 1;
        transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translateZ(-300px) scale(1);
    }
    45% {
        opacity: 1;
        transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translateZ(100px) scale(1.18);
    }
    100% {
        opacity: 0;
        transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translateZ(250px) scale(1.65);
        filter: blur(12px);
    }
}

@keyframes messageAppear {
    0% {
        opacity: 0;
        transform: rotateX(35deg) rotateY(-30deg) rotateZ(-4deg) scale(.35) translateZ(-800px);
        filter: blur(15px);
    }
    65% { opacity: 1; }
    100% {
        opacity: 1;
        transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes messageFloat {
    0% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translate3d(-15px,0,0); }
    25% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translate3d(0,-15px,0); }
    50% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translate3d(15px,0,0); }
    75% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translate3d(0,15px,0); }
    100% { transform: rotateX(8deg) rotateY(-12deg) rotateZ(-4deg) translate3d(-15px,0,0); }
}

@keyframes messageContentAppear {
    from { opacity: 0; transform: translateY(25px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes characterAppear {
    from { opacity: 0; transform: translate3d(55px,35px,0) scale(.94); filter: blur(8px) drop-shadow(0 18px 25px rgba(0,0,0,.38)); }
    to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0) drop-shadow(0 18px 25px rgba(0,0,0,.38)); }
}

@keyframes characterFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0,-7px,0) scale(1.005); }
}

/* 2560x1440 */
@media (min-width: 2200px) and (min-height: 1200px) {
    .message-card {
        width: 1160px;
        height: 680px;
        padding: 80px 75px 115px;
    }
    .message-card h2 { font-size: 82px; }
    .message-label { font-size: 15px; letter-spacing: 6px; }
    .message-text { max-width: 690px; font-size: 17px; line-height: 1.5; }
    .message-character-wrap { height: 122%; right: -35px; bottom: -65px; }
    .timers { left: 52px; right: 52px; bottom: 34px; gap: 28px; }
    .timer-caption { font-size: 11px; letter-spacing: 1.3px; }
    .timer-date, .timer-value { font-size: 11px; }
    .timer-divider { height: 36px; }
}

/* 1920x1080 */
@media (min-width: 1400px) and (max-width: 2199px) and (min-height: 850px) {
    .message-card { width: 1000px; height: 600px; }
    .message-card h2 { font-size: 70px; }
    .message-text { max-width: 620px; font-size: 17px; line-height: 1.5; }
    .message-character-wrap { height: 120%; right: -25px; bottom: -55px; }
}

/* Ноутбуки */
@media (min-width: 701px) and (max-width: 1399px) {
    .message-card { width: 88vw; height: min(580px,72vh); padding: 55px 45px 105px; }
    .message-card-content { margin-right: 28%; }
    .message-card h2 { font-size: clamp(38px,5vw,62px); }
    .message-text { max-width: 520px; font-size: 15px; line-height: 1.48; }
    .message-character-wrap { height: 115%; right: -15px; bottom: -40px; max-width: 52%; }
    .timers { left: 32px; right: 32px; bottom: 24px; gap: 16px; }
    .timer-caption { font-size: 8px; letter-spacing: .9px; }
    .timer-date, .timer-value { font-size: 8px; }
    .timer-info { gap: 6px; }
}

/* Телефоны */
@media (max-width: 700px) {
    .screen { perspective: 900px; }

    .card { width: 88vw; height: 250px; }
    .small-text { font-size: 11px; letter-spacing: 2.5px; }
    h1 { font-size: 40px; }

    .message-card {
        width: 92vw;
        height: 78vh;
        min-height: 500px;
        padding: 40px 24px 155px;
        border-radius: 12px;
        align-items: flex-start;
    }

    .message-card-content {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        text-align: center;
        padding-top: 15px;
    }

    .message-label { margin-bottom: 18px; font-size: 10px; letter-spacing: 3px; }
    .message-card h2 { margin-bottom: 22px; font-size: clamp(32px,10vw,48px); line-height: .98; letter-spacing: -1.5px; }
    .desktop-break { display: none; }
    .message-text { max-width: 100%; font-size: 12px; line-height: 1.45; text-align: left; }
    .message-text p { margin-bottom: 7px; }
    .message-highlight { margin-top: 10px !important; font-size: 1.05em; }
    .message-signature { margin-top: 10px !important; font-size: .7em; }

    .message-character-wrap {
        z-index: 2;
        height: 58%;
        max-width: 70%;
        right: -18px;
        bottom: 78px;
        opacity: 0;
    }

    .timers {
        left: 24px;
        right: 24px;
        bottom: 24px;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .timer-item { width: 100%; position: relative; z-index: 5; }
    .timer-caption { margin-bottom: 5px; font-size: 8px; line-height: 1.35; letter-spacing: .8px; }
    .timer-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 7px; }
    .timer-date, .timer-value { font-size: 8px; line-height: 1.35; }
    .timer-value { white-space: normal; }
    .timer-divider { width: 70px; height: 1px; }
}

@media (max-width: 380px) {
    .message-card { min-height: 470px; padding-left: 18px; padding-right: 18px; }
    .message-card h2 { font-size: 31px; }
    .message-character-wrap { height: 53%; bottom: 84px; }
    .timers { left: 18px; right: 18px; bottom: 18px; }
    .timer-caption, .timer-date, .timer-value { font-size: 7px; }
}

@media (max-width: 900px) and (orientation: landscape) {
    .message-card { height: 88vh; min-height: 420px; padding-bottom: 110px; }
    .message-character-wrap { height: 105%; bottom: -25px; right: -15px; }
    .message-card-content { max-width: 55%; margin-right: 35%; }
    .message-card h2 { font-size: clamp(30px,5vw,48px); }
    .message-text { font-size: 11px; line-height: 1.4; }
}

@media (hover: none) and (pointer: coarse) {
    .hint:hover {
        transform: scale(1);
        color: rgba(255,255,255,.35);
        text-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   FINAL MESSAGE LAYOUT + SEQUENTIAL TEXT REVEAL
   ========================================================= */

.message-card {
    width: min(1120px, 90vw);
    height: min(660px, 72vh);
    padding: 70px 72px 112px;
}

.message-card-content {
    position: relative;
    z-index: 3;
    width: min(660px, 58%);
    margin-right: 34%;
    text-align: left;
}

.message-label {
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 5px;
}

.message-card h2 {
    margin-bottom: 24px;
    font-size: clamp(48px, 4.1vw, 68px);
    line-height: .92;
    letter-spacing: -2.5px;
}

.message-text {
    max-width: 660px;
    margin: 0;
    font-size: 15px;
    line-height: 1.42;
    color: rgba(255,255,255,.70);
}

.message-text p {
    margin: 0 0 9px;
}

/* Каждая строка/абзац появляется отдельно */
.message-text .reveal-line {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(5px);
    animation: textLineReveal .75s cubic-bezier(.16,1,.3,1) forwards;
}

.message-text .reveal-line:nth-child(1) { animation-delay: 1.65s; }
.message-text .reveal-line:nth-child(2) { animation-delay: 1.90s; }
.message-text .reveal-line:nth-child(3) { animation-delay: 2.15s; }
.message-text .reveal-line:nth-child(4) { animation-delay: 2.40s; }
.message-text .reveal-line:nth-child(5) { animation-delay: 2.65s; }
.message-text .reveal-line:nth-child(6) { animation-delay: 2.90s; }
.message-text .reveal-line:nth-child(7) { animation-delay: 3.15s; }
.message-text .reveal-line:nth-child(8) { animation-delay: 3.40s; }

@keyframes textLineReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.message-highlight {
    margin-top: 14px !important;
    font-size: 1.08em;
    color: rgba(255,255,255,.92);
    text-shadow: 0 0 18px rgba(255,210,225,.18);
}

.message-ending {
    margin-top: 5px !important;
    font-size: 1.02em;
    color: rgba(255,255,255,.88);
}

.message-signature {
    margin-top: 3px !important;
    font-size: .72em;
    letter-spacing: .5px;
    color: rgba(255,255,255,.42);
}

/* 2560x1440 */
@media (min-width: 2200px) and (min-height: 1200px) {
    .message-card {
        width: 1320px;
        height: 760px;
        padding: 82px 88px 120px;
    }
    .message-card-content {
        width: 720px;
        margin-right: 38%;
    }
    .message-card h2 { font-size: 78px; }
    .message-label { font-size: 13px; }
    .message-text { max-width: 720px; font-size: 17px; line-height: 1.46; }
    .message-text p { margin-bottom: 10px; }
    .message-character-wrap { height: 116%; right: -25px; bottom: -75px; }
    .timers { left: 60px; right: 60px; bottom: 32px; gap: 18px; }
    .timer-caption, .timer-date, .timer-value { font-size: 10px; }
}

/* 1920x1080 */
@media (min-width: 1400px) and (max-width: 2199px) and (min-height: 850px) {
    .message-card {
        width: 1120px;
        height: 660px;
        padding: 70px 72px 112px;
    }
    .message-card-content {
        width: 650px;
        margin-right: 35%;
    }
    .message-card h2 { font-size: 66px; }
    .message-text { max-width: 650px; font-size: 15px; line-height: 1.42; }
    .message-character-wrap { height: 112%; right: -18px; bottom: -65px; }
    .timers { gap: 14px; }
}

/* Небольшие десктопы / ноутбуки */
@media (min-width: 701px) and (max-width: 1399px) {
    .message-card {
        width: 92vw;
        height: min(620px, 82vh);
        padding: 55px 48px 108px;
    }
    .message-card-content {
        width: 58%;
        margin-right: 34%;
    }
    .message-card h2 { font-size: clamp(40px, 5vw, 58px); }
    .message-text { max-width: 100%; font-size: 13px; line-height: 1.42; }
    .message-text p { margin-bottom: 7px; }
    .message-character-wrap { height: 108%; right: -12px; bottom: -45px; max-width: 48%; }
    .timers { gap: 12px; }
}

/* Телефоны: на маленьком экране персонаж уходит вниз, чтобы тексту было место */
@media (max-width: 700px) {
    .message-card {
        width: 94vw;
        height: 84vh;
        min-height: 560px;
        padding: 24px 24px 165px;
        align-items: flex-start;
    }
    .message-card-content {
        width: 100%;
        margin-right: 0;
        text-align: left;
        padding-top: 0;
    }
    .message-card h2 { font-size: clamp(30px, 9vw, 46px); margin-bottom: 18px; }
    .message-text { font-size: 11px; line-height: 1.42; }
    .message-text p { margin-bottom: 6px; }
    .message-character-wrap { height: 62%; max-width: 68%; right: -22px; bottom: 92px; }
    .timers { z-index: 8; }
}

@media (max-width: 380px) {
    .message-card { min-height: 520px; padding-left: 18px; padding-right: 18px; }
    .message-card h2 { font-size: 29px; }
    .message-text { font-size: 10px; }
    .message-character-wrap { height: 56%; max-width: 70%; bottom: 94px; right: -20px; }
}


/* =============================
   FINAL MOBILE / SPACING TUNING
   ============================= */
.message-label { display: none; }

.message-card-content {
    transform: translateY(8px);
}

.timers {
    gap: 14px;
}

@media (min-width: 2200px) and (min-height: 1200px) {
    .timers { gap: 18px; }
}

@media (max-width: 700px) {
    .message-card {
        padding-top: 20px;
    }

    .message-card-content {
        transform: translateY(0);
    }

    .message-character-wrap {
        height: 62%;
        max-width: 70%;
        right: -24px;
        bottom: 88px;
    }

    .timers {
        gap: 6px;
    }
}

@media (max-width: 380px) {
    .message-card {
        padding-top: 18px;
    }

    .message-character-wrap {
        height: 58%;
        max-width: 72%;
        right: -22px;
        bottom: 90px;
    }
}

/* Mobile layout: keep the invitation readable and scrollable on phones. */
@media (max-width: 900px) {
  html, body { width: 100%; height: auto; min-height: 100%; }
  body { overflow-x: hidden; overflow-y: auto; -webkit-text-size-adjust: 100%; }
  .screen { width: 100%; height: auto; min-height: 100svh; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 16px) 14px calc(env(safe-area-inset-bottom) + 16px); overflow: visible; perspective: none; align-items: center; }
  .card { width: min(88vw, 420px); height: auto; min-height: 220px; padding: 28px 18px; transform: none; border-radius: 16px; }
  .card-content { transform: none; }
  h1 { font-size: clamp(38px, 11vw, 48px); }
  .small-text { font-size: 11px; line-height: 1.5; }
  .hint { font-size: 12px; }
  .screen.open { align-items: flex-start; }
  .screen.open .card { position: absolute; top: calc(env(safe-area-inset-top) + 16px); left: 50%; width: min(88vw, 420px); height: auto; min-height: 180px; margin: 0; }
  .message-card { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; padding: 24px clamp(18px, 5vw, 24px) 22px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; overflow: hidden; border-radius: 18px; transform: none; }
  .screen.open .message-card { position: relative; inset: auto; visibility: visible; pointer-events: auto; transform: none; }
  .message-card-content, .screen.open .message-card-content { order: 1; width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; transform: none; }
  .message-label, .desktop-break { display: none; }
  .message-card h2 { margin: 0 0 16px; font-size: clamp(32px, 9.2vw, 42px); line-height: .98; letter-spacing: -1.4px; }
  .message-text { max-width: none; margin: 0; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.52; text-align: left; overflow-wrap: anywhere; }
  .message-text p { margin: 0 0 11px; }
  .message-character-wrap, .screen.open .message-character-wrap { position: relative; order: 2; align-self: flex-end; width: min(44vw, 180px); max-width: 48%; height: auto; aspect-ratio: 1024 / 1536; inset: auto; margin: 0; }
  .message-character { width: 100%; height: auto; max-width: 100%; }
  .timers { position: relative; order: 3; inset: auto; width: 100%; margin: 2px 0 0; padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; border-top: 1px solid rgba(255,255,255,.2); }
  .timer-item { position: relative; width: 100%; min-width: 0; }
  .timer-info { display: block; min-width: 0; }
  .timer-date, .timer-value { display: block; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  .timer-divider { display: none; }
}
@media (max-width: 380px) { .screen { padding-right: 12px; padding-left: 12px; } .message-card { padding: 20px 16px 18px; gap: 13px; } .message-card h2 { font-size: clamp(29px, 9vw, 35px); } .message-text { font-size: 14px; line-height: 1.48; } .message-character-wrap { width: min(42vw, 150px); } .timer-caption { font-size: 9px; } .timer-date, .timer-value { font-size: 11px; } }
@media (max-width: 900px) and (orientation: landscape) { .screen.open .message-card { max-width: 820px; padding: 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,190px); grid-template-areas: "copy portrait" "timers timers"; gap: 12px 18px; } .screen.open .message-card-content { grid-area: copy; } .screen.open .message-character-wrap { grid-area: portrait; width: 100%; max-width: none; } .screen.open .timers { grid-area: timers; grid-template-columns: repeat(2,minmax(0,1fr)); } }