/* ================= DESIGN SYSTEM ================= */
:root {
    --bg: radial-gradient(circle at 50% 30%, #2b0e3b 0%, #0c0512 100%);
    --card-bg: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.08);
    --card-shadow: 0 30px 70px rgba(0,0,0,0.5);
    --pink: #ff527b;
    --pink-glow: rgba(255,82,123,0.4);
    --pink-light: #ff9fb4;
    --text: #ffffff;
    --muted: #d8ccd6;
    --font-h: 'Playfair Display', serif;
    --font-b: 'Plus Jakarta Sans', sans-serif;
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= RESET ================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
    min-height:100vh;
    background: var(--bg);
    font-family: var(--font-b);
    color: var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px 16px;
    overflow-x: hidden;
}

/* ================= FLOATING HEARTS ================= */
.hearts-background {
    position:fixed; inset:0;
    pointer-events:none;
    z-index:0; overflow:hidden;
}
.floating-heart {
    position:absolute; bottom:-50px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ff527b' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center / contain;
    animation: floatUp 12s linear infinite;
    pointer-events:none; opacity:0.5;
}
@keyframes floatUp {
    0%   { transform:translateY(0) rotate(0deg) scale(0.8); opacity:0; }
    10%  { opacity:0.55; }
    90%  { opacity:0.55; }
    100% { transform:translateY(-115vh) rotate(360deg) scale(1.3); opacity:0; }
}

/* ================= MAIN CONTAINER ================= */
.main-container {
    width:100%; max-width:600px; z-index:10;
}

