body {
    margin: 0; padding: 0; background-color: #000000; color: #ffffff;
    font-family: 'Poppins', sans-serif; display: flex; justify-content: center;
    align-items: center; height: 100vh; overflow: hidden;
    overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}

.desktop-block, .landscape-block { display: none; }

.desktop-error-content { text-align: center; padding: 30px; max-width: 400px; }
.desktop-error-content svg { width: 60px; height: 60px; color: #555555; margin-bottom: 20px; }
.desktop-error-content h2 { font-size: 2rem; margin: 0 0 10px; font-weight: 600; color: #ffffff; }
.desktop-error-content p { color: #888888; font-size: 1.1rem; line-height: 1.5; margin: 0; }

@media (min-width: 768px) {
    .desktop-block {
        display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: #000000; z-index: 99999; justify-content: center; align-items: center;
    }
    .screen, .crop-modal, .toggle-tab { display: none !important; }
}

/* Warns to rotate back to portrait, WITHOUT touching the actual page
   underneath — it's purely a visual overlay (position:fixed + z-index), so
   nothing gets hidden or reset. Forcing display:none on .screen/.crop-modal/
   .toggle-tab here previously broke in-progress animations, timers, and
   sequences; everything now just keeps running normally underneath while
   this sits on top, and disappears the instant the phone is upright again. */
@media (orientation: landscape) and (max-height: 500px) {
    .landscape-block {
        display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: #000000; z-index: 99999; justify-content: center; align-items: center;
    }
    .landscape-block .desktop-error-content svg { transform: rotate(90deg); }
}

.screen {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; width: 100%; height: 100%;
    position: absolute; transition: opacity 0.5s ease;
}

#tapScreen { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    cursor: pointer; z-index: 999; background-color: rgba(0, 0, 0, 0.01);
    display: flex; justify-content: center; align-items: center;
}

.hidden { opacity: 0; pointer-events: none; z-index: -1; display: none !important; }
.hidden-ui { opacity: 0; pointer-events: none; display: none; }
.hidden-input { display: none; }

#tapScreen h1 { font-weight: 300; letter-spacing: 4px; font-size: 1.2rem; color: #666666; animation: pulse 2s infinite; pointer-events: none; }

.site-logo {
    width: 90px; height: auto; margin-bottom: 22px;
    filter: drop-shadow(0 0 12px rgba(255, 179, 186, 0.35));
    pointer-events: none;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --- SONG DEDICATION BANNER --- */
.song-dedication {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 500; text-align: center; pointer-events: none;
    opacity: 0; transition: opacity 1.2s ease;
}
.song-dedication.show { opacity: 1; }
.dedication-main {
    font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 1.5px;
    color: #ffb3ba; margin: 0;
    text-shadow: 0 0 5px #ffb3ba, 0 0 15px #ffb3ba, 0 0 28px rgba(255, 179, 186, 0.5);
}
.dedication-sub {
    font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 300; letter-spacing: 1px;
    color: #dddddd; margin: 4px 0 0; opacity: 0.85;
}

/* --- AUTH BADGE (top-right, confirms real signed-in account) --- */
.auth-badge {
    position: fixed; top: 14px; right: 14px; z-index: 500;
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,179,186,0.5);
    padding: 6px 12px; border-radius: 20px;
    font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 500;
    color: #ffe9ec; opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
}
.auth-badge.show { opacity: 1; }
.auth-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #7CFC9C;
    box-shadow: 0 0 6px rgba(124,252,156,0.9); display: inline-block; flex-shrink: 0;
}

/* --- TOGGLE BUTTON + BIG REVEAL TAB --- */
.toggle-btn {
    position: fixed; top: 14px; left: 14px; z-index: 700;
    width: 44px; height: 44px; cursor: pointer;
}
.toggle-btn.shrink {
    animation: toggleShrink 0.35s ease;
}
@keyframes toggleShrink {
    0% { transform: scale(1); }
    50% { transform: scale(0.72); }
    100% { transform: scale(1); }
}

.toggle-tab {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(0,0,0,0.78);
    align-items: center; justify-content: center;
}
.toggle-tab.open {
    display: flex; animation: toggleTabFade 0.5s ease forwards;
}
.toggle-tab.closing {
    display: flex; animation: toggleTabFade 0.35s ease reverse forwards;
}
@keyframes toggleTabFade {
    0% { opacity: 0; } 100% { opacity: 1; }
}

.toggle-tab-inner {
    width: 88%; max-width: 380px; min-height: 320px;
    background: #0c0c0c; border: 2px solid rgba(255,179,186,0.35);
    border-radius: 22px; padding: 44px 24px 34px;
    display: flex; flex-direction: column; align-items: center;
    /* flex-start (not center) so text always lands in the same spot near the
       top — with "center" the whole stack recentered itself every time an
       image appeared below the caption, which looked like the text jumping */
    justify-content: flex-start;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    text-align: center;
    position: relative;
}

.toggle-close-btn {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,179,186,0.4);
    color: #ffb3ba; font-size: 0.95rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.toggle-close-btn:hover, .toggle-close-btn:active {
    background: #ffb3ba; color: #000000;
}
.toggle-close-btn.shrink {
    animation: toggleShrink 0.35s ease;
}

