*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-image:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.85) 100%),
        url("throne_room_backdrop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-color:burlywood;

    min-height: 100vh;
    margin: 0;
}

/* ---------- Title ---------- */
h1 {
    font-family: "Cinzel", serif;
    font-weight: 800;
    text-align: center;
    color: #e9dfc4;                       /* bone, not yellow */
    margin: 150px 20px 650px;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.9),     /* carved depth */
        0 0 40px rgba(0, 0, 0, 0.8);      /* dark halo for contrast */
    animation: fade 2.5s ease-out both;
}

.line1 {
    display: block;
    font-size: clamp(0.9rem, 2.4vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.5em;
    padding-left: 0.5em;                  /* offsets trailing letter-space so it centres */
    color: #b89b5e;                       /* muted antique gold */
    margin-bottom: 0.5em;
}

.line2 {
    display: block;
    font-size: clamp(2.4rem, 8vw, 6.5rem);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
    line-height: 1.05;
}

h1 em {
    font-style: normal;
    color: #7e181f;                       /* deep crimson */
}

/* Thin gold rule under the title */
h1::after {
    content: "";
    display: block;
    width: min(320px, 60%);
    height: 1px;
    margin: 35px auto 0;
    background: linear-gradient(to right, transparent, #b89b5e, transparent);
}

.scroll-hint {
    position: fixed;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;                 /* never blocks clicks */
    font-family: "Cinzel", serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;                   /* offsets trailing letter-space so it centres */
    text-transform: uppercase;
    color: #b89b5e;                       /* same muted gold as the title's first line */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    opacity: 1;
    transition: opacity 0.6s ease;
    animation: hint-in 1.2s ease-out 3s backwards;   /* appears after the title */
}

.scroll-hint.hidden {
    opacity: 0;
}

.scroll-hint .arrow {
    width: 12px;
    height: 12px;
    border-right: 1px solid #b89b5e;
    border-bottom: 1px solid #b89b5e;
    transform: rotate(45deg);
    animation: bob 2s ease-in-out infinite;
}

@keyframes hint-in {
    from { opacity: 0; }
}

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50%      { transform: translateY(8px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint, .scroll-hint .arrow { animation: hint-in 1.2s ease-out 2.4s backwards ; }
}

h2 {
    color: red;
    font-family: garamond;
    font-size: 4vw;
    text-align: center;
}

p {
    color:rgb(28, 22, 66);
    font-family:"IM Fell English";
    font-size: 2vw;
    padding: 0 100px;
}

iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

/* ---------- Scroll container ---------- */
.scroll {
    --overhang: 24px;
    position: relative;
    isolation: isolate;               /* keeps the paper layer behind the text */
    width: min(900px, calc(100% - 80px));
    margin: 90px auto;
    padding: clamp(50px, 6vw, 70px) clamp(20px, 6vw, 60px);
    text-align: center;
}

/* ---------- Parchment layer (1 + 3): gradient, aged edges, torn outline ---------- */
.scroll-paper {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, #f5e6b8 0%, #e8cf94 70%, #d1b06a 100%);
    box-shadow:
        inset 0 0 60px rgba(120, 70, 20, 0.5),   /* darkened, aged edges */
        0 10px 30px rgba(0, 0, 0, 0.5);          /* lift off the backdrop */
    filter: url(#rough);                          /* torn, uneven edges */
}

/* ---------- Rolled ends (1) ---------- */
.scroll::before,
.scroll::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(-1 * var(--overhang));
    right: calc(-1 * var(--overhang));
    height: 60px;
    border-radius: 0;
    clip-path: polygon(
    /* top edge */
    30px 0, calc(100% - 30px) 0,

    /* right cap, going down */
    calc(100% - 22px) 1px, calc(100% - 15px) 4px, calc(100% - 9px) 9px,
    calc(100% - 4px) 14px, calc(100% - 2px) 22px, 100% 30px,
    calc(100% - 1px) 38px, calc(100% - 4px) 46px, calc(100% - 8px) 51px,
    calc(100% - 15px) 56px, calc(100% - 22px) 59px, calc(100% - 30px) 60px,

    /* bottom edge */
    30px 60px,

    /* left cap, going up */
    22px 59px, 15px 56px, 8px 51px, 4px 46px, 1px 38px, 0 31px,
    2px 22px, 4px 15px, 9px 9px, 16px 4px, 22px 1px
);
    background: linear-gradient(to bottom,
        #a8803f 0%,      /* shadowed underside of the curl */
        #d1b06a 18%,     /* matches the paper's outer colour */
        #e8cf94 40%,     /* matches the paper's mid colour */
        #f5e6b8 52%,     /* soft highlight, same as paper centre */
        #e8cf94 66%,
        #c29c58 88%,
        #8f6a2e 100%);   /* shadowed underside */
    box-shadow:
        inset 16px 0 14px -10px rgba(120, 70, 20, 0.55),   /* aged, darkened ends */
        inset -16px 0 14px -10px rgba(120, 70, 20, 0.55),  /* same tone as the paper's edges */
        0 6px 12px rgba(0, 0, 0, 0.4);
    filter: url(#rough-soft);
}
.scroll::before { top: -30px; }
.scroll::after  { bottom: -30px; }

/* ---------- Typography and details (4) ---------- */
.scroll h2 {
    color: #7a1f1f;
    font-family: "Cinzel", garamond, serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.scroll p {
    color: #3b2410;
    font-family: "IM Fell English", garamond, serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.6;
    padding: 10px 0;
}

.scroll p.tight {
    color: #3b2410;
    font-family: "IM Fell English", garamond, serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.6;
    padding: 0;
    margin-top: -10px;
}

.scroll hr {
    border: none;
    height: 2px;
    margin: 40px 0;
    background: linear-gradient(to right, transparent, #7a4e1d, transparent);
}

.scroll iframe {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 672px;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 4px solid #7a4e1d;
    box-sizing: border-box;
}

/* Buttons */
.scroll .download-btn,
.scroll .buy-btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: "Cinzel", serif;
    font-weight: 600;
    text-decoration: none;
    color: #d8bd6b;
    background: #7a1f1f;
    border: 2px solid #3b2410;
    border-radius: 4px;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.scroll .download-btn:hover,
.scroll .buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
    .scroll {
        --overhang: 12px;                 /* keeps the rolls on screen */
        width: calc(100% - 56px);         /* 28px margin each side, more than the overhang */
    }

    h1 .line1 {
        letter-spacing: 0.25em;           /* 0.5em can overflow narrow screens */
        padding-left: 0.25em;
    }

    .scroll .download-btn,
    .scroll .buy-btn {
        display: block;                   /* full-width, easy to tap */
        padding: 14px 16px;
    }
}

@keyframes grow-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

h1 {
    transform-origin: center;
    animation: grow-in 3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}

.scroll {
    transform-origin: center top;
    animation: grow-in 3s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both;
}