:root {
    --cover-color: #2c1a10;
    --paper-color: #f4eedb;
    --text-color: #3e2723;
    --gold: #d4af37;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #1a1a1a;
    background-image: radial-gradient(circle at center, #2a2a2a 0%, #111 100%);
    font-family: 'Playfair Display', serif;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    min-width: 100vw;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Screens */
.screen-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 5, 2, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--paper-color);
    text-align: center;
    transition: opacity 1s ease;
}

.screen-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.start-content h1, .end-content h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 4.5rem;
    margin-bottom: 10px;
    color: var(--gold);
    text-shadow: 0 2px 15px rgba(212, 175, 55, 0.4);
}

.start-content p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    opacity: 0.7;
    font-style: italic;
}

#start-btn {
    padding: 12px 35px;
    font-size: 1.2rem;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Playfair Display', serif;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#start-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

/* Book Container */
.screen-overlay,
.book-container {
    min-height: 100dvh;
    height: 100dvh;
}

.book-container {
    width: 100%;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

#book {
    opacity: 0; 
    transform: scale(0.9);
}

/* Pages */
.page {
    background-color: #d4c5b0;
    box-shadow: inset 0 0 80px rgba(101, 67, 33, 0.5), inset 0 0 20px rgba(0,0,0,0.2);
    background-image: 
        linear-gradient(to right, rgba(60, 30, 10, 0.35) 0%, transparent 6%, transparent 94%, rgba(60, 30, 10, 0.35) 100%),
        url('texture.png');
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-blend-mode: multiply;
    overflow: hidden;
    /* Deckled/worn edge simulation */
    clip-path: polygon(
        0.5% 0.8%, 5% 0.2%, 10% 0.6%, 15% 0.1%, 20% 0.8%, 25% 0.3%, 30% 0.7%, 35% 0.2%, 40% 0.9%, 45% 0.1%, 50% 0.7%, 55% 0.2%, 60% 0.8%, 65% 0.1%, 70% 0.6%, 75% 0.3%, 80% 0.8%, 85% 0.1%, 90% 0.7%, 95% 0.2%, 99.5% 0.8%,
        99.8% 5%, 99.2% 10%, 99.7% 15%, 99.1% 20%, 99.9% 25%, 99.3% 30%, 99.8% 35%, 99.2% 40%, 99.7% 45%, 99.1% 50%, 99.8% 55%, 99.3% 60%, 99.7% 65%, 99.2% 70%, 99.9% 75%, 99.3% 80%, 99.8% 85%, 99.1% 90%, 99.6% 95%, 99.5% 99.2%,
        95% 99.8%, 90% 99.3%, 85% 99.9%, 80% 99.2%, 75% 99.7%, 70% 99.1%, 65% 99.8%, 60% 99.3%, 55% 99.7%, 50% 99.2%, 45% 99.9%, 40% 99.3%, 35% 99.8%, 30% 99.1%, 25% 99.7%, 20% 99.2%, 15% 99.8%, 10% 99.1%, 5% 99.7%, 0.5% 99.2%,
        0.2% 95%, 0.8% 90%, 0.1% 85%, 0.7% 80%, 0.2% 75%, 0.9% 70%, 0.3% 65%, 0.8% 60%, 0.1% 55%, 0.7% 50%, 0.2% 45%, 0.9% 40%, 0.3% 35%, 0.8% 30%, 0.1% 25%, 0.7% 20%, 0.2% 15%, 0.8% 10%, 0.1% 5%
    );
}

.page-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Covers */
.page-cover {
    background-color: var(--cover-color);
    color: var(--gold);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9), inset 6px 0 15px rgba(255,255,255,0.1), 10px 10px 20px rgba(0,0,0,0.5);
    background-image: 
        url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1zm2 4h1v1H5V5zm2-2h1v1H7V3z' fill='%23000000' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"),
        linear-gradient(to right, #110a05 0%, #2c1a10 5%, #2c1a10 95%, #110a05 100%);
    border: 1px solid #1a0f09;
}
.page-cover-top {
    border-radius: 3px 15px 15px 3px;
    border-right: 8px solid #1a0f09; /* thick edge */
    border-top: 4px solid #1a0f09;
    border-bottom: 4px solid #1a0f09;
}
.page-cover-bottom {
    border-radius: 15px 3px 3px 15px;
    border-left: 8px solid #1a0f09;
    border-top: 4px solid #1a0f09;
    border-bottom: 4px solid #1a0f09;
}

.cover-design {
    border: 3px double rgba(212, 175, 55, 0.4);
    width: 88%;
    height: 92%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.8);
    position: relative;
    background: rgba(0,0,0,0.2);
}