.toggle-text {
    font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 500;
    color: #ffffff; line-height: 1.5; opacity: 0; transition: opacity 0.4s ease;
    min-height: 30px;
}
.toggle-text.show { opacity: 1; }

.toggle-image {
    max-width: 100%; max-height: 280px; border-radius: 14px; margin-top: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); object-fit: contain;
    opacity: 0; transition: opacity 0.25s ease;
}
.toggle-image.show { opacity: 1; }

/* Heart-wave finale: a solid core heart with rippling copies of the same
   shape pulsing outward from its center, "ILY" centered on top */
.heart-anim {
    position: relative; width: 200px; height: 200px; margin-top: 14px;
    display: none; align-items: center; justify-content: center;
}
.heart-anim.show {
    display: flex; animation: heartAnimIn 0.6s ease forwards;
}
@keyframes heartAnimIn {
    0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); }
}
.heart-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.heart-wave {
    fill: #8b0000; opacity: 0;
    transform-origin: center; transform-box: fill-box;
    animation: heartWave 3.3s ease-out infinite;
}
.heart-wave.wave1 { animation-delay: 0s; }
.heart-wave.wave2 { animation-delay: 1.1s; }
.heart-wave.wave3 { animation-delay: 2.2s; }
@keyframes heartWave {
    0% { transform: scale(0.55); opacity: 0.55; }
    70% { opacity: 0.12; }
    100% { transform: scale(1.9); opacity: 0; }
}
.heart-core {
    fill: #7a0d0d;
    transform-origin: center; transform-box: fill-box;
    animation: heartPulse 1.8s ease-in-out infinite;
}
@keyframes heartPulse {
    0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); }
}
.heart-ily {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem;
    color: #ffe3e6; letter-spacing: 2px; text-shadow: 0 0 8px rgba(0,0,0,0.5);
    pointer-events: none;
}

#typewriterText, .dynamic-text {
    font-size: 1.4rem; text-align: center; width: 90%; max-width: 450px;
    min-height: 100px; margin-bottom: 40px; font-weight: 400; line-height: 1.6; padding: 0 15px;
}

/* --- NEW STACKED LOGIN FORM --- */
.login-form {
    display: flex; flex-direction: column; align-items: center; 
    width: 85%; max-width: 320px; gap: 20px;
}

.input-wrapper {
    display: flex; flex-direction: column; gap: 15px; width: 100%;
}

