/* ============================================================
   LIBRO DEL AMOR — 50-Page Interactive Romantic Book
   styles.css — Book engine, page types, animations, responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Montserrat:wght@300;400;500;600&family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* ─── Custom Properties ────────────────────────────────────── */
:root {
    --red-deep: #8B0000;
    --red: #DC143C;
    --red-light: #FF4D6D;
    --pink: #FF6B8A;
    --pink-light: #FFB3C6;
    --pink-soft: #FFD6E0;
    --rose: #FF007F;
    --gold: #D4A017;
    --gold-light: #F5D060;
    --gold-shimmer: #FFD700;
    --white: #FFF;
    --cream: #FFF8F0;
    --cream-dark: #F5E6D3;
    --parchment: #FDF5E6;
    --brown-light: #8B7355;
    --brown: #5C4033;
    --bg-start: #1a0008;
    --bg-mid: #2d0015;
    --bg-end: #0d0000;
    --font-romantic: 'Dancing Script', cursive;
    --font-elegant: 'Great Vibes', cursive;
    --font-serif: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    --book-w: 820px;
    --book-h: 570px;
    --page-w: 410px;
    --flip-speed: 0.8s;
    --transition: all .4s cubic-bezier(.25, .8, .25, 1);
}

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

html {
    font-size: 16px;
    overflow-x: hidden
}

body {
    font-family: var(--font-serif);
    color: var(--brown);
    background: linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

/* ─── Canvas ───────────────────────────────────────────────── */
#particles-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

/* ─── Music Toggle ─────────────────────────────────────────── */
.music-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1000;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 138, .4);
    background: rgba(139, 0, 0, .6);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    animation: pulse-glow 2.5s ease-in-out infinite
}

.music-toggle:hover {
    background: rgba(220, 20, 60, .8);
    transform: scale(1.1)
}

.music-toggle.playing {
    border-color: var(--gold-shimmer)
}

/* ─── Page Counter ─────────────────────────────────────────── */
.page-counter {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-family: var(--font-romantic);
    font-size: .95rem;
    color: var(--pink-light);
    background: rgba(139, 0, 0, .5);
    backdrop-filter: blur(10px);
    padding: 7px 20px;
    border-radius: 30px;
    border: 1px solid rgba(255, 180, 200, .2);
    letter-spacing: 1px;
    user-select: none
}

/* ─── Section Indicator ────────────────────────────────────── */
.section-indicator {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 100;
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--gold-light);
    background: rgba(92, 0, 32, .5);
    backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(212, 160, 23, .2);
    opacity: .8;
    user-select: none
}

/* ============================================================
   BOOK — 3D Container
   ============================================================ */
.book-scene {
    position: relative;
    z-index: 10;
    perspective: 2000px;
    margin: 15px auto
}

.book {
    position: relative;
    width: var(--book-w);
    height: var(--book-h);
    transform-style: preserve-3d
}

.book::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 5%;
    width: 4px;
    height: 90%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
    z-index: 50;
    border-radius: 2px;
    pointer-events: none
}

/* ─── Book Cover Left ──────────────────────────────────────── */
.book-cover-left {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--page-w);
    height: var(--book-h);
    background: linear-gradient(135deg, #3a0011, #5c0020, #3a0011);
    border-radius: 8px 0 0 8px;
    box-shadow: inset -5px 0 15px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    overflow: hidden
}

.book-cover-left::before {
    content: '';
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(212, 160, 23, .3);
    border-radius: 4px;
    pointer-events: none
}

.cover-left-content {
    text-align: center;
    color: var(--gold-light);
    padding: 2rem
}

.cover-left-content .ornament {
    font-size: 2rem;
    opacity: .7;
    letter-spacing: 8px
}

.cover-left-content .cover-heart {
    font-size: 3rem;
    display: block;
    margin: 1rem 0;
    animation: heartbeat 2s ease-in-out infinite
}

.cover-left-content p {
    font-family: var(--font-romantic);
    font-size: 1.1rem;
    color: var(--pink-soft);
    opacity: .8
}

/* ============================================================
   PAGE — Leaf with front/back faces
   ============================================================ */
.page {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--page-w);
    height: var(--book-h);
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform var(--flip-speed) cubic-bezier(.645, .045, .355, 1);
    cursor: pointer
}

.page.flipped {
    transform: rotateY(-180deg)
}

.page-front,
.page-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    overflow: hidden;
    overflow-y: auto
}

.page-front {
    background: linear-gradient(135deg, var(--cream), var(--parchment));
    box-shadow: inset -4px 0 18px rgba(0, 0, 0, .12);
    border-radius: 0 8px 8px 0;
    z-index: 2
}

.page-back {
    background: linear-gradient(225deg, var(--cream), var(--cream-dark));
    transform: rotateY(180deg);
    box-shadow: inset 4px 0 18px rgba(0, 0, 0, .12);
    border-radius: 8px 0 0 8px;
    z-index: 1
}

.page-front::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .07), rgba(0, 0, 0, .02))
}

.page-back::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .07), rgba(0, 0, 0, .02))
}

/* ─── Page Content Wrapper ─────────────────────────────────── */
.page-content {
    padding: 2rem 1.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.page-content::before {
    content: '❧';
    font-family: serif;
    font-size: 1.3rem;
    color: var(--gold);
    opacity: .2;
    position: absolute;
    top: 12px;
    left: 14px;
    pointer-events: none
}

.page-content::after {
    content: '❧';
    font-family: serif;
    font-size: 1.3rem;
    color: var(--gold);
    opacity: .2;
    position: absolute;
    bottom: 12px;
    right: 14px;
    transform: rotate(180deg);
    pointer-events: none
}

.page-number {
    position: absolute;
    bottom: 10px;
    font-family: var(--font-body);
    font-size: .65rem;
    color: var(--brown-light);
    opacity: .5;
    letter-spacing: 1px
}

.page-front .page-number {
    right: 16px
}

.page-back .page-number {
    left: 16px
}

/* ============================================================
   PAGE TYPES — Visual layouts
   ============================================================ */

/* ─── COVER ────────────────────────────────────────────────── */
.pt-cover {
    background: linear-gradient(135deg, #5c0020, #8B0000, #5c0020) !important;
    color: var(--gold-shimmer)
}

.pt-cover::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px solid rgba(212, 160, 23, .3);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1
}

.pt-cover .page-content {
    align-items: center;
    text-align: center
}

.pt-cover .page-content::before,
.pt-cover .page-content::after {
    color: var(--gold);
    opacity: .3
}

.pt-cover .pg-ornament {
    font-size: 1.3rem;
    letter-spacing: 10px;
    opacity: .5;
    margin-bottom: .8rem
}

.pt-cover .pg-icon {
    font-size: 2.5rem;
    margin: .8rem 0;
    animation: heartbeat 2s ease-in-out infinite
}

.pt-cover .pg-title {
    font-family: var(--font-elegant);
    font-size: 2.6rem;
    color: var(--gold-shimmer);
    text-shadow: 0 2px 10px rgba(212, 160, 23, .4);
    line-height: 1.3;
    margin-bottom: .5rem
}

.pt-cover .pg-subtitle {
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    color: var(--pink-soft);
    margin-bottom: 1rem
}

.pt-cover .pg-name {
    font-family: var(--font-elegant);
    font-size: 2rem;
    color: var(--gold-light);
    text-shadow: 0 0 15px rgba(245, 208, 96, .3)
}

.pt-cover .pg-date {
    font-family: var(--font-body);
    font-size: .75rem;
    color: var(--pink-light);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 1.2rem;
    opacity: .7
}

/* ─── CHAPTER DIVIDER ──────────────────────────────────────── */
.pt-chapter {
    background: linear-gradient(135deg, #3a0011, #5c0020) !important
}

.pt-chapter .page-content {
    align-items: center;
    text-align: center
}

.pt-chapter .pg-chapter-num {
    font-family: var(--font-body);
    font-size: .7rem;
    color: var(--gold);
    letter-spacing: 6px;
    text-transform: uppercase;
    opacity: .6
}

.pt-chapter .pg-chapter-title {
    font-family: var(--font-elegant);
    font-size: 2.2rem;
    color: var(--gold-shimmer);
    margin: .8rem 0;
    text-shadow: 0 0 15px rgba(212, 160, 23, .3)
}

.pt-chapter .pg-chapter-line {
    width: 60px;
    height: 1px;
    background: var(--gold);
    opacity: .4;
    margin: .6rem 0
}

.pt-chapter .pg-chapter-desc {
    font-family: var(--font-romantic);
    font-size: 1rem;
    color: var(--pink-soft);
    opacity: .7;
    max-width: 280px
}

.pt-chapter .page-content::before,
.pt-chapter .page-content::after {
    color: var(--gold);
    opacity: .25
}

/* ─── DEDICATION ───────────────────────────────────────────── */
.pt-dedication .page-content {
    align-items: center;
    text-align: center
}

.pt-dedication .pg-icon {
    font-size: 2rem;
    margin-bottom: .8rem;
    opacity: .8
}

.pt-dedication .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.8rem;
    color: var(--red-deep);
    margin-bottom: 1.2rem
}

.pt-dedication .pg-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--brown);
    line-height: 1.85;
    max-width: 300px
}

