/* ============================================================
   mobile.css — Mobile-specific styles (max-width: 768px)
   ============================================================ */

.outer-wrapper {
    padding: 0;
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
}

.pov-title { display: none; }
.annotation-text { display: none; }
.laptop-camera { display: none; }
.laptop-bottom-bezel { display: none; }

#laptop-frame {
    background: transparent;
    padding: 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: none;
    transform: none;
}

#laptop-screen {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================
   TORN PAPER EDGE — Hidden on mobile (takes too much viewport space)
   ============================================================ */
.torn-edge-left {
    display: none;
}

/* ============================================================
   BOTTOM DECORATIONS — Smaller, tucked into corner, behind content
   ============================================================ */
.deco-bottom-pink-grid {
    width: 160px;
    bottom: -30px;
    right: 40px;
    opacity: 0.5;
    z-index: 0;
}

.deco-bottom-vintage-corner {
    width: 150px;
    bottom: -30px;
    right: -20px;
    opacity: 0.5;
    z-index: 0;
}

/* ============================================================
   DECORATIONS — Behind content on mobile
   ============================================================ */
.decorations {
    z-index: 0;
}

/* Ensure content sits above all decorations */
.screen-content {
    justify-content: flex-start;
}

.screen-main-content {
    z-index: 2;
    justify-content: flex-start;
    position: relative;
    padding: 15px 15px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Short-content screens: keep centered */
#screen-landing .screen-content,
#screen-accept .screen-content,
#screen-sad .screen-content,
#screen-final .screen-content {
    justify-content: center;
}

/* ============================================================
   ZIGZAG GRIDS — Mobile vertical, compact
   ============================================================ */
.gift-grid,
.bouquet-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 10px 15px;
    padding-bottom: 15px;
}

.gift-grid > *:nth-child(1),
.bouquet-grid > *:nth-child(1) {
    align-self: flex-start;
    margin-left: 10%;
}
.gift-grid > *:nth-child(2),
.bouquet-grid > *:nth-child(2) {
    align-self: center;
}
.gift-grid > *:nth-child(3),
.bouquet-grid > *:nth-child(3) {
    align-self: flex-end;
    margin-right: 10%;
}

.gift-img { width: 120px; }
.bouquet-img { width: 130px; }

/* ============================================================
   TOUCH-FRIENDLY
   ============================================================ */
button,
.btn-primary,
.btn-secondary {
    min-height: 48px;
    min-width: 48px;
    font-size: 1rem;
    padding: 12px 24px;
}

/* ============================================================
   TYPOGRAPHY — Mobile scaled, above decorations
   ============================================================ */
.landing-title { font-size: 2.8rem; position: relative; z-index: 5; }
.screen-heading { font-size: 1.5rem; position: relative; z-index: 5; }
.finale-title { font-size: 2rem; position: relative; z-index: 5; }
.pov-text { font-size: 1.1rem; }

/* ============================================================
   COMPONENTS — Mobile scaled
   ============================================================ */
.doodle-character { width: 120px; height: 130px; }
.envelope-body { width: 200px; height: 140px; }
.result-bouquet-img { max-width: 150px; }
.speech-bubble { font-size: 0.9rem; padding: 6px 12px; }
.polaroid-img { width: 110px; height: 110px; }
.deco-vinyl-gifts { width: 55px; height: 55px; top: 5px; right: 5px; }

/* ============================================================
   STACKED LAYOUTS — Mobile
   ============================================================ */
.bouquet-result-layout {
    flex-direction: column;
    gap: 20px;
}

.letter-layout {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.letter-layout .letter-center {
    order: 1;
    width: 100%;
    max-width: 90%;
}
.letter-layout .photos-left {
    order: 2;
}
.letter-layout .photos-right {
    order: 3;
}
.letter-layout .photos-left,
.letter-layout .photos-right {
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}
/* Show both photo columns side by side */
.letter-layout .photos-column {
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}
.letter-center { max-width: 90%; }

/* Letter screen — shrink to fit one screen + button */
#screen-letter .screen-content {
    justify-content: flex-start !important;
}
#screen-letter .screen-main-content {
    justify-content: flex-start !important;
    padding: 4px 8px 10px !important;
    gap: 4px !important;
}
#screen-letter .letter-center {
    max-width: 95% !important;
    width: 100% !important;
}
#screen-letter .letter-paper {
    padding: 6px 10px !important;
    background-image: repeating-linear-gradient(
        transparent, transparent 19px, rgba(180,160,140,0.25) 19px, rgba(180,160,140,0.25) 20px
    ) !important;
}
#screen-letter .letter-content {
    font-size: 0.75rem !important;
    line-height: 20px !important;
    min-height: unset !important;
}
#screen-letter .letter-content p {
    margin-bottom: 0 !important;
}
#screen-letter .letter-greeting {
    font-size: 0.85rem !important;
    margin-bottom: 1px !important;
}
#screen-letter .letter-signature {
    margin-top: 2px !important;
}
#screen-letter .btn-continue {
    margin-top: 6px !important;
    flex-shrink: 0;
    padding: 8px 20px !important;
    min-height: 36px !important;
    font-size: 0.9rem !important;
}

.music-layout {
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}

.music-toggle {
    width: 44px; height: 44px;
    font-size: 1.2rem;
    bottom: 15px; right: 15px;
}

/* ============================================================
   DECORATIONS — Mobile: smaller, lower opacity, behind content
   ============================================================ */
.deco {
    z-index: 0 !important;
    opacity: 0.6;
}

.deco-torn-bottom-left { width: 140px; opacity: 0.4; }
.deco-torn-top-right-corner { width: 100px; opacity: 0.4; }

.deco-star-1 { width: 50px; }
.deco-star-2 { width: 35px; }
.deco-star-3 { width: 28px; }
.deco-star-4 { width: 30px; }
.deco-star-5 { width: 22px; }

.deco-disco-corner { width: 60px; }
.deco-disco-final { width: 55px; }
#screen-music .vinyl-record-img { width: 150px; height: 150px; }

.deco-small-flower-1 { width: 40px; }
.deco-small-flower-2 { width: 30px; }
.deco-small-flower-3 { width: 35px; }
.deco-flower-bottom-right { width: 65px; }
.deco-flower-music-bottom { width: 45px; }
.deco-flower-music-left { width: 40px; }
.deco-rose-final { width: 45px; }
.deco-sunflower-final { width: 35px; }

.deco-washi-top,
.deco-washi-accent,
.deco-washi-bottom,
.deco-washi-letter-top { width: 80px; opacity: 0.5; }

.deco-heart-accent-1,
.deco-heart-accent-2 { width: 30px; }
.deco-heart-float { width: 35px; }
.deco-heart-final-1 { width: 40px; }
.deco-heart-final-2 { width: 30px; }

.deco-inline-heart { width: 30px; }
.landing-hearts-deco { gap: 35px; }

.deco-love-stickers { width: 70px; }
.deco-sprig-left,
.deco-sprig-right,
.deco-sprig-left-mid { width: 40px; }
.deco-rose-sticker { width: 35px; }
.deco-arrow-photos { width: 35px; }

/* Back button mobile — top-left, clear of headings */
.btn-back {
    left: 10px;
    top: 10px;
    font-size: 0.8rem;
    padding: 4px 10px;
    z-index: 15;
}