input {
    width: 100%; padding: 16px 20px; background-color: transparent; border: 2px solid #444444;
    border-radius: 12px; color: #eaeaea; font-size: 1.1rem; font-family: 'Poppins', sans-serif;
    outline: none; box-sizing: border-box; transition: all 0.3s ease; letter-spacing: 1px; appearance: none; 
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #000000 inset !important; -webkit-text-fill-color: #eaeaea !important; }
input:focus { border-color: #ffb3ba; background-color: rgba(255, 179, 186, 0.05); box-shadow: 0 0 15px rgba(255, 179, 186, 0.2); }

.login-btn {
    width: 100%; padding: 16px; background: transparent; border: 2px solid #555555;
    color: #ffffff; border-radius: 12px; font-size: 1.1rem; font-family: 'Poppins', sans-serif; font-weight: 500;
    cursor: pointer; transition: all 0.3s ease; letter-spacing: 2px;
}
.login-btn:hover, .login-btn:active {
    background: #ffb3ba; border-color: #ffb3ba; color: #000000; box-shadow: 0 0 15px rgba(255, 179, 186, 0.4);
}

.heart-icon {
    font-size: 6rem; transition: all 0.5s ease; animation: popHeart 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.slide-in { display: flex; animation: slideInAnim 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: auto; }
@keyframes slideInAnim { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

@keyframes popHeart { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)); } }

.shake-error { animation: shakeAnim 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeAnim {
    10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* --- Story Sequence Layout --- */
.chat-container { display: flex; flex-direction: column; width: 90%; max-width: 400px; gap: 15px; align-items: center; }
.story-text { font-size: 1.2rem; text-align: center; margin: 0; font-weight: 300; line-height: 1.5; color: #dddddd; width: 100%; min-height: 25px; transition: opacity 0.8s ease; }
.message-img { max-width: 80%; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); object-fit: contain; }
.message-img.right { align-self: flex-end; border-bottom-right-radius: 4px; }
.message-img.left { align-self: flex-start; border-bottom-left-radius: 4px; }

.slide-in-msg-right { display: block; animation: msgRightAnim 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes msgRightAnim { 0% { transform: translate(40px, 20px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

.slide-in-msg-left { display: block; animation: msgLeftAnim 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes msgLeftAnim { 0% { transform: translate(-40px, 20px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }

.slide-out-left { animation: slideOutLeftAnim 1s forwards cubic-bezier(0.5, 0, 0.2, 1); pointer-events: none; }
@keyframes slideOutLeftAnim { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100vw); opacity: 0; } }

.fade-in { opacity: 1; transition: opacity 0.8s ease; }
.fade-out { opacity: 0; transition: opacity 0.8s ease; }

/* --- DASHBOARD --- */
#dashboardScreen {
    background-image: url('bg.JPEG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* "safe" keeps the pfps vertically centered in the normal case, but
       falls back to top-aligned (instead of clipping) if the letter panel
       ever makes the content taller than the screen, so scrolling works */
    justify-content: safe center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 0;
    box-sizing: border-box;
}

/* Subtle slowly-drifting checkered texture, layered over bg.JPEG, behind all content */
.dashboard-checker {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(45deg, rgba(255,179,186,0.07) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,179,186,0.07) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,179,186,0.07) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,179,186,0.07) 75%);
    background-size: 46px 46px;
    background-position: 0 0, 0 23px, 23px -23px, -23px 0px;
    animation: checkerDrift 20s linear infinite;
}
@keyframes checkerDrift {
    0% { background-position: 0 0, 0 23px, 23px -23px, -23px 0px; }
    100% { background-position: 46px 46px, 46px 69px, 69px 23px, 23px 46px; }
}

.friends-decor {
    width: 190px; height: auto; margin-bottom: -20px;
    position: relative; z-index: 2; pointer-events: none;
    animation: bounceSoft 2.6s ease-in-out infinite;
}

.profiles-container { display: flex; justify-content: center; gap: 40px; margin-bottom: 40px; width: 100%; position: relative; z-index: 1; }
.profile-card { display: flex; flex-direction: column; align-items: center; }

/* Non-clipping positioning box — holds both the circular pfp AND its
   bounce decoration, since the pfp itself needs overflow:hidden to stay
   round, which would otherwise clip anything positioned outside it */
.pfp-outer { position: relative; width: 140px; height: 140px; }

.pfp-wrapper {
    width: 140px; height: 140px; border-radius: 50%; border: 4px solid #333333;
    overflow: hidden; position: relative; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.pfp-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.pfp-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;
    color: #ffffff; font-size: 1.1rem; opacity: 0; transition: opacity 0.3s ease;
}

.pfp-wrapper.editable { border-color: #ffb3ba; }
.pfp-overlay.show { opacity: 1; }

/* Bouncing corner decoration — lives in .pfp-outer, NOT inside .pfp-wrapper,
   so the wrapper's overflow:hidden (needed for the circular photo mask)
   can't clip it */
.pfp-outer .pfp-decor {
    position: absolute; top: -10px; right: -10px; width: 40px; height: auto;
    pointer-events: none; z-index: 2; animation: bounceSoft 2.4s ease-in-out infinite;
}
@keyframes bounceSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.profile-name { font-family: 'Pacifico', cursive; font-size: 1.8rem; margin: 15px 0 0; color: #ffffff; letter-spacing: 2px; }
.name-letter { transition: color 0.35s ease; }

.timer-section { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }

.neon-pastel {
    font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: 3px;
    color: #ffb3ba; margin-bottom: 15px;
    text-shadow: 0 0 5px #ffb3ba, 0 0 15px #ffb3ba, 0 0 30px rgba(255, 179, 186, 0.4);
}

.timer-display {
    font-size: 1.5rem; font-weight: 300; letter-spacing: 2px; color: #dddddd;
    text-shadow: 0 0 8px rgba(255, 179, 186, 0.35);
}
.timer-display span {
    font-weight: 600; color: #ffffff; font-size: 1.8rem; margin: 0 2px;
    text-shadow: 0 0 6px rgba(255, 179, 186, 0.85), 0 0 18px rgba(255, 179, 186, 0.55);
}

/* --- LETTER TOGGLE + PANEL --- */
.letter-toggle {
    margin-top: 34px; padding: 14px 26px; background: transparent; border: 2px solid #ffb3ba;
    color: #ffb3ba; border-radius: 30px; font-size: 1rem; font-family: 'Poppins', sans-serif; font-weight: 500;
    cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; position: relative; z-index: 1;
}
.letter-toggle:hover, .letter-toggle:active {
    background: #ffb3ba; color: #000000; box-shadow: 0 0 15px rgba(255, 179, 186, 0.4);
}

.letter-panel {
    width: 90%; max-width: 380px; margin-top: 22px; position: relative; z-index: 1;
}
.letter-panel.open {
    display: block; animation: letterOpenAnim 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes letterOpenAnim {
    0% { transform: translateY(15px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.letter-panel.closing {
    display: block; animation: letterCloseAnim 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes letterCloseAnim {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(10px) scale(0.85); opacity: 0; }
}

.letter-window {
    position: relative;
    background: #EDDDC8;
    border: 2px solid #D8C0A0;
    border-radius: 18px;
    padding: 26px 22px 36px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.letter-text {
    font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 400;
    line-height: 1.7; color: #5b4636; white-space: pre-wrap; min-height: 40px;
}
.letter-heart-decor {
    position: absolute; bottom: -14px; right: -10px; width: 46px; height: auto;
    pointer-events: none; animation: bounceSoft 2.2s ease-in-out infinite;
}

/* --- CROP MODAL --- */
/* NOTE: these class names must NOT start with "cropper-". Cropper.js uses
   .cropper-modal and .cropper-container for its own internal elements, and
   our stylesheet loads after cropper.min.css, so our rules would land on
   Cropper's drag box and container and bury the crop UI. */
.crop-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.9); z-index: 9999; display: flex; justify-content: center; align-items: center;
}
.crop-panel { width: 90%; max-width: 400px; background: #111111; padding: 20px; border-radius: 16px; border: 1px solid #333333; font-size: 1rem; line-height: normal; }
.img-container { width: 100%; height: 300px; background: #000000; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.img-container img { display: block; max-width: 100%; }

/* Discord/Instagram-style round crop viewfinder — scoped to our panel so it
   only affects this one Cropper instance, not any future ones */
.crop-panel .cropper-view-box {
    border-radius: 50%;
    outline: 1px solid rgba(255, 179, 186, 0.9);
    outline-color: rgba(255, 179, 186, 0.9);
}
.crop-panel .cropper-face {
    border-radius: 50%;
}

.crop-actions { display: flex; justify-content: space-between; gap: 15px; }
.crop-actions button {
    flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 1rem;
    font-family: 'Poppins', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease; line-height: normal;
}
.btn-cancel { background: #333333; color: #ffffff; }
.btn-save { background: #ffb3ba; color: #000000; box-shadow: 0 0 15px rgba(255, 179, 186, 0.4); }