.pt-dedication .pg-signature {
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    color: var(--red);
    margin-top: 1.2rem
}

/* ─── STORY ────────────────────────────────────────────────── */
.pt-story .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.7rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .8rem
}

.pt-story .pg-divider {
    text-align: center;
    color: var(--gold);
    font-size: .9rem;
    margin: .6rem 0;
    letter-spacing: 8px;
    opacity: .4
}

.pt-story .pg-text {
    font-family: var(--font-serif);
    font-size: .95rem;
    line-height: 1.8;
    color: var(--brown);
    text-align: justify
}

.pt-story .pg-text.dropcap::first-letter {
    font-family: var(--font-elegant);
    font-size: 3.2rem;
    float: left;
    color: var(--red);
    line-height: .8;
    margin-right: 6px;
    margin-top: 4px
}

/* ─── PHOTO ────────────────────────────────────────────────── */
.pt-photo .page-content {
    align-items: center;
    justify-content: center;
    padding: 1.5rem
}

.pt-photo .pg-frame {
    position: relative;
    width: 88%;
    max-width: 320px;
    border: 3px solid var(--gold);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2)
}

.pt-photo .pg-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(212, 160, 23, .35);
    border-radius: 4px;
    z-index: 2;
    pointer-events: none
}

.pt-photo .pg-frame img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block
}

.pt-photo .pg-caption {
    font-family: var(--font-romantic);
    font-size: 1.05rem;
    color: var(--red-deep);
    text-align: center;
    margin-top: .8rem
}

.pt-photo .pg-subcaption {
    font-family: var(--font-serif);
    font-size: .8rem;
    color: var(--brown-light);
    text-align: center;
    margin-top: .3rem;
    font-style: italic
}

/* ─── QUOTE FULL (single large quote) ──────────────────────── */
.pt-quote-full .page-content {
    align-items: center;
    text-align: center;
    justify-content: center
}

.pt-quote-full .pg-quote-mark {
    font-family: serif;
    font-size: 4rem;
    color: var(--gold);
    opacity: .3;
    line-height: .5;
    margin-bottom: .5rem
}

.pt-quote-full .pg-text {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--brown);
    line-height: 1.9;
    max-width: 300px
}

.pt-quote-full .pg-signature {
    font-family: var(--font-romantic);
    font-size: 1rem;
    color: var(--red);
    margin-top: 1rem;
    opacity: .7
}

/* ─── QUOTE LIST (multiple quotes) ─────────────────────────── */
.pt-quote-list .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .8rem
}

.pt-quote-list .pg-item {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .88rem;
    color: var(--brown);
    text-align: center;
    padding: .5rem .8rem;
    border-left: 2px solid var(--gold);
    margin: .25rem 0;
    opacity: 0;
    transform: translateY(12px);
    transition: all .5s ease-out
}

.pt-quote-list .pg-item.visible {
    opacity: 1;
    transform: translateY(0)
}

.pt-quote-list .pg-item .qh {
    color: var(--red-light);
    font-style: normal;
    margin-left: 4px
}

/* ─── TYPING PAGE ──────────────────────────────────────────── */
.pt-typing .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.6rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .8rem
}

.pt-typing .pg-body {
    font-family: var(--font-serif);
    font-size: .9rem;
    line-height: 1.8;
    color: var(--brown);
    text-align: justify;
    min-height: 180px
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--red);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink-cursor .7s step-end infinite
}

.pt-typing .pg-closing {
    font-family: var(--font-romantic);
    font-size: 1.1rem;
    color: var(--red);
    text-align: right;
    margin-top: .8rem;
    display: none
}

/* ─── REASONS (sticky notes / cards) ───────────────────────── */
.pt-reasons .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.4rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .6rem
}

.pt-reasons .pg-subtitle {
    font-family: var(--font-body);
    font-size: .65rem;
    color: var(--brown-light);
    text-align: center;
    margin-bottom: .6rem;
    letter-spacing: 2px;
    text-transform: uppercase
}

.reasons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center
}

.reason-card {
    background: rgba(255, 240, 243, .85);
    border: 1px solid rgba(220, 20, 60, .12);
    border-radius: 8px;
    padding: .4rem .6rem;
    font-family: var(--font-serif);
    font-size: .78rem;
    color: var(--brown);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    opacity: 0;
    transform: translateY(10px) rotate(-1deg);
    transition: all .4s ease-out;
    max-width: 48%;
    flex: 1 1 45%
}

.reason-card:nth-child(even) {
    transform: translateY(10px) rotate(1deg)
}

.reason-card.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg)
}

.reason-card::before {
    content: '♥ ';
    color: var(--red-light);
    font-size: .7rem
}

/* ─── INTERACTIVE — Hidden Message ─────────────────────────── */
.pt-interactive .page-content {
    align-items: center;
    text-align: center
}

.pt-interactive .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.6rem;
    color: var(--red-deep);
    margin-bottom: .8rem
}

.pt-interactive .pg-text {
    font-family: var(--font-serif);
    font-size: .9rem;
    color: var(--brown);
    margin-bottom: 1rem
}

.hidden-msg {
    font-family: var(--font-romantic);
    font-size: 1.1rem;
    color: var(--red);
    opacity: 0;
    transform: scale(.8);
    transition: all .8s ease-out;
    text-align: center;
    padding: 1rem;
    max-width: 300px;
    border: 1px dashed rgba(220, 20, 60, .2);
    border-radius: 12px;
    margin-bottom: 1rem;
    min-height: 60px
}

.hidden-msg.revealed {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(220, 20, 60, .4);
    box-shadow: 0 0 20px rgba(255, 75, 109, .15)
}

.btn-action {
    font-family: var(--font-romantic);
    font-size: 1rem;
    padding: 10px 28px;
    border: 2px solid var(--red);
    border-radius: 30px;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    transition: var(--transition)
}

.btn-action:hover {
    background: rgba(220, 20, 60, .08);
    box-shadow: 0 0 15px rgba(220, 20, 60, .15)
}

/* ─── INTERACTIVE — Heart Rain ─────────────────────────────── */
.rain-area {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px dashed rgba(220, 20, 60, .15);
    margin: .8rem 0
}

.rain-heart {
    position: absolute;
    top: -30px;
    animation: rain-fall linear forwards;
    pointer-events: none;
    font-size: 1.2rem
}

@keyframes rain-fall {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1
    }

    100% {
        transform: translateY(200px) rotate(360deg);
        opacity: 0
    }
}

/* ─── INTERACTIVE — Quiz ───────────────────────────────────── */
.quiz-option {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: .3rem auto;
    padding: .5rem 1rem;
    font-family: var(--font-serif);
    font-size: .85rem;
    color: var(--brown);
    background: rgba(255, 240, 243, .5);
    border: 1px solid rgba(220, 20, 60, .15);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left
}

.quiz-option:hover {
    background: rgba(255, 220, 230, .7);
    border-color: var(--pink)
}

.quiz-option.correct {
    background: rgba(255, 200, 210, .6);
    border-color: var(--red);
    color: var(--red-deep);
    font-weight: 600
}

.quiz-option.wrong {
    opacity: .4
}

.quiz-result {
    font-family: var(--font-romantic);
    font-size: 1rem;
    color: var(--red);
    margin-top: .6rem;
    opacity: 0;
    transition: opacity .5s
}

.quiz-result.show {
    opacity: 1
}

/* ─── INTERACTIVE — Reveal One by One ──────────────────────── */
.reveal-list {
    list-style: none;
    padding: 0;
    max-width: 300px;
    margin: 0 auto
}

.reveal-list li {
    font-family: var(--font-serif);
    font-size: .88rem;
    color: var(--brown);
    padding: .35rem 0;
    padding-left: 1.2rem;
    position: relative;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .4s ease-out;
    cursor: pointer
}

.reveal-list li.visible {
    opacity: 1;
    transform: translateX(0)
}

.reveal-list li::before {
    content: '♥';
    position: absolute;
    left: 0;
    color: var(--red-light);
    font-size: .7rem;
    top: .45rem
}

.reveal-btn {
    font-family: var(--font-romantic);
    font-size: .9rem;
    padding: 8px 22px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    margin-top: .6rem;
    transition: var(--transition)
}

.reveal-btn:hover {
    background: rgba(212, 160, 23, .1)
}

/* ─── INTERACTIVE — Love Meter ─────────────────────────────── */
.meter-container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto
}

.meter-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(220, 20, 60, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(255, 240, 243, .3);
    position: relative;
    overflow: hidden
}