/* ================= CARD (glassmorphism) ================= */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 32px;
    padding: 40px 36px;
    box-shadow: var(--card-shadow);
    width:100%;
}
.active-screen { display:block; animation: cardIn 0.7s var(--ease-smooth) forwards; }
.hide-screen { display:none; }
@keyframes cardIn {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ================= TYPOGRAPHY ================= */
.title-primary {
    font-family: var(--font-h);
    font-size: 2.5rem;
    font-weight:800;
    text-align:center;
    background: linear-gradient(135deg, #ff7597 0%, #ffcbd5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}
.romantic-message {
    background: rgba(255,255,255,0.02);
    border-left:4px solid var(--pink);
    border-radius:16px;
    padding:20px 22px;
    margin:24px 0 32px;
}
.highlight-text { font-size:1.15rem; font-weight:700; color:#ffdce3; margin-bottom:6px; line-height:1.5; }
.sub-text { font-size:0.9rem; color:var(--muted); line-height:1.5; }
.welcome-emoji, .celebration-emoji {
    font-size:4rem; text-align:center; display:block;
    margin-bottom:16px;
    animation: bounceIcon 2s ease-in-out infinite;
}
@keyframes bounceIcon {
    0%,100% { transform:translateY(0) scale(1); }
    50%      { transform:translateY(-8px) scale(1.08); }
}

/* ================= BUTTONS ================= */
.btn {
    border:none; border-radius:50px;
    padding:15px 32px;
    font-family:var(--font-b); font-size:0.98rem; font-weight:700;
    cursor:pointer;
    transition: all 0.35s var(--ease-bounce);
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none; outline:none;
}
.btn-primary {
    background: var(--pink);
    color:white;
    box-shadow: 0 10px 25px var(--pink-glow);
}
.btn-primary:hover {
    background:#ff7597;
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 16px 32px rgba(255,82,123,0.55);
}
.btn-primary:disabled {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.25);
    box-shadow:none; cursor:not-allowed;
    transform:none;
}
.btn-ghost {
    background:rgba(255,255,255,0.06);
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.08);
}
.btn-ghost:hover { background:rgba(255,255,255,0.12); color:white; transform:translateY(-2px); }
.btn-email {
    background: linear-gradient(135deg, #a855f7 0%, #ff527b 100%);
    box-shadow:0 10px 25px rgba(168,85,247,0.3);
}
.btn-email:hover { box-shadow:0 16px 36px rgba(168,85,247,0.5); }
.btn-pulse { animation: pulsate 2s infinite; }
@keyframes pulsate {
    0%   { box-shadow:0 0 0 0 rgba(255,82,123,0.7); }
    70%  { box-shadow:0 0 0 14px rgba(255,82,123,0); }
    100% { box-shadow:0 0 0 0 rgba(255,82,123,0); }
}

/* ================= PROGRESS HEADER ================= */
.progress-header {
    display:flex; align-items:center; gap:14px;
    margin-bottom:30px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:20px; padding:10px 18px;
}
.question-counter {
    font-size:0.8rem; font-weight:700;
    color:var(--pink-light); white-space:nowrap;
}
.progress-bar-wrap {
    flex-grow:1; height:5px;
    background:rgba(255,255,255,0.08);
    border-radius:20px; overflow:hidden;
}
.progress-bar-fill {
    height:100%;
    background:linear-gradient(90deg,#ff527b,#ff7b52);
    border-radius:20px;
    transition:width 0.5s var(--ease-smooth);
}

/* ================= QUESTION CONTENT ================= */
.question-emoji {
    font-size:3.5rem; text-align:center;
    margin-bottom:12px; display:block;
    animation: popIn 0.4s var(--ease-bounce);
}
@keyframes popIn {
    from { transform:scale(0.4); opacity:0; }
    to   { transform:scale(1);   opacity:1; }
}
.question-text {
    font-size:1.4rem; font-weight:700;
    text-align:center; line-height:1.5;
    color:white; margin-bottom:28px;
}

/* ================= RATING GRID (1-10 circles) ================= */
.rating-grid {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:12px;
    margin-bottom:14px;
}
.rating-btn {
    aspect-ratio:1;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
    font-family:var(--font-b);
    font-size:1.1rem; font-weight:700;
    cursor:pointer;
    transition: all 0.3s var(--ease-bounce);
    position:relative; overflow:hidden;
}
.rating-btn:hover {
    border-color:rgba(255,82,123,0.5);
    background:rgba(255,82,123,0.08);
    color:white;
    transform:scale(1.1);
}
/* Active state: color shifts from red(1) to green(10) via pink */
.rating-btn.selected {
    border-color:transparent;
    color:white;
    transform:scale(1.18);
    box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
/* Each number's color is set dynamically via inline style from JS */

.rating-label {
    text-align:center;
    font-size:0.88rem; font-weight:600;
    color:var(--pink-light);
    min-height:22px;
    margin-bottom:24px;
    transition:all 0.3s ease;
}

/* ================= COMMENT BLOCK ================= */
.comment-block { margin-top:4px; }
.comment-label {
    display:block;
    font-size:0.85rem; font-weight:600;
    color:var(--pink-light);
    margin-bottom:8px;
}
.comment-textarea {
    width:100%;
    background:rgba(0,0,0,0.2);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    padding:14px 18px;
    font-family:var(--font-b); font-size:0.92rem;
    color:white; resize:none; outline:none;
    transition:all 0.3s ease;
}
.comment-textarea::placeholder { color:rgba(255,255,255,0.25); }
.comment-textarea:focus {
    border-color:var(--pink);
    background:rgba(0,0,0,0.3);
    box-shadow:0 0 0 4px rgba(255,82,123,0.18);
}

/* ================= NAVIGATION ================= */
.nav-buttons {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:28px; gap:14px;
}

/* ================= SUCCESS SCREEN ================= */
.text-center { text-align:center; }
.success-sub { color:var(--muted); margin-bottom:24px; font-size:1rem; }

.results-summary {
    display:flex; flex-direction:column; gap:10px;
    margin:20px 0;
    max-height:320px; overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:var(--pink) transparent;
}
.result-item {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:16px;
    padding:14px 18px;
    text-align:left;
    display:flex; flex-direction:column; gap:5px;
}
.result-question { font-size:0.82rem; color:var(--pink-light); font-weight:700; }
.result-score {
    font-size:1.2rem; font-weight:800; color:white;
}
.result-comment { font-size:0.8rem; color:var(--muted); font-style:italic; }

.average-block {
    background:rgba(255,82,123,0.06);
    border:1px dashed rgba(255,82,123,0.3);
    border-radius:20px;
    padding:18px 24px;
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:28px;
}
.average-label { font-size:0.9rem; font-weight:700; color:var(--pink-light); }
.average-score { font-size:2rem; font-weight:900; color:white; }

.success-btn-group {
    display:flex; flex-direction:column; gap:12px; align-items:center;
}
.success-btn-group .btn { width:100%; max-width:380px; }

/* ================= QUESTION TRANSITION ANIMATION ================= */
@keyframes slideInRight {
    from { opacity:0; transform:translateX(40px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-40px); }
    to   { opacity:1; transform:translateX(0); }
}
.slide-in-right { animation:slideInRight 0.4s var(--ease-smooth) forwards; }
.slide-in-left  { animation:slideInLeft  0.4s var(--ease-smooth) forwards; }

/* ================= MOBILE ================= */
@media(max-width:560px){
    .card { padding:28px 16px; border-radius:24px; }
    .title-primary { font-size:2rem; }
    .question-text { font-size:1.2rem; }
    .rating-grid { gap:8px; }
    .rating-btn { font-size:1rem; }
    .nav-buttons { flex-direction:row; }
}