/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --rose:    #c8506a;
    --blush:   #f2d0db;
    --cream:   #fff8f0;
    --gold:    #c9963a;
    --dark:    #2c1a2e;
    --card-bg: rgba(255, 248, 245, 0.92);
}

html, body {
    height: 100%;
    font-family: 'Georgia', serif;
    background: linear-gradient(135deg, #1a0a1e 0%, #3b1030 50%, #1c0c20 100%);
    color: var(--dark);
    overflow: hidden;
}

/* ── Particle canvas ── */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Screens ── */
.screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 10;
}
.screen.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}
.screen.out {
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    pointer-events: none;
}

/* ── Card ── */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 80, 106, 0.25);
    border-radius: 2rem;
    padding: 2.8rem 2.4rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;   /* anchor for .btn-no */
    box-shadow:
        0 8px 40px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.08) inset;
    animation: cardIn 0.5s ease forwards;
}

@keyframes cardIn {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.final-card {
    border-color: rgba(201, 150, 58, 0.4);
    box-shadow:
        0 8px 60px rgba(201,150,58,0.25),
        0 0 0 1px rgba(255,255,255,0.1) inset;
}

/* ── Typography ── */
.big-emoji {
    font-size: 3.6rem;
    margin-bottom: 1rem;
    display: block;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

h1 {
    font-size: 2rem;
    color: var(--rose);
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}
h2 {
    font-size: 1.5rem;
    color: var(--rose);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.subtitle {
    font-size: 1rem;
    color: #5a3a50;
    margin-bottom: 1.6rem;
    line-height: 1.6;
}
.love-note {
    font-style: italic;
    color: var(--rose);
    margin-top: 1rem;
    font-size: 1.05rem;
}
.hint {
    font-size: 0.82rem;
    color: #a0607a;
    margin-top: 0.8rem;
    min-height: 1.1em;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, var(--rose), #a0304e);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2.4rem;
    font-size: 1.05rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(200,80,106,0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(200,80,106,0.55);
}
.btn-primary:active { transform: translateY(0); }

/* ── Yes / No row ── */
.yn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.4rem;
    /* needs height so the absolute nein-btn has a reference area */
    min-height: 3.4rem;
    position: static;
}

.btn-yes {
    background: linear-gradient(135deg, #b5295a, #8a1a40);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2.2rem;
    font-size: 1.1rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(181,41,90,0.5);
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    z-index: 2;
}
.btn-yes:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 32px rgba(181,41,90,0.6);
}

/* Nein button is absolute inside .card */
.btn-no {
    background: rgba(255,255,255,0.55);
    color: #a07090;
    border: 1.5px solid #c8a0b8;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: default;
    position: absolute;
    /* start bottom-right, away from the Ja button */
    bottom: 1.4rem;
    right: 1.6rem;
    z-index: 1;
    transition: left 0.22s ease, top 0.22s ease, bottom 0.22s ease,
                right 0.22s ease, opacity 0.25s, font-size 0.25s;
    user-select: none;
}

/* ── Choice grid ── */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.btn-choice {
    background: rgba(200,80,106,0.08);
    color: var(--dark);
    border: 1.5px solid rgba(200,80,106,0.3);
    border-radius: 1rem;
    padding: 0.75rem 0.8rem;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-choice:hover {
    background: rgba(200,80,106,0.18);
    border-color: var(--rose);
    transform: scale(1.03);
}
.btn-choice.glow {
    background: rgba(200,80,106,0.15);
    border-color: var(--rose);
    box-shadow: 0 0 12px rgba(200,80,106,0.3);
}

/* ── Date form ── */
.date-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.4rem;
}

input[type="date"] {
    background: rgba(200,80,106,0.07);
    border: 1.5px solid rgba(200,80,106,0.35);
    border-radius: 1rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.05rem;
    font-family: inherit;
    color: var(--dark);
    width: 100%;
    max-width: 260px;
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
input[type="date"]:focus { border-color: var(--rose); }

/* ── Responsive ── */
@media (max-width: 400px) {
    .card { padding: 2rem 1.4rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }
    .choice-grid { grid-template-columns: 1fr; }
    .big-emoji { font-size: 2.8rem; }
}