.meter-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to top, rgba(220, 20, 60, .15), rgba(255, 75, 109, .1));
    transition: height 2s ease-out;
    border-radius: 0 0 50% 50%
}

.meter-value {
    font-family: var(--font-body);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--red);
    z-index: 1
}

.meter-label {
    font-family: var(--font-romantic);
    font-size: .9rem;
    color: var(--brown-light);
    z-index: 1
}

/* ─── INTERACTIVE — Scratch Card ───────────────────────────── */
.scratch-container {
    position: relative;
    width: 260px;
    height: 140px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--gold);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1)
}

.scratch-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    color: var(--red);
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--cream), var(--pink-soft))
}

.scratch-canvas {
    position: absolute;
    inset: 0;
    cursor: crosshair
}

/* ─── FUTURE — Travel Map ──────────────────────────────────── */
.pt-travel .page-content {
    align-items: center;
    text-align: center
}

.travel-map {
    position: relative;
    width: 90%;
    max-width: 320px;
    height: 220px;
    background: rgba(255, 240, 243, .3);
    border-radius: 12px;
    border: 1px solid rgba(220, 20, 60, .1);
    margin: .8rem 0;
    overflow: hidden
}

.travel-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px rgba(220, 20, 60, .5);
    animation: pulse-dot 2s ease-in-out infinite
}

.travel-dot::after {
    content: attr(data-label);
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-romantic);
    font-size: .65rem;
    color: var(--brown);
    white-space: nowrap
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(220, 20, 60, .4)
    }

    50% {
        transform: scale(1.4);
        box-shadow: 0 0 16px rgba(220, 20, 60, .7)
    }
}

/* ─── FUTURE — List ────────────────────────────────────────── */
.pt-future-list .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .8rem
}

.future-item {
    font-family: var(--font-serif);
    font-size: .85rem;
    color: var(--brown);
    padding: .35rem 0 .35rem 1.5rem;
    position: relative;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .4s ease-out
}

.future-item.visible {
    opacity: 1;
    transform: translateX(0)
}

.future-item::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: .6rem;
    top: .45rem
}

/* ─── PROMISE ──────────────────────────────────────────────── */
.pt-promises .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .8rem
}

.promise-item {
    font-family: var(--font-serif);
    font-size: .85rem;
    font-style: italic;
    color: var(--brown);
    text-align: center;
    padding: .4rem .6rem;
    margin: .2rem 0;
    border-bottom: 1px dotted rgba(212, 160, 23, .25);
    opacity: 0;
    transform: translateY(8px);
    transition: all .5s ease-out
}

.promise-item.visible {
    opacity: 1;
    transform: translateY(0)
}

/* ─── SURPRISE ─────────────────────────────────────────────── */
.pt-surprise .page-content {
    align-items: center;
    text-align: center
}

.surprise-area {
    position: relative;
    width: 220px;
    height: 220px;
    margin: .5rem auto
}

/* ─── FINALE ───────────────────────────────────────────────── */
.pt-finale {
    background: linear-gradient(135deg, #5c0020, #8B0000, #5c0020) !important
}

.pt-finale .page-content {
    align-items: center;
    text-align: center
}

.pt-finale .page-content::before,
.pt-finale .page-content::after {
    color: var(--gold);
    opacity: .3
}

.pt-finale .pg-icon {
    font-size: 3rem;
    margin-bottom: .6rem;
    animation: heartbeat 1.5s ease-in-out infinite
}

.pt-finale .pg-title {
    font-family: var(--font-elegant);
    font-size: 2rem;
    color: var(--gold-shimmer);
    margin-bottom: .6rem
}

.pt-finale .pg-text {
    font-family: var(--font-serif);
    font-size: .95rem;
    color: var(--pink-soft);
    line-height: 1.8;
    max-width: 290px;
    margin-bottom: 1.5rem
}

.btn-forever {
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    padding: 13px 36px;
    border: 2px solid var(--gold);
    border-radius: 50px;
    background: transparent;
    color: var(--gold-shimmer);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden
}

.btn-forever::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, .1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s ease-in-out infinite
}

.btn-forever:hover {
    background: rgba(212, 160, 23, .2);
    box-shadow: 0 0 25px rgba(212, 160, 23, .3);
    transform: scale(1.05)
}

/* ─── MEMORIES GRID ────────────────────────────────────────── */
.pt-memories .pg-title {
    font-family: var(--font-elegant);
    font-size: 1.4rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .6rem
}

.memory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem
}

.memory-grid img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--gold);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12)
}

.memory-grid p {
    font-family: var(--font-romantic);
    font-size: .75rem;
    color: var(--brown);
    text-align: center;
    margin-top: .2rem
}

/* ─── EMOTION GALLERY ──────────────────────────────────────── */
.emotion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center
}

.emotion-card {
    background: rgba(255, 240, 243, .6);
    border-radius: 12px;
    padding: .6rem .8rem;
    text-align: center;
    border: 1px solid rgba(220, 20, 60, .1);
    flex: 0 0 45%;
    opacity: 0;
    transform: scale(.9);
    transition: all .5s ease-out
}

.emotion-card.visible {
    opacity: 1;
    transform: scale(1)
}

.emotion-card .em-emoji {
    font-size: 1.5rem;
    display: block;
    margin-bottom: .3rem
}

.emotion-card .em-text {
    font-family: var(--font-romantic);
    font-size: .8rem;
    color: var(--brown)
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.heart-explosion {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    overflow: hidden
}

.explosion-heart {
    position: absolute;
    pointer-events: none
}

.romantic-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(92, 0, 32, .95);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(212, 160, 23, .3);
    border-radius: 24px;
    padding: 2rem;
    z-index: 600;
    text-align: center;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
    max-width: 90vw;
    width: 360px
}

.romantic-popup.show {
    transform: translate(-50%, -50%) scale(1)
}

.romantic-popup .popup-heart {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .8rem;
    animation: heartbeat 1s ease-in-out infinite
}

.romantic-popup .popup-text {
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    color: var(--pink-light);
    line-height: 1.6
}

.romantic-popup .popup-close {
    margin-top: 1rem;
    padding: 8px 24px;
    border: 1px solid rgba(255, 180, 200, .3);
    border-radius: 30px;
    background: transparent;
    color: var(--gold-light);
    font-family: var(--font-romantic);
    font-size: .9rem;
    cursor: pointer;
    transition: var(--transition)
}

.romantic-popup .popup-close:hover {
    background: rgba(255, 75, 109, .2)
}

/* ─── Navigation ───────────────────────────────────────────── */
.book-nav {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: .8rem;
    align-items: center
}

.nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 180, 200, .3);
    background: rgba(139, 0, 0, .5);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center
}

.nav-btn:hover {
    background: rgba(220, 20, 60, .7);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 75, 109, .3)
}

.nav-btn:disabled {
    opacity: .25;
    cursor: not-allowed;
    transform: none
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.15)
    }

    30% {
        transform: scale(1)
    }

    45% {
        transform: scale(1.1)
    }

    60% {
        transform: scale(1)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg)
    }

    100% {
        transform: translateX(100%) rotate(45deg)
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 75, 109, .2)
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 75, 109, .5)
    }
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes float-bloom {
    0% {
        transform: translateY(0) scale(1) rotate(0);
        opacity: 1
    }

    100% {
        transform: translateY(-180px) scale(.5) rotate(40deg);
        opacity: 0
    }
}

@keyframes sparkle-pop {

    0%,
    100% {
        transform: scale(0);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }
}

/* ============================================================
   MINIJUEGOS — Estilos páginas 51–60
   ============================================================ */

/* ─── Shared game styles ───────────────────────────────────── */
.gm-title {
    font-family: var(--font-elegant) !important;
    font-size: 1.4rem !important;
    color: var(--red-deep) !important;
    text-align: center;
    margin-bottom: .3rem !important
}

.gm-text {
    font-family: var(--font-serif) !important;
    font-size: .82rem !important;
    color: var(--brown) !important;
    text-align: center;
    margin-bottom: .5rem !important
}

/* ─── 51: Encuentra los Corazones ──────────────────────────── */
.gm-hearts-area {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
    min-height: 120px;
    padding: .3rem
}

.gm-heart-item {
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform .3s, filter .3s;
    animation: gm-float 3s ease-in-out infinite;
    position: relative;
    user-select: none
}

.gm-heart-item:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px rgba(255, 75, 109, .5))
}

.gm-heart-item.found {
    animation: none;
    transform: scale(1.4);
    filter: drop-shadow(0 0 12px rgba(255, 75, 109, .8))
}

.gm-heart-tip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(92, 0, 32, .9);
    color: var(--gold-light);
    font-family: var(--font-romantic);
    font-size: .7rem;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 10;
    animation: fadeInUp .4s
}

.gm-hearts-score {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem
}

@keyframes gm-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

/* ─── 52: Memoria del Amor ─────────────────────────────────── */
.gm-memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .3rem;
    max-width: 280px;
    margin: 0 auto
}

