/* A Little Game Called "I'm Sorry" — responsive romantic game theme */

/* Mobile-friendly heart collection area */
.heart-field {
    position: relative;
    width: 100%;
    min-height: 300px;
    height: 300px;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    z-index: 2;
}

.heart-target {
    position: absolute;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ff5c9a;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    z-index: 5;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.heart-target:active {
    transform: translate(-50%, -50%) scale(0.85);
}

.heart-target.collected {
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.heart-target:focus-visible {
    outline: 2px solid #ff5c9a;
    outline-offset: 4px;
}

.ambient,
.ambient .stars,
#floating-hearts {
    pointer-events: none;
}

@media (max-width: 576px) {
    .heart-field {
        min-height: 280px;
        height: 280px;
    }

    .heart-target {
        width: 58px;
        height: 58px;
        font-size: 42px;
    }
}

:root{--night:#111027;--purple:#29204e;--pink:#ff8fbd;--rose:#ffc0d9;--lav:#c7b8ff;--white:#fff8fc;--muted:#c8bfd9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--white);font-family:"DM Sans",sans-serif;background:radial-gradient(ellipse at 18% 12%,#38255e 0,transparent 38%),radial-gradient(ellipse at 85% 75%,#40234f 0,transparent 35%),linear-gradient(135deg,#111027,#191432 55%,#21132e);overflow-x:hidden}
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff8 50%,transparent 55%),radial-gradient(1px 1px at 70% 20%,#fff9 50%,transparent 55%),radial-gradient(2px 2px at 82% 66%,#f8b8d888 50%,transparent 55%),radial-gradient(1px 1px at 42% 80%,#fff9 50%,transparent 55%);background-size:260px 260px;animation:twinkle 5s ease-in-out infinite alternate}
#floating-hearts{position:absolute;inset:0}.float-heart{position:absolute;bottom:-50px;color:#ff91bd;opacity:0;animation:floatUp linear forwards;text-shadow:0 0 16px #ff8fbd88}
@keyframes floatUp{10%{opacity:.65}90%{opacity:.45}100%{transform:translateY(-110vh) rotate(35deg);opacity:0}}@keyframes twinkle{to{opacity:.4;transform:scale(1.03)}}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.03em}.brand-heart{color:var(--pink);font-size:1.3rem;margin-right:7px}.game-progress{color:#c9bddc;font-size:.68rem;letter-spacing:.14em}.game-progress .progress{width:105px;height:5px;background:#ffffff20}.progress-bar{background:linear-gradient(90deg,#bba5ff,#ff8fbd)}.icon-button{width:40px;height:40px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff0c;color:#fff;font-size:1.05rem}
.main-wrap{position:relative;z-index:1;min-height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;padding-top:20px;padding-bottom:70px}.game-level{width:100%;display:none;animation:levelIn .65s ease both}.game-level.active{display:block}@keyframes levelIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
.glass{background:linear-gradient(145deg,#ffffff12,#ffffff07);border:1px solid #ffffff20;box-shadow:0 24px 70px #05030e55,inset 0 1px #ffffff12;backdrop-filter:blur(16px);border-radius:28px}
.hero-card{max-width:720px;margin:auto;padding:48px 24px 42px}.eyebrow,.section-kicker{font-size:.7rem;letter-spacing:.2em;color:#d5c8eb;text-transform:uppercase}.eyebrow span{display:inline-block;width:22px;height:1px;background:#ff9fc5;vertical-align:middle;margin:0 8px}
.hero-art{height:205px;max-width:270px;margin:12px auto 6px;position:relative;display:grid;place-items:center}.hero-heart{font-size:7rem;color:#ff8fbd;text-shadow:0 0 22px #ff8fbd99,0 0 65px #ff8fbd66;animation:heartbeat 1.8s ease-in-out infinite}.orbit{position:absolute;border:1px solid #e8c7ff44;border-radius:50%;width:185px;height:185px;transform:rotate(-25deg)}.orbit-two{width:230px;height:110px;transform:rotate(35deg);border-color:#ffb5d544}.spark{position:absolute;color:#ffe4f1;font-size:1.5rem}.s1{top:22px;left:38px}.s2{right:24px;top:56px}.s3{bottom:22px;right:50px}@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1)}36%{transform:scale(1.07)}}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:600}h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:8px 0 12px}h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:14px}.pink{color:var(--pink)}.lead-copy{font-size:1.08rem;line-height:1.8;color:#e0d7e9}.tiny-note,.soft-copy{font-size:.82rem;color:#bcb1d0}.btn-love,.btn-outline-love{border-radius:999px;padding:13px 27px;font-weight:700;letter-spacing:.01em;transition:.25s ease}.btn-love{border:0;color:#29142e;background:linear-gradient(100deg,#ffc0d9,#ff8fbd);box-shadow:0 8px 28px #ff8fbd30}.btn-love:hover{color:#29142e;transform:translateY(-3px);box-shadow:0 12px 34px #ff8fbd55}.btn-love:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-outline-love{border:1px solid #ffc0d988;color:#ffe2ef;background:#ffffff08}.btn-outline-love:hover{background:#ffc0d91c;color:white;border-color:#ffc0d9}
.section-kicker{margin-bottom:20px;text-align:center}.section-kicker span{color:var(--pink);padding:0 5px}.message-panel,.challenge-panel,.final-panel{max-width:760px;margin:auto;padding:35px 26px}.body-copy{max-width:610px;margin:0 auto 18px;color:#e1d8e9;line-height:1.9}.sorry-character{height:170px;position:relative;display:flex;align-items:center;justify-content:center;gap:15px}.character-face{font-size:5.2rem;filter:drop-shadow(0 8px 15px #0004);animation:bob 2.5s ease-in-out infinite}.sorry-board{background:#fff0f6;color:#8b426c;padding:12px 17px;border-radius:12px;font-family:"Playfair Display",serif;font-size:1.2rem;transform:rotate(5deg);box-shadow:0 8px 20px #0003}.character-shadow{position:absolute;width:150px;height:14px;background:#0003;filter:blur(9px);bottom:8px;border-radius:50%}@keyframes bob{50%{transform:translateY(-8px)}}
.section-heading{text-align:center;margin-bottom:26px}.section-heading p{color:var(--muted)}.memory-card{height:100%;overflow:hidden;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff20;transition:.3s;cursor:pointer}.memory-card:hover{transform:translateY(-6px);box-shadow:0 16px 35px #0004}.memory-card img{width:100%;height:220px;object-fit:cover;display:block}.memory-caption{padding:14px 15px;color:#f6dfeb;font-size:.9rem;text-align:center}.special-card{height:190px;perspective:900px;cursor:pointer}.special-inner{position:relative;width:100%;height:100%;transition:transform .65s;transform-style:preserve-3d}.special-card.flipped .special-inner{transform:rotateY(180deg)}.special-face{position:absolute;inset:0;border:1px solid #ffffff22;border-radius:20px;background:linear-gradient(145deg,#ffffff16,#ffffff08);display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;backface-visibility:hidden;box-shadow:0 12px 30px #0002}.special-front{font-family:"Playfair Display",serif;font-size:1.3rem;color:#ffe5f0}.special-back{transform:rotateY(180deg);color:#e9dff2;line-height:1.7}.special-front span{display:block;font-size:2rem;margin-bottom:9px}
.game-icon{font-size:3rem;margin-bottom:8px;animation:heartbeat 1.8s infinite}.heart-score{font-size:2rem;font-weight:700;color:#ffb6d2;margin:15px 0 8px}.heart-score small{font-size:.85rem;color:#c9bddc;font-weight:400}.quest-progress{max-width:350px;height:7px;margin:0 auto 18px;background:#ffffff1c}.heart-field{height:185px;max-width:480px;margin:0 auto;position:relative;border-radius:20px;background:#ffffff08;border:1px dashed #ffffff2b;overflow:hidden}.collect-heart{position:absolute;border:0;background:transparent;color:#ff8fbd;font-size:2.2rem;filter:drop-shadow(0 0 10px #ff8fbd88);transition:transform .2s;animation:heartBob 1.8s ease-in-out infinite alternate}.collect-heart:hover{transform:scale(1.3)}.collect-heart.collected{transform:scale(1.8);opacity:0;transition:.35s}.heart-message{min-height:28px;color:#f6d8e7;margin:12px 0 18px}@keyframes heartBob{to{translate:0 -9px}}
.envelope-wrap{text-align:center}.envelope{width:min(100%,530px);height:370px;margin:0 auto;position:relative;perspective:1200px}.envelope-back{position:absolute;inset:50px 0 0;background:#7d426d;border-radius:8px;box-shadow:0 18px 50px #0005}.envelope-front{position:absolute;inset:50px 0 0;background:linear-gradient(145deg,#bd7195,#87466f);clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);border-radius:0 0 8px 8px}.envelope-flap{position:absolute;top:50px;left:0;width:100%;height:62%;background:#d28cac;clip-path:polygon(0 0,100% 0,50% 68%);transform-origin:top;transition:transform .9s;z-index:4}.letter{position:absolute;z-index:2;left:5%;width:90%;height:300px;top:54px;overflow:auto;text-align:left;padding:24px 25px;background:#fff7f4;color:#594052;border-radius:5px;box-shadow:0 5px 22px #0003;transition:transform 1s,top 1s}.letter h3{font-size:1.45rem}.letter p{font-size:.78rem;line-height:1.55;margin-bottom:9px}.letter-heart{color:#d66e9d;text-align:center}.letter-signoff{font-family:"Playfair Display",serif;font-weight:700;font-size:1.05rem!important;text-align:right}.letter-signoff span{color:#df679c}.envelope.open .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter{top:-20px;transform:translateY(-12px);z-index:5}.final-panel{padding:45px 25px}.final-heart{font-size:5rem;color:#ff8fbd;text-shadow:0 0 35px #ff8fbd88;animation:heartbeat 1.8s infinite;margin-bottom:10px}.answer-result{min-height:56px;margin-top:24px;color:#ffe1ed;font-family:"Playfair Display",serif;font-size:1.25rem;line-height:1.5}.replay-link{border:0;background:none;color:#c6b8d8;font-size:.85rem;margin-top:15px}.replay-link:hover{color:white}
.lightbox{display:none;position:fixed;inset:0;background:#090714ed;z-index:10;align-items:center;justify-content:center;flex-direction:column;padding:25px}.lightbox.show{display:flex}.lightbox img{max-width:min(90vw,900px);max-height:75vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 70px #0008}.lightbox p{color:#fff;margin-top:14px}.lightbox button{position:absolute;right:25px;top:20px;background:#ffffff18;border:1px solid #ffffff33;color:#fff;border-radius:50%;width:42px;height:42px}
@media(max-width:575px){.topbar{height:66px}.main-wrap{min-height:calc(100vh - 66px);padding-top:12px}.hero-card{padding:35px 18px}.hero-art{height:175px}.hero-heart{font-size:6rem}.message-panel,.challenge-panel,.final-panel{padding:28px 18px}.memory-card img{height:190px}.envelope{height:390px}.letter{height:310px;padding:20px}.letter p{font-size:.73rem}.character-face{font-size:4.3rem}.sorry-board{font-size:1rem}.game-progress .progress{width:65px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}