.book-title {
    font-family: 'Great Vibes', cursive;
    font-size: 5.5rem;
    margin-top: 30px;
    text-shadow: 2px 3px 5px rgba(0,0,0,0.9);
    background: -webkit-linear-gradient(#f9d976, #c5a059);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

.cover-photo {
    width: 220px;
    height: 280px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 6px solid #111;
    outline: 2px solid rgba(212, 175, 55, 0.5);
    outline-offset: -1px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
    filter: sepia(0.4) contrast(1.1) brightness(0.9);
}

/* Internal Pages - Left (Photo) */
.polaroid {
    background: #fafafa;
    padding: 12px 12px 45px 12px;
    box-shadow: 3px 6px 20px rgba(0,0,0,0.15);
    position: relative;
    transform: rotate(-2deg);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    width: 85%;
    max-width: 320px;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
}

.polaroid:nth-child(even) {
    transform: rotate(2deg);
}

.page.active .polaroid:hover, .polaroid:active {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
}

.photo-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border: 1px solid #eee;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}
.polaroid:hover .photo-img {
    opacity: 1;
}

.tape {
    position: absolute;
    width: 90px;
    height: 25px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    top: -12px;
    z-index: 10;
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,0.1);
}
.tape-left {
    left: -25px;
    transform: rotate(-35deg);
}
.tape-right {
    right: -25px;
    transform: rotate(35deg);
}

/* Internal Pages - Right (Text) */
.page-text {
    text-align: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 8%;
    font-family: 'IM Fell English', serif;
    font-size: clamp(1.45rem, 4vw, 2.8rem);
    line-height: 1.25;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-text::before,
.page-text::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.page-text::before {
    inset: 7% 6%;
    border: 0;
    background: linear-gradient(135deg, transparent 0 12%, rgba(94, 58, 36, 0.12) 12% 20%, transparent 20% 100%);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 24px rgba(0,0,0,0.03);
}

.page-text::after {
    inset: 4% 3%;
    border: 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(212, 175, 55, 0.35) 0 4px, transparent 4px),
        radial-gradient(circle at 92% 8%, rgba(212, 175, 55, 0.35) 0 4px, transparent 4px),
        radial-gradient(circle at 8% 92%, rgba(212, 175, 55, 0.35) 0 4px, transparent 4px),
        radial-gradient(circle at 92% 92%, rgba(212, 175, 55, 0.35) 0 4px, transparent 4px),
        linear-gradient(to right, rgba(94, 58, 36, 0.18) 0 1px, transparent 1px 100%),
        linear-gradient(to bottom, rgba(94, 58, 36, 0.18) 0 1px, transparent 1px 100%);
    background-size: auto, auto, auto, auto, 58% 1px, 1px 58%;
    background-position: 8% 8%, 92% 8%, 8% 92%, 92% 92%, center, center;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.page-text .page-text-corner {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50%;
    opacity: 0.8;
    z-index: 0;
}

.page-text .page-text-corner.top-left {
    top: 1.2rem;
    left: 1.2rem;
}

.page-text .page-text-corner.top-right {
    top: 1.2rem;
    right: 1.2rem;
}

.page-text .page-text-corner.bottom-left {
    bottom: 1.2rem;
    left: 1.2rem;
}

.page-text .page-text-corner.bottom-right {
    bottom: 1.2rem;
    right: 1.2rem;
}

.page-text p {
    opacity: 0; 
    transform: translateY(18px);
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.35);
    max-width: min(100%, 24rem);
    width: 100%;
    word-break: break-word;
    hyphens: auto;
    padding: 0 12px;
    position: relative;
    z-index: 1;
    overflow-wrap: anywhere;
    letter-spacing: 0.02em;
}

.ornament {
    margin-top: 18px;
    font-size: 1.8rem;
    color: rgba(62, 39, 35, 0.25);
    opacity: 0;
    text-shadow: 0 0 8px rgba(255,255,255,0.35);
}

/* StPageFlip Shadows */
.page.--left {
    border-right: 0;
    box-shadow: inset -40px 0 40px rgba(0,0,0,0.08);
}
.page.--right {
    border-left: 0;
    box-shadow: inset 40px 0 40px rgba(0,0,0,0.08);
}
.page.--right .page-content { padding-left: 30px; }
.page.--left .page-content { padding-right: 30px; }

/* Responsive */
@media (max-width: 768px) {
    body {
        padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom) 8px;
    }

    .page-text {
        font-size: clamp(1.3rem, 5.9vw, 2rem);
        padding: 0 5%;
        line-height: 1.3;
    }

    .page-text p {
        padding: 0 6px;
        max-width: min(100%, 18rem);
    }

    .page-text::before {
        inset: 6% 4%;
    }

    .page-text::after {
        inset: 2% 1%;
    }

    .book-title {
        font-size: 4rem;
    }

    .polaroid {
        width: min(92%, 280px);
        max-width: 280px;
    }

    .page-content.page-right {
        padding: 18px 12px;
    }

    .page-content.page-left {
        padding: 18px 10px;
    }
}