.gm-mem-card {
    aspect-ratio: 1;
    perspective: 500px;
    cursor: pointer
}

.gm-mem-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .5s
}

.gm-mem-card.flipped .gm-mem-inner,
.gm-mem-card.matched .gm-mem-inner {
    transform: rotateY(180deg)
}

.gm-mem-front,
.gm-mem-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem
}

.gm-mem-front {
    background: linear-gradient(135deg, var(--red-deep), #5c0020);
    color: var(--gold-light);
    font-family: var(--font-romantic);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.gm-mem-back {
    background: var(--cream);
    transform: rotateY(180deg);
    border: 2px solid var(--gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.gm-mem-card.matched .gm-mem-back {
    background: rgba(255, 240, 243, .9);
    box-shadow: 0 0 12px rgba(255, 75, 109, .3)
}

.gm-memory-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s;
    min-height: 1.2rem
}

/* ─── 53: Adivina Cuánto Te Amo ────────────────────────────── */
.gm-guess-options {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: center
}

.gm-guess-btn {
    font-family: var(--font-romantic);
    font-size: .9rem;
    padding: .4rem 1.2rem;
    background: linear-gradient(135deg, rgba(139, 0, 0, .1), rgba(220, 20, 60, .1));
    border: 1px solid rgba(220, 20, 60, .25);
    border-radius: 20px;
    color: var(--brown);
    cursor: pointer;
    transition: all .3s;
    width: 85%;
    max-width: 260px
}

.gm-guess-btn:hover {
    background: rgba(220, 20, 60, .15);
    transform: scale(1.03);
    box-shadow: 0 0 12px rgba(255, 75, 109, .2)
}

.gm-guess-btn.selected {
    background: linear-gradient(135deg, var(--red), var(--red-light));
    color: white;
    border-color: var(--red);
    box-shadow: 0 0 20px rgba(255, 75, 109, .4)
}

.gm-guess-btn.chosen {
    opacity: .5;
    pointer-events: none
}

.gm-guess-result {
    font-family: var(--font-romantic);
    font-size: 1rem;
    color: var(--red);
    text-align: center;
    margin-top: .5rem;
    opacity: 0;
    transition: opacity .4s
}

.gm-guess-anim-area {
    position: relative;
    height: 80px;
    overflow: hidden
}

.gm-guess-heart {
    position: absolute;
    bottom: -20px;
    animation: gm-heart-rise 3s ease-out forwards
}

@keyframes gm-heart-rise {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0
    }

    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1)
    }

    100% {
        transform: translateY(-100px) scale(.5);
        opacity: 0
    }
}

/* ─── 54: Constelación ─────────────────────────────────────── */
.gm-constellation {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    cursor: crosshair;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4), 0 0 30px rgba(255, 215, 0, .1);
    max-width: 100%
}

.gm-constellation-msg {
    font-family: var(--font-romantic);
    font-size: .9rem;
    color: var(--red);
    text-align: center;
    margin-top: .4rem;
    opacity: 0;
    transition: opacity .5s
}

/* ─── 55: Rueda del Amor ───────────────────────────────────── */
.gm-wheel-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto
}

.gm-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 0 20px rgba(212, 160, 23, .3)
}

.gm-wheel-slice {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 50%;
    transform-origin: 0% 100%;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    display: flex;
    align-items: center;
    justify-content: center
}

.gm-wheel-slice span {
    font-family: var(--font-romantic);
    font-size: .5rem;
    color: white;
    transform: rotate(22.5deg);
    text-align: center;
    display: block;
    max-width: 60px;
    line-height: 1.1
}

.gm-wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 1.2rem;
    color: var(--gold-shimmer);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, .6))
}

.gm-wheel-spin {
    margin-top: .5rem !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important
}

.gm-wheel-result {
    font-family: var(--font-romantic);
    font-size: 1rem;
    color: var(--red);
    text-align: center;
    margin-top: .4rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── 56: Flip Cards ───────────────────────────────────────── */
.gm-flip-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .3rem;
    max-width: 320px;
    margin: 0 auto
}

.gm-flip-card {
    perspective: 500px;
    cursor: pointer;
    aspect-ratio: .7
}

.gm-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .6s
}

.gm-flip-card.flipped .gm-flip-inner {
    transform: rotateY(180deg)
}

.gm-flip-front,
.gm-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem;
    text-align: center
}

.gm-flip-front {
    background: linear-gradient(135deg, var(--red-deep), #5c0020);
    color: var(--gold-shimmer);
    font-family: var(--font-elegant);
    font-size: 1.1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25)
}

.gm-flip-back {
    background: var(--cream);
    transform: rotateY(180deg);
    border: 2px solid var(--gold);
    font-family: var(--font-serif);
    font-size: .6rem;
    color: var(--brown);
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15)
}

/* ─── 57: Galería Sorpresa ─────────────────────────────────── */
.gm-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem
}

.gm-gallery-item {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--gold);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
    transition: transform .4s, box-shadow .4s;
    animation: gm-gallery-float 4s ease-in-out infinite
}

.gm-gallery-item:nth-child(2) {
    animation-delay: .5s
}

.gm-gallery-item:nth-child(3) {
    animation-delay: 1s
}

.gm-gallery-item:nth-child(4) {
    animation-delay: 1.5s
}

.gm-gallery-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    transition: transform .4s
}

.gm-gallery-item.expanded {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(255, 75, 109, .3);
    z-index: 10
}

.gm-gallery-item.expanded img {
    transform: scale(1.05)
}

.gm-gallery-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .4rem;
    opacity: 0;
    transition: opacity .4s
}

@keyframes gm-gallery-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

/* ─── 58: Nuestro Futuro ───────────────────────────────────── */
.gm-future-list {
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.gm-future-item {
    font-family: var(--font-serif);
    font-size: .82rem;
    color: var(--brown);
    padding: .4rem .7rem;
    background: rgba(255, 240, 243, .6);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
    opacity: 0;
    transform: translateX(-15px);
    transition: all .5s ease-out
}

.gm-future-item.visible {
    opacity: 1;
    transform: translateX(0)
}

/* ─── 59: Explosión de Amor ────────────────────────────────── */
.gm-explosion-area {
    position: relative;
    height: 150px;
    overflow: hidden
}

.gm-explosion-heart {
    position: absolute;
    bottom: -20px;
    animation: gm-explosion-float linear forwards;
    pointer-events: none
}

.gm-explosion-btn {
    display: block !important;
    margin: .5rem auto 0 !important;
    font-size: 1.2rem !important;
    padding: 12px 40px !important;
    background: linear-gradient(135deg, var(--red), var(--red-light)) !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    box-shadow: 0 0 25px rgba(255, 75, 109, .4) !important;
    transition: all .3s !important
}

.gm-explosion-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 0 40px rgba(255, 75, 109, .6) !important
}

@keyframes gm-explosion-float {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0
    }

    10% {
        opacity: 1;
        transform: translateY(-10px) scale(1)
    }

    100% {
        transform: translateY(-200px) scale(.3) rotate(40deg);
        opacity: 0
    }
}

/* ─── 60: Mensaje Secreto ──────────────────────────────────── */
.gm-secret-heart {
    font-size: 3.5rem;
    text-align: center;
    display: block;
    cursor: pointer;
    transition: transform .3s, filter .3s;
    user-select: none;
    margin: .5rem 0;
    filter: drop-shadow(0 0 10px rgba(255, 75, 109, .3));
    animation: heartbeat 2s ease-in-out infinite
}

.gm-secret-progress {
    width: 70%;
    max-width: 200px;
    height: 6px;
    background: rgba(0, 0, 0, .1);
    border-radius: 3px;
    margin: .5rem auto;
    overflow: hidden
}

.gm-secret-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--red), var(--gold-shimmer));
    border-radius: 3px;
    transition: width .1s
}

.gm-secret-msg {
    font-family: var(--font-serif);
    font-size: .82rem;
    font-style: italic;
    color: var(--brown);
    text-align: center;
    line-height: 1.6;
    max-width: 95%;
    margin: .5rem auto 0;
    opacity: 0;
    transition: opacity .8s
}

/* ============================================================
   RESPONSIVE — Book stays as a book on ALL screen sizes
   ============================================================ */

/* ─── Tablet ───────────────────────────────────────────────── */
@media(max-width:880px) {
    :root {
        --book-w: 620px;
        --book-h: 440px;
        --page-w: 310px
    }

    .pt-cover .pg-title {
        font-size: 2rem
    }

    .pt-cover .pg-name {
        font-size: 1.6rem
    }

    .pt-cover .pg-icon {
        font-size: 2rem
    }

    .page-content {
        padding: 1.4rem 1.2rem
    }

    .pt-photo .pg-frame img {
        height: 200px
    }

    .memory-grid img {
        height: 110px
    }

    .pt-chapter .pg-chapter-title {
        font-size: 1.8rem
    }

    .reason-card {
        font-size: .72rem;
        padding: .3rem .5rem
    }

    .pt-story .pg-text {
        font-size: .88rem
    }
}

/* ─── Small Tablet / Large Phone ───────────────────────────── */
@media(max-width:660px) {
    :root {
        --book-w: 96vw;
        --book-h: 68vw;
        --page-w: 48vw
    }

    body {
        padding: 8px 0
    }

    .book-scene {
        perspective: 1400px;
        margin: 8px auto
    }

    .page-content {
        padding: 1rem .9rem
    }

    .page-content::before,
    .page-content::after {
        font-size: .9rem
    }

    .pt-cover .pg-title {
        font-size: 1.5rem
    }

    .pt-cover .pg-subtitle {
        font-size: .85rem
    }

    .pt-cover .pg-name {
        font-size: 1.3rem
    }

    .pt-cover .pg-icon {
        font-size: 1.8rem
    }

    .pt-cover .pg-ornament {
        font-size: .9rem;
        letter-spacing: 6px;
        margin-bottom: .4rem
    }

    .pt-cover .pg-date {
        font-size: .6rem;
        letter-spacing: 3px;
        margin-top: .6rem
    }

    .pt-cover::before {
        inset: 6px;
        border-width: 1px
    }

    .pt-chapter .pg-chapter-title {
        font-size: 1.4rem
    }

    .pt-chapter .pg-chapter-num {
        font-size: .55rem;
        letter-spacing: 4px
    }

    .pt-chapter .pg-chapter-desc {
        font-size: .8rem;
        max-width: 200px
    }

    .pt-dedication .pg-title {
        font-size: 1.3rem
    }

    .pt-dedication .pg-text {
        font-size: .8rem;
        max-width: 95%;
        line-height: 1.6
    }

    .pt-dedication .pg-icon {
        font-size: 1.5rem;
        margin-bottom: .4rem
    }

    .pt-dedication .pg-signature {
        font-size: .95rem
    }

    .pt-story .pg-title {
        font-size: 1.2rem;
        margin-bottom: .4rem
    }

    .pt-story .pg-text {
        font-size: .75rem;
        line-height: 1.6
    }

    .pt-story .pg-text.dropcap::first-letter {
        font-size: 2.2rem
    }

    .pt-story .pg-divider {
        font-size: .7rem;
        margin: .3rem 0
    }

    .pt-photo .pg-frame {
        width: 92%;
        max-width: 100%
    }

    .pt-photo .pg-frame img {
        height: 140px
    }

    .pt-photo .pg-caption {
        font-size: .85rem;
        margin-top: .4rem
    }

    .pt-photo .pg-subcaption {
        font-size: .65rem
    }

    .pt-quote-full .pg-quote-mark {
        font-size: 2.5rem
    }

    .pt-quote-full .pg-text {
        font-size: .88rem;
        line-height: 1.6;
        max-width: 95%
    }

    .pt-quote-full .pg-signature {
        font-size: .85rem
    }

    .pt-quote-list .pg-title {
        font-size: 1.2rem;
        margin-bottom: .5rem
    }

    .pt-quote-list .pg-item {
        font-size: .72rem;
        padding: .3rem .5rem
    }

    .pt-typing .pg-title {
        font-size: 1.2rem;
        margin-bottom: .4rem
    }

    .pt-typing .pg-body {
        font-size: .72rem;
        line-height: 1.6;
        min-height: 100px
    }

    .pt-typing .pg-closing {
        font-size: .85rem
    }

    .pt-reasons .pg-title {
        font-size: 1.1rem;
        margin-bottom: .3rem
    }

    .pt-reasons .pg-subtitle {
        font-size: .55rem;
        margin-bottom: .3rem
    }

    .reason-card {
        font-size: .65rem;
        padding: .25rem .4rem;
        border-radius: 6px
    }

    .pt-interactive .pg-title {
        font-size: 1.2rem;
        margin-bottom: .5rem
    }

    .pt-interactive .pg-text {
        font-size: .75rem;
        margin-bottom: .5rem
    }

    .hidden-msg {
        font-size: .85rem;
        padding: .6rem;
        max-width: 95%;
        min-height: 40px
    }

    .btn-action {
        font-size: .85rem;
        padding: 7px 18px
    }

    .rain-area {
        height: 120px
    }

    .quiz-option {
        font-size: .72rem;
        padding: .35rem .6rem;
        max-width: 95%
    }

    .quiz-result {
        font-size: .8rem
    }

    .reveal-list li {
        font-size: .72rem;
        padding: .25rem 0 .25rem 1rem
    }

    .reveal-btn {
        font-size: .75rem;
        padding: 6px 16px
    }

    .scratch-container {
        width: 180px;
        height: 100px
    }

    .meter-container {
        width: 130px;
        height: 130px
    }

    .meter-value {
        font-size: 1.8rem
    }

    .meter-label {
        font-size: .7rem
    }

    .meter-bg {
        border-width: 3px
    }

    .travel-map {
        height: 150px
    }

    .travel-dot {
        width: 7px;
        height: 7px
    }

    .travel-dot::after {
        font-size: .5rem;
        bottom: 10px
    }

    .pt-future-list .pg-title {
        font-size: 1.2rem;
        margin-bottom: .5rem
    }

    .future-item {
        font-size: .72rem;
        padding: .25rem 0 .25rem 1.2rem
    }

    .future-item::before {
        font-size: .5rem
    }

    .pt-promises .pg-title {
        font-size: 1.2rem;
        margin-bottom: .5rem
    }

    .promise-item {
        font-size: .72rem;
        padding: .3rem .4rem
    }

    .memory-grid img {
        height: 85px
    }

    .memory-grid p {
        font-size: .6rem
    }

    .emotion-card {
        padding: .4rem .5rem;
        flex: 0 0 44%
    }

    .emotion-card .em-emoji {
        font-size: 1.1rem
    }

    .emotion-card .em-text {
        font-size: .65rem
    }

    .pt-finale .pg-title {
        font-size: 1.4rem
    }

    .pt-finale .pg-text {
        font-size: .78rem;
        max-width: 95%;
        line-height: 1.6;
        margin-bottom: .8rem
    }

    .pt-finale .pg-icon {
        font-size: 2rem;
        margin-bottom: .3rem
    }

    .btn-forever {
        font-size: .9rem;
        padding: 9px 22px
    }

    .cover-left-content .ornament {
        font-size: 1.3rem
    }

    .cover-left-content .cover-heart {
        font-size: 2rem;
        margin: .6rem 0
    }

    .cover-left-content p {
        font-size: .8rem
    }

    .page-number {
        font-size: .5rem
    }

    .book::before {
        width: 2px
    }

    /* Nav & UI */
    .book-nav {
        bottom: 10px
    }

    .nav-btn {
        width: 38px;
        height: 38px;
        font-size: .85rem
    }

    .page-counter {
        bottom: 8px;
        font-size: .75rem;
        padding: 5px 14px
    }

    .section-indicator {
        font-size: .7rem;
        padding: 4px 10px
    }

    .music-toggle {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: .9rem
    }
}

/* ─── Small Phone ──────────────────────────────────────────── */
@media(max-width:400px) {
    :root {
        --book-w: 98vw;
        --book-h: 72vw;
        --page-w: 49vw
    }

    .page-content {
        padding: .8rem .6rem
    }

    .pt-cover .pg-title {
        font-size: 1.2rem
    }

    .pt-cover .pg-name {
        font-size: 1.1rem
    }

    .pt-cover .pg-subtitle {
        font-size: .7rem
    }

    .pt-cover .pg-icon {
        font-size: 1.4rem;
        margin: .3rem 0
    }

    .pt-cover .pg-ornament {
        font-size: .7rem
    }

    .pt-chapter .pg-chapter-title {
        font-size: 1.1rem
    }

    .pt-chapter .pg-chapter-desc {
        font-size: .65rem;
        max-width: 160px
    }

    .pt-story .pg-text {
        font-size: .65rem;
        line-height: 1.5
    }

    .pt-story .pg-title {
        font-size: 1rem
    }

    .pt-photo .pg-frame img {
        height: 100px
    }

    .pt-photo .pg-caption {
        font-size: .7rem
    }

    .reason-card {
        font-size: .58rem;
        padding: .2rem .3rem
    }

    .pt-quote-full .pg-text {
        font-size: .75rem
    }

    .pt-typing .pg-body {
        font-size: .62rem;
        line-height: 1.5;
        min-height: 80px
    }

    .meter-container {
        width: 100px;
        height: 100px
    }

    .meter-value {
        font-size: 1.4rem
    }

    .scratch-container {
        width: 140px;
        height: 80px
    }

    .nav-btn {
        width: 34px;
        height: 34px;
        font-size: .75rem
    }

    .page-counter {
        font-size: .65rem;
        padding: 4px 10px
    }

    .book-nav {
        bottom: 6px;
        gap: .5rem
    }
}

/* ─── Large Desktop ────────────────────────────────────────── */
@media(min-width:1200px) {
    :root {
        --book-w: 920px;
        --book-h: 630px;
        --page-w: 460px
    }
}

/* ─── Accessibility ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .page {
        transition: none !important
    }
}

/* ============================================================
   PÁGINAS 61-110 — Estilos adicionales
   ============================================================ */

/* ─── Catch Hearts ─────────────────────────────────────────── */
.gm-catch-area {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: rgba(255, 240, 243, .3);
    border-radius: 12px
}

.gm-catch-heart {
    position: absolute;
    cursor: pointer;
    user-select: none;
    animation: gm-fall linear forwards;
    font-size: 1.5rem
}

.gm-catch-heart.caught {
    animation: none;
    transform: scale(0);
    transition: transform .2s
}

.gm-catch-score {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem
}

@keyframes gm-fall {
    0% {
        top: -30px;
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: .3
    }
}

/* ─── Puzzle ───────────────────────────────────────────────── */
.gm-puzzle {
    display: grid;
    gap: 2px;
    max-width: 240px;
    margin: 0 auto;
    background: var(--gold);
    border-radius: 8px;
    padding: 2px;
    overflow: hidden
}

.gm-puzzle-piece {
    background: var(--cream);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-romantic);
    font-size: 1.2rem;
    transition: all .3s;
    border-radius: 4px;
    color: var(--brown)
}

.gm-puzzle-piece:hover {
    background: rgba(255, 75, 109, .1)
}

.gm-puzzle-piece.correct {
    background: rgba(255, 240, 243, .8);
    box-shadow: 0 0 8px rgba(255, 75, 109, .3)
}

.gm-puzzle-piece.empty {
    visibility: hidden
}

/* ─── Maze ──────────────────────────────────────────────────── */
.gm-maze {
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    background: #1a0a0f;
    max-width: 100%;
    cursor: pointer
}

.gm-maze-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .5s
}

/* ─── Quiz Multi ───────────────────────────────────────────── */
.gm-quiz {
    max-width: 95%;
    margin: 0 auto
}

.gm-quiz-q {
    font-family: var(--font-romantic);
    font-size: .95rem;
    color: var(--red-deep);
    text-align: center;
    margin-bottom: .4rem
}

.gm-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.gm-quiz-opt {
    font-family: var(--font-serif);
    font-size: .78rem;
    padding: .35rem .8rem;
    border: 1px solid rgba(220, 20, 60, .2);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    transition: all .3s;
    background: rgba(255, 240, 243, .4);
    color: var(--brown)
}

.gm-quiz-opt:hover {
    background: rgba(220, 20, 60, .1)
}

.gm-quiz-opt.correct {
    background: rgba(0, 180, 0, .15);
    border-color: green;
    color: green
}

.gm-quiz-opt.wrong {
    background: rgba(220, 20, 60, .1);
    border-color: var(--red);
    opacity: .5
}

.gm-quiz-result,
.gm-quiz-score {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Find Special ─────────────────────────────────────────── */
.gm-find-grid {
    display: grid;
    gap: .3rem;
    max-width: 240px;
    margin: 0 auto
}

.gm-find-cell {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--red-deep), #5c0020);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all .3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
}

.gm-find-cell:hover {
    transform: scale(1.05)
}

.gm-find-cell.revealed {
    pointer-events: none
}

.gm-find-cell.wrong {
    background: rgba(100, 100, 100, .3);
    opacity: .4
}

.gm-find-cell.found {
    background: linear-gradient(135deg, #FFD700, #FF69B4);
    box-shadow: 0 0 15px rgba(255, 215, 0, .5);
    animation: pulse .5s
}

.gm-find-status {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem
}

/* ─── Memory XL ────────────────────────────────────────────── */
.gm-memxl {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 260px !important
}

/* ─── Fill Phrase ──────────────────────────────────────────── */
.gm-fill {
    max-width: 95%;
    margin: 0 auto
}

.gm-fill-item {
    margin-bottom: .4rem;
    text-align: center
}

.gm-fill-before {
    font-family: var(--font-serif);
    font-size: .82rem;
    color: var(--brown);
    display: inline
}

.gm-fill-opts {
    display: flex;
    gap: .2rem;
    justify-content: center;
    margin-top: .2rem
}

.gm-fill-opt {
    font-family: var(--font-romantic);
    font-size: .78rem;
    padding: .2rem .6rem;
    border: 1px solid rgba(220, 20, 60, .2);
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 240, 243, .4);
    color: var(--brown);
    transition: all .3s
}

.gm-fill-opt:hover {
    background: rgba(220, 20, 60, .1)
}

.gm-fill-opt.correct {
    background: rgba(0, 180, 0, .15);
    border-color: green;
    color: green;
    pointer-events: none
}

.gm-fill-opt.wrong {
    background: rgba(220, 20, 60, .1);
    opacity: .4;
    pointer-events: none
}

.gm-fill-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Collect Kisses ───────────────────────────────────────── */
.gm-collect-area {
    position: relative;
    height: 180px;
    overflow: hidden
}

.gm-collect-kiss {
    position: absolute;
    font-size: 1.6rem;
    cursor: pointer;
    animation: gm-float 2.5s ease-in-out infinite;
    user-select: none
}

.gm-collect-kiss.caught {
    animation: none;
    transform: scale(2);
    opacity: 0;
    transition: all .3s
}

.gm-collect-tip {
    position: absolute;
    font-family: var(--font-romantic);
    font-size: .65rem;
    color: var(--red);
    animation: fadeInUp .5s forwards
}

.gm-collect-score {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem
}

/* ─── Find Bright ──────────────────────────────────────────── */
.gm-bright-area {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    justify-content: center;
    min-height: 140px
}

.gm-bright-heart {
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform .2s;
    user-select: none;
    opacity: .6
}

.gm-bright-heart.bright {
    animation: gm-glow 1.5s ease-in-out infinite
}

.gm-bright-heart:hover {
    transform: scale(1.2)
}

.gm-bright-level {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem
}

@keyframes gm-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, .8));
        opacity: 1
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
        opacity: 1
    }
}

/* ─── Word Builder ─────────────────────────────────────────── */
.gm-wb {
    max-width: 95%;
    margin: 0 auto
}

.gm-wb-cats {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: .4rem
}

.gm-wb-cat {
    flex: 1;
    min-width: 80px
}

.gm-wb-cat label {
    display: block;
    font-family: var(--font-romantic);
    font-size: .65rem;
    color: var(--red);
    text-align: center;
    margin-bottom: .2rem
}

.gm-wb-word {
    font-family: var(--font-serif);
    font-size: .65rem;
    padding: .15rem .4rem;
    border: 1px solid rgba(220, 20, 60, .2);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 240, 243, .4);
    color: var(--brown);
    transition: all .3s;
    display: block;
    width: 100%;
    margin-bottom: .15rem
}

.gm-wb-word:hover {
    background: rgba(220, 20, 60, .1)
}

.gm-wb-word.selected {
    background: var(--red);
    color: white;
    border-color: var(--red)
}

.gm-wb-result {
    background: rgba(255, 240, 243, .6);
    border-radius: 10px;
    padding: .4rem;
    text-align: center;
    border: 1px dashed var(--gold)
}

.gm-wb-phrase {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--brown);
    font-style: italic
}

/* ─── Blur Reveal ──────────────────────────────────────────── */
.gm-blur-wrap {
    max-width: 200px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--gold);
    box-shadow: 0 3px 15px rgba(0, 0, 0, .15)
}

.gm-blur-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    transition: filter .5s;
    display: block
}

.gm-blur-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Connect Pairs ────────────────────────────────────────── */
.gm-connect {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: stretch
}

.gm-connect-left,
.gm-connect-right {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1
}

.gm-connect-item {
    font-family: var(--font-serif);
    font-size: .7rem;
    padding: .3rem .4rem;
    border: 1px solid rgba(220, 20, 60, .2);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all .3s;
    background: rgba(255, 240, 243, .4);
    color: var(--brown)
}

.gm-connect-item:hover {
    background: rgba(220, 20, 60, .1)
}

.gm-connect-item.active {
    background: var(--red);
    color: white;
    border-color: var(--red)
}

.gm-connect-item.matched {
    background: rgba(0, 180, 0, .15);
    border-color: green;
    color: green;
    pointer-events: none
}

.gm-connect-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Balloon ──────────────────────────────────────────────── */
.gm-balloon-wrap {
    text-align: center;
    margin: .3rem 0
}

.gm-balloon {
    font-size: 3rem;
    display: inline-block;
    cursor: pointer;
    transition: transform .15s;
    user-select: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15))
}

.gm-balloon.inflating {
    animation: gm-balloon-bounce .15s
}

.gm-balloon.popped {
    animation: gm-balloon-pop .5s forwards !important
}

.gm-balloon-count,
.gm-balloon-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center
}

.gm-balloon-msg {
    opacity: 0;
    transition: opacity .5s
}

@keyframes gm-balloon-bounce {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15)
    }
}

@keyframes gm-balloon-pop {
    to {
        transform: scale(3);
        opacity: 0;
        filter: blur(4px)
    }
}

/* ─── Paint ─────────────────────────────────────────────────── */
.gm-paint {
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    background: #FFF0F5;
    border: 2px solid var(--gold);
    cursor: crosshair;
    max-width: 100%
}

.gm-paint-colors {
    display: flex;
    gap: .3rem;
    justify-content: center;
    margin-top: .3rem
}

.gm-paint-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s
}

.gm-paint-color:hover,
.gm-paint-color.active {
    border-color: var(--gold);
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0, 0, 0, .2)
}

/* ─── Timeline ─────────────────────────────────────────────── */
.gm-timeline {
    position: relative;
    padding-left: 1rem;
    border-left: 2px solid var(--gold);
    max-height: 260px;
    overflow-y: auto
}

.gm-tl-item {
    position: relative;
    margin-bottom: .5rem;
    animation: fadeInUp .5s both
}

.gm-tl-dot {
    width: 10px;
    height: 10px;
    background: var(--red);
    border-radius: 50%;
    position: absolute;
    left: -1.35rem;
    top: .3rem;
    box-shadow: 0 0 8px rgba(220, 20, 60, .4)
}

.gm-tl-card {
    background: rgba(255, 240, 243, .6);
    border-radius: 8px;
    padding: .3rem .5rem
}

.gm-tl-date {
    font-family: var(--font-romantic);
    font-size: .6rem;
    color: var(--gold-shimmer);
    display: block
}

.gm-tl-card strong {
    font-family: var(--font-elegant);
    font-size: .8rem;
    color: var(--red-deep);
    display: block
}

.gm-tl-card p {
    font-family: var(--font-serif);
    font-size: .7rem;
    color: var(--brown);
    margin: 0
}

/* ─── Vinyl ────────────────────────────────────────────────── */
.gm-vinyl-wrap {
    text-align: center;
    margin: .3rem 0
}

.gm-vinyl-disc {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, #333 20%, #111 22%, #222 48%, #111 50%, #1a1a1a);
    border: 3px solid #333;
    animation: gm-spin 4s linear infinite;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4)
}

.gm-vinyl-label {
    width: 40px;
    height: 40px;
    background: var(--red-deep);
    border-radius: 50%;
    position: relative;
    top: 40px;
    left: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.gm-vinyl-song {
    font-family: var(--font-romantic);
    font-size: .4rem;
    color: var(--gold-light);
    margin: 0
}

.gm-vinyl-artist {
    font-family: var(--font-serif);
    font-size: .35rem;
    color: rgba(255, 255, 255, .7);
    margin: 0
}

.gm-vinyl-lyrics {
    font-family: var(--font-serif);
    font-size: .75rem;
    color: var(--brown);
    font-style: italic;
    text-align: center;
    line-height: 1.6;
    max-height: 80px;
    overflow-y: auto
}

.gm-vinyl-lyrics p {
    margin: .15rem 0;
    opacity: 0;
    animation: fadeInUp .6s both
}

@keyframes gm-spin {
    to {
        transform: rotate(360deg)
    }
}

/* ─── Collage ──────────────────────────────────────────────── */
.gm-collage {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center
}

.gm-collage-item {
    width: 70px;
    height: 55px;
    border: 2px solid white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    cursor: pointer;
    overflow: hidden;
    transition: all .4s
}

.gm-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gm-collage-item:hover {
    transform: scale(1.15) rotate(0deg) !important;
    z-index: 5;
    box-shadow: 0 5px 20px rgba(255, 75, 109, .3)
}

.gm-collage-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Envelopes ────────────────────────────────────────────── */
.gm-envelopes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center
}

.gm-envelope {
    width: 50px;
    height: 40px;
    background: var(--env-color, var(--red));
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    animation: gm-float 3s ease-in-out infinite
}

.gm-envelope:hover {
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3)
}

.gm-envelope.opened {
    transform: scale(1.2);
    opacity: .6
}

.gm-env-icon {
    font-size: 1.2rem
}

.gm-envelope-msg {
    font-family: var(--font-serif);
    font-size: .82rem;
    font-style: italic;
    color: var(--brown);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s;
    line-height: 1.5
}

/* ─── Cloud Dreams ─────────────────────────────────────────── */
.gm-clouds {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center
}

.gm-cloud {
    font-size: 2rem;
    cursor: pointer;
    transition: all .4s;
    animation: gm-cloud-float 5s ease-in-out infinite;
    user-select: none
}

.gm-cloud:hover {
    transform: scale(1.2)
}

.gm-cloud.revealed {
    filter: drop-shadow(0 0 10px rgba(255, 182, 193, .8));
    transform: scale(1.1)
}

.gm-cloud-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

@keyframes gm-cloud-float {

    0%,
    100% {
        transform: translateX(0) translateY(0)
    }

    50% {
        transform: translateX(5px) translateY(-4px)
    }
}

/* ─── Narrative ────────────────────────────────────────────── */
.gm-narrative {
    max-width: 95%;
    margin: 0 auto
}

.gm-nar-line {
    font-family: var(--font-serif);
    font-size: .82rem;
    color: var(--brown);
    text-align: center;
    opacity: 0;
    animation: gm-nar-appear 1s both;
    line-height: 1.6
}

@keyframes gm-nar-appear {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ─── Gallery 3D ───────────────────────────────────────────── */
.gm-g3d {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    perspective: 600px;
    transform-style: preserve-3d
}

.gm-g3d-item {
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    transition: transform .4s;
    animation: gm-g3d-float 4s ease-in-out infinite
}

.gm-g3d-item:hover {
    transform: scale(1.05) rotateY(5deg) translateZ(10px) !important
}

.gm-g3d-item img {
    width: 100%;
    height: 65px;
    object-fit: cover
}

.gm-g3d-item span {
    display: block;
    font-family: var(--font-romantic);
    font-size: .65rem;
    text-align: center;
    padding: .15rem;
    color: var(--brown)
}

@keyframes gm-g3d-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

/* ─── Heart Garden ─────────────────────────────────────────── */
.gm-garden {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
    min-height: 150px;
    align-items: flex-end;
    cursor: pointer
}

.gm-garden-flower {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: gm-grow .8s both
}

.gm-garden-stem {
    width: 2px;
    height: 30px;
    background: linear-gradient(to top, #2d5016, #4a8c2a);
    border-radius: 1px
}

.gm-garden-bloom {
    font-size: 1.3rem;
    margin-bottom: -2px
}

.gm-garden-text {
    font-family: var(--font-romantic);
    font-size: .55rem;
    color: var(--red);
    margin-top: .1rem
}

@keyframes gm-grow {
    0% {
        transform: scaleY(0);
        opacity: 0;
        transform-origin: bottom
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
        transform-origin: bottom
    }
}

/* ─── Universe ─────────────────────────────────────────────── */
.gm-universe {
    position: relative;
    height: 180px;
    background: radial-gradient(circle, #0d001a, #000);
    border-radius: 12px;
    overflow: hidden
}

.gm-planet {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--pl-color), rgba(0, 0, 0, .5));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    box-shadow: 0 0 15px rgba(255, 255, 255, .1);
    animation: gm-orbit 12s linear infinite
}

.gm-planet:nth-child(1) {
    top: 20%;
    left: 15%
}

.gm-planet:nth-child(2) {
    top: 60%;
    left: 65%
}

.gm-planet:nth-child(3) {
    top: 30%;
    left: 75%
}

.gm-planet:nth-child(4) {
    top: 65%;
    left: 20%
}

.gm-planet:hover {
    transform: scale(1.3);
    box-shadow: 0 0 25px var(--pl-color)
}

.gm-pl-name {
    font-family: var(--font-romantic);
    font-size: .5rem;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8)
}

.gm-universe-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--gold-light);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

@keyframes gm-orbit {
    0% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-5px)
    }

    50% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(5px)
    }
}

/* ─── Petal Rain ───────────────────────────────────────────── */
.gm-petals {
    position: relative;
    height: 150px;
    overflow: hidden
}

.gm-petal {
    position: absolute;
    font-size: 1rem;
    animation: gm-petal-fall linear infinite;
    pointer-events: none
}

.gm-petals-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--red);
    text-align: center;
    font-style: italic
}

@keyframes gm-petal-fall {
    0% {
        top: -20px;
        transform: rotate(0) translateX(0)
    }

    100% {
        top: 100%;
        transform: rotate(360deg) translateX(30px)
    }
}

/* ─── Love Portal ──────────────────────────────────────────── */
.gm-portal {
    width: 120px;
    height: 120px;
    margin: .3rem auto;
    position: relative;
    cursor: pointer
}

.gm-portal-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--gold);
    border-radius: 50%;
    animation: gm-spin 3s linear infinite;
    box-shadow: 0 0 20px rgba(255, 215, 0, .3), inset 0 0 20px rgba(255, 75, 109, .2)
}

.gm-portal-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid var(--red);
    border-radius: 50%;
    animation: gm-spin 2s linear infinite reverse
}

.gm-portal-core {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: heartbeat 2s infinite
}

.gm-portal.entered {
    animation: gm-portal-enter .8s forwards
}

.gm-portal-msg {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .6s
}

@keyframes gm-portal-enter {
    to {
        transform: scale(3);
        opacity: 0
    }
}

/* ─── Romantic Scene ───────────────────────────────────────── */
.gm-scene {
    position: relative;
    height: 150px;
    background: linear-gradient(to top, #1a0a0f, #2a0515, #0d001a);
    border-radius: 12px;
    overflow: hidden
}

.gm-scene-particle {
    position: absolute;
    border-radius: 50%;
    animation: gm-scene-glow 3s ease-in-out infinite;
    pointer-events: none
}

.gm-scene-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--gold-light);
    text-align: center;
    font-style: italic
}

@keyframes gm-scene-glow {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8)
    }

    50% {
        opacity: 1;
        transform: scale(1.2)
    }
}

/* ─── Celebration ──────────────────────────────────────────── */
.gm-celeb-emoji {
    display: block;
    text-align: center;
    font-size: 3rem;
    animation: heartbeat 1.5s infinite;
    margin: .3rem 0
}

.gm-celeb-sub {
    font-family: var(--font-elegant);
    font-size: 1.2rem;
    color: var(--gold-shimmer);
    text-align: center;
    text-shadow: 0 2px 10px rgba(212, 160, 23, .4)
}

.gm-celeb-confetti {
    position: relative;
    height: 80px;
    overflow: hidden
}

.gm-confetti-piece {
    position: absolute;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    animation: gm-confetti-fall linear forwards
}

@keyframes gm-confetti-fall {
    0% {
        top: -10px;
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: .2;
        transform: rotate(720deg) translateX(30px)
    }
}

/* ─── Eternal Promise ──────────────────────────────────────── */
.gm-promise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .5rem;
    height: 80px
}

.gm-promise-left,
.gm-promise-right {
    font-size: 2rem;
    animation: gm-merge 4s ease-in-out forwards
}

.gm-promise-left {
    animation-name: gm-merge-left
}

.gm-promise-right {
    animation-name: gm-merge-right
}

.gm-promise-text {
    font-family: var(--font-serif);
    font-size: .82rem;
    color: var(--brown);
    text-align: center;
    font-style: italic;
    opacity: 0;
    animation: fadeInUp 1s 4.5s both;
    line-height: 1.6
}

@keyframes gm-merge-left {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(50% + 20px)) scale(1.3)
    }
}

@keyframes gm-merge-right {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(-50% - 20px)) scale(1.3)
    }
}

/* ─── Love Globe ───────────────────────────────────────────── */
.gm-globe {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #4a90d9, #1a3a6a, #0d1f3c);
    border: 2px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 25px rgba(0, 100, 200, .2);
    animation: gm-spin 20s linear infinite
}

.gm-globe-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transform: rotate(var(--angle)) translateY(-55px);
    transition: all .3s
}

.gm-globe-pin span {
    font-size: .9rem
}

.gm-globe-pin small {
    display: block;
    font-family: var(--font-romantic);
    font-size: .45rem;
    color: var(--gold-light);
    white-space: nowrap;
    text-align: center
}

.gm-globe-pin:hover {
    transform: rotate(var(--angle)) translateY(-55px) scale(1.3)
}

.gm-globe-msg {
    font-family: var(--font-romantic);
    font-size: .82rem;
    color: var(--red);
    text-align: center;
    margin-top: .3rem;
    opacity: 0;
    transition: opacity .4s
}

/* ─── Love Clock ───────────────────────────────────────────── */
.gm-clock {
    display: flex;
    justify-content: center;
    gap: .3rem;
    margin: .5rem 0
}

.gm-clock-row {
    background: linear-gradient(135deg, var(--red-deep), #5c0020);
    border-radius: 10px;
    padding: .4rem .5rem;
    text-align: center;
    min-width: 50px
}

.gm-clock-num {
    font-family: var(--font-elegant);
    font-size: 1.4rem;
    color: var(--gold-shimmer);
    display: block;
    text-shadow: 0 0 10px rgba(212, 160, 23, .4)
}

.gm-clock-row small {
    font-family: var(--font-serif);
    font-size: .55rem;
    color: rgba(255, 255, 255, .7)
}

.gm-clock-label {
    font-family: var(--font-romantic);
    font-size: .85rem;
    color: var(--red);
    text-align: center
}

/* ─── Fireworks ────────────────────────────────────────────── */
.gm-fireworks {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    background: #0a0020;
    cursor: pointer;
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4)
}

/* ─── Grand Finale ─────────────────────────────────────────── */
.gm-finale-effects {
    position: relative;
    height: 60px;
    overflow: hidden
}

.gm-finale-particle {
    position: absolute;
    pointer-events: none;
    animation: gm-finale-float 4s ease-out infinite
}

@keyframes gm-finale-float {
    0% {
        transform: translateY(60px) scale(0);
        opacity: 0
    }

    30% {
        opacity: 1;
        transform: translateY(20px) scale(1)
    }

    100% {
        transform: translateY(-20px) scale(.5);
        opacity: 0
    }
}

/* ============================================================
   RESPONSIVE — Mobile: show only the content page
   ============================================================ */
@media (max-width: 768px) {

    /* Hide the left book cover */
    .book-cover-left {
        display: none !important
    }

    /* Hide the book spine line */
    .book::before {
        display: none
    }

    /* Book takes full viewport width */
    .book-scene {
        width: 100%;
        margin: 10px auto;
        padding: 0 4px
    }

    .book {
        width: 100%;
        height: 85vh;
        max-height: 680px
    }

    /* Pages take full width and are positioned from left */
    .page {
        width: 100%;
        height: 100%;
        right: auto;
        left: 0
    }

    /* Front page: full rounded corners since no left cover */
    .page-front {
        border-radius: 12px;
        box-shadow: 0 4px 25px rgba(0, 0, 0, .25)
    }

    .page-back {
        border-radius: 12px
    }

    /* Bigger text for readability */
    .page-content {
        padding: 1.8rem 1.4rem
    }

    /* Cover page adjustments */
    .pt-cover .pg-title {
        font-size: 2rem
    }

    .pt-cover .pg-subtitle {
        font-size: 1rem
    }

    .pt-cover .pg-name {
        font-size: 1.6rem
    }

    /* Story text larger */
    .pt-story .pg-text {
        font-size: 1rem;
        line-height: 1.9
    }

    .pt-story .pg-text.dropcap::first-letter {
        font-size: 2.8rem
    }

    /* Photo frame fills more space */
    .pt-photo .pg-frame {
        width: 92%;
        max-width: 100%
    }

    .pt-photo .pg-frame img {
        height: 220px
    }

    /* Typing pages */
    .pt-typing .pg-body {
        font-size: .95rem
    }

    /* Quote pages */
    .pt-quote-full .pg-text {
        font-size: 1.1rem;
        max-width: 100%
    }

    /* Reason cards */
    .reason-card {
        max-width: 100%;
        flex: 1 1 46%;
        font-size: .82rem
    }

    /* Chapter titles */
    .pt-chapter .pg-chapter-title {
        font-size: 1.8rem
    }

    /* Navigation */
    .book-nav {
        bottom: 10px
    }

    .nav-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem
    }

    /* Page counter & section indicator */
    .page-counter {
        bottom: 12px;
        font-size: .8rem;
        padding: 5px 14px
    }

    .section-indicator {
        font-size: .75rem;
        padding: 4px 12px;
        max-width: 55%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .music-toggle {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        top: 12px;
        right: 12px
    }

    /* Game titles */
    .gm-title {
        font-size: 1.2rem !important
    }

    .gm-text {
        font-size: .85rem !important
    }

    /* Memory grid */
    .gm-memory-grid {
        gap: 4px !important
    }

    .gm-mem-card {
        min-width: 40px;
        min-height: 40px
    }

    /* Flip cards */
    .gm-flip-grid {
        gap: 4px !important
    }

    .gm-flip-card {
        min-height: 50px
    }

    /* Gallery grid */
    .gm-gallery-grid {
        gap: 6px !important
    }
}

/* Extra small phones */
@media (max-width: 400px) {
    .book {
        height: 80vh
    }

    .page-content {
        padding: 1.2rem 1rem
    }

    .pt-cover .pg-title {
        font-size: 1.7rem
    }

    .pt-cover .pg-icon {
        font-size: 2rem
    }

    .pt-story .pg-text {
        font-size: .92rem
    }

    .pt-photo .pg-frame img {
        height: 180px
    }
}