/* ==================================================
   THE BLACKTHORN VESPERIUM — STYLE.CSS
   ==================================================

   TABLE OF CONTENTS

   01 — Global Page Styles
   02 — Interior Library
   03 — Haunted Effects + Animations
   04 — Edwin
   05 — Exterior / Library Entrance
   06 — Doorway
   07 — Doorway Threshold
   08 — Silver Bell
   09 — Library Sign
  10 — Outer Stone Walls
11 — Inner Stone Pillars
12 — Arch Stones
13 — Foundation Stones
14 — Temporary / Test Overrides

   ================================================== */


/* ==================================================
   01 — GLOBAL PAGE STYLES
   ================================================== */

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at center, rgba(70, 45, 20, 0.2), transparent 60%),
        #120d0a;

    color: #e8dcc8;
    font-family: Georgia, serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    position: relative;
}
/* ==================================================
   02 — INTERIOR LIBRARY
   ================================================== */


/* --------------------------------------------------
   Library Title + Intro Message
   -------------------------------------------------- */

h1 {
    font-size: 3rem;
    letter-spacing: 4px;
    margin-bottom: 10px;

    text-shadow:
        0 0 8px rgba(255, 220, 150, 0.3),
        0 0 20px rgba(0, 0, 0, 0.8);
}

#library-message {
    font-size: 1.2rem;
    font-style: italic;
    opacity: 0.8;
}
/* --------------------------------------------------
   Bookshelf + Books
   -------------------------------------------------- */
.bookshelf {
    display: flex;
    gap: 12px;

    margin-top: 40px;
    padding: 25px 30px 10px;

    background: #3a2417;

    border-bottom: 12px solid #22140d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
    position: relative;
z-index: 2;
}

.book {
    width: 70px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #5e1f24;
    border: 2px solid #2b1012;
    border-radius: 4px 4px 2px 2px;

    writing-mode: vertical-rl;

    font-size: 18px;
    letter-spacing: 2px;

    cursor: pointer;

    box-shadow:
        inset 4px 0 8px rgba(255, 255, 255, 0.05),
        4px 4px 8px rgba(0, 0, 0, 0.6);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.book:hover {
    transform: translateY(-12px);

    background: #7a2a31;

    box-shadow:
        inset 4px 0 8px rgba(255, 255, 255, 0.08),
        6px 10px 14px rgba(0, 0, 0, 0.8);
}

.cursed-book {
    width: 35px;
    height: 140px;

    background: #171717;
    border-color: #050505;

    position: relative;
}

.cursed-book:hover {
    background: #0b0b0b;
    transform: translateY(-18px);
}
/* ==================================================
   03 — HAUNTED EFFECTS + ANIMATIONS
   ================================================== */
.haunted {
    animation:
        screen-shake 0.35s,
        flicker 0.12s 6;
}

.haunted .cursed-book {
    box-shadow:
        0 0 10px #8b0000,
        0 0 30px #8b0000,
        0 0 60px #3d0000;
}

@keyframes screen-shake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-6px, 3px); }
    40%  { transform: translate(5px, -4px); }
    60%  { transform: translate(-4px, -2px); }
    80%  { transform: translate(6px, 3px); }
    100% { transform: translate(0, 0); }
}

@keyframes flicker {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(0.15); }
    100% { filter: brightness(1); }
}
/* ==================================================
   04 — EDWIN
   ================================================== */
.edwin {
    position: absolute;

    width: 170px;
    height: 220px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -70%)
        scale(0.8);

    background:
        radial-gradient(circle at center, #151515 0%, #050505 70%);

    border-radius: 50% 50% 35% 35%;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.15s ease;

    z-index: 1;

    box-shadow:
        0 0 50px rgba(0, 0, 0, 1);
}

.edwin-eyes {
    display: grid;
    grid-template-columns: repeat(3, 18px);
    gap: 15px;

    justify-content: center;

    margin-top: 55px;
}

.edwin-eyes span {
    width: 12px;
    height: 8px;

    background: #d8a940;

    border-radius: 50%;

    box-shadow:
        0 0 8px #d8a940,
        0 0 15px #7a5415;
}

.edwin-mouth {
    width: 70px;
    height: 25px;

    margin: 30px auto;

    border-bottom: 6px solid #d8d0bd;

    border-radius: 50%;
}

.edwin-horns {
    position: absolute;

    top: -45px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 90px;

    color: #111;
}

.edwin-awake {
    opacity: 1;
}
/* ==================================================
   05 — EXTERIOR / LIBRARY ENTRANCE
   ================================================== */


/* --------------------------------------------------
   Entrance Background + Main Container
   -------------------------------------------------- */
#library-entrance {
    position: fixed;
    inset: 0;

    background-image: url("images/library-exterior1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    z-index: 100;

    transform-origin: center 48%;
    transition:
        transform 0.95s cubic-bezier(0.22, 0.72, 0.2, 1),
        opacity 0.72s ease 0.18s,
        filter 0.9s ease;
}

body.entering-library #library-entrance {
    transform: scale(1.42);
    opacity: 0;
    filter: blur(7px) brightness(1.28);
    pointer-events: none;
}

body.inside-library #library-entrance {
    display: none;
}

#library-interior {
    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    background: #090604;
}

.interior-canvas {
    position: absolute;
    left: 50%;
    top: 50%;

    width: max(100vw, calc(100vh * 1672 / 941));
    aspect-ratio: 1672 / 941;
    transform: translate(-50%, -50%);
}

.interior-canvas img {
    display: block;
    width: 100%;
    height: 100%;
}

.room-hotspot {
    position: absolute;
    z-index: 1;

    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.kitchen-archive-hotspot {
    left: 51.2%;
    top: 27%;
    width: 12.4%;
    height: 25%;
}

.directory-hotspot {
    left: 25.2%;
    top: 43.2%;
    width: 17.2%;
    height: 28.5%;
}

.directory-hotspot::after {
    content: "";
    position: absolute;
    left: 28%;
    top: 21%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 211, 132, 0.22), transparent 68%);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.directory-hotspot:hover::after,
.directory-hotspot:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.room-hotspot span {
    position: absolute;
    left: 50%;
    bottom: 8%;

    min-width: max-content;
    padding: 7px 11px;
    transform: translate(-50%, 6px);

    border: 1px solid rgba(211, 160, 84, 0.62);
    border-radius: 999px;
    background: rgba(18, 10, 7, 0.88);
    color: #f0d39c;

    font-family: Georgia, serif;
    font-size: clamp(10px, 0.9vw, 15px);
    letter-spacing: 0.04em;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.room-hotspot:hover,
.room-hotspot:focus-visible {
    border-color: rgba(226, 173, 91, 0.62);
    background: rgba(222, 151, 66, 0.08);
    box-shadow:
        inset 0 0 35px rgba(248, 179, 82, 0.09),
        0 0 22px rgba(219, 135, 49, 0.1);
    outline: none;
}

.room-hotspot:hover span,
.room-hotspot:focus-visible span {
    opacity: 1;
    transform: translate(-50%, 0);
}

.directory-panel {
    position: fixed;
    inset: 0;
    z-index: 7;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: clamp(72px, 9vh, 110px) 20px 40px;
    background:
        radial-gradient(circle at 50% 20%, rgba(132, 76, 31, 0.2), transparent 43%),
        linear-gradient(rgba(8, 5, 4, 0.87), rgba(4, 3, 3, 0.96)),
        url("images/library-interior.png") center / cover no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.directory-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.close-directory {
    position: fixed;
    left: clamp(14px, 2.2vw, 32px);
    top: clamp(14px, 2.2vw, 32px);
    z-index: 2;
    padding: 10px 16px;
    border: 1px solid rgba(214, 167, 103, 0.54);
    border-radius: 999px;
    background: rgba(15, 9, 6, 0.86);
    color: #e7cfaa;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
}

.close-directory:hover,
.close-directory:focus-visible {
    background: rgba(203, 139, 68, 0.16);
    outline: 2px solid rgba(230, 190, 126, 0.44);
    outline-offset: 3px;
}

.directory-book {
    position: relative;
    width: min(920px, 100%);
    padding: clamp(34px, 6vw, 72px);
    border: 1px solid rgba(216, 164, 91, 0.43);
    border-radius: 24px;
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(71, 38, 20, 0.32) 50%, transparent 50.3%),
        radial-gradient(circle at 50% 5%, rgba(244, 185, 94, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(42, 24, 15, 0.97), rgba(17, 10, 8, 0.98));
    color: #ead8bb;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72), inset 0 0 70px rgba(184, 111, 38, 0.06);
}

.directory-book::before,
.directory-book::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border-color: rgba(200, 146, 75, 0.48);
}

.directory-book::before {
    left: 16px;
    top: 16px;
    border-left: 1px solid;
    border-top: 1px solid;
}

.directory-book::after {
    right: 16px;
    bottom: 16px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.directory-kicker,
.directory-note {
    color: #b98245;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.directory-kicker {
    margin: 0 0 8px;
    font-size: 0.72rem;
}

.directory-book h1 {
    margin: 0;
    color: #f0d9b2;
    font-family: Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 4.3rem);
    font-weight: normal;
    letter-spacing: 0.025em;
}

.directory-intro {
    max-width: 650px;
    margin: 14px 0 34px;
    color: #bca98c;
    line-height: 1.7;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.directory-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 108px;
    padding: 18px;
    border: 1px solid rgba(190, 139, 75, 0.3);
    border-radius: 14px;
    background: rgba(13, 8, 6, 0.56);
    color: #dec7a4;
    text-align: left;
}

button.directory-card {
    width: 100%;
    font: inherit;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

button.directory-card:hover,
button.directory-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(228, 176, 101, 0.72);
    background: rgba(92, 51, 22, 0.34);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(226, 150, 59, 0.05);
    outline: none;
}

.directory-sigil {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(213, 160, 89, 0.42);
    border-radius: 50%;
    color: #d9a65d;
    font-size: 1.25rem;
}

.directory-card-copy strong,
.directory-card-copy small {
    display: block;
}

.directory-card-copy strong {
    margin-bottom: 5px;
    font-family: Georgia, serif;
    font-size: 1.06rem;
    font-weight: normal;
}

.directory-card-copy small {
    color: #917e69;
    line-height: 1.4;
}

.directory-status {
    align-self: start;
    color: #a77b45;
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.directory-card-sealed {
    filter: saturate(0.55);
    opacity: 0.67;
}

.directory-note {
    margin: 28px 0 0;
    font-size: 0.62rem;
    text-align: center;
}

@media (max-width: 700px) {
    .directory-panel {
        place-items: start center;
        padding: 76px 12px 24px;
    }

    .directory-book {
        padding: 32px 20px;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-card {
        min-height: 94px;
        padding: 14px;
    }
}

.story-stacks,
.story-reader {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.story-stacks {
    padding: clamp(78px, 9vh, 112px) 20px 46px;
    background:
        linear-gradient(rgba(8, 5, 8, 0.78), rgba(5, 3, 5, 0.95)),
        url("images/library-interior.png") center / cover fixed no-repeat;
}

.story-stacks.active,
.story-reader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.story-back-directory,
.close-story-reader {
    position: fixed;
    left: clamp(14px, 2.2vw, 32px);
    top: clamp(14px, 2.2vw, 32px);
    z-index: 3;
    padding: 10px 16px;
    border: 1px solid rgba(191, 156, 207, 0.5);
    border-radius: 999px;
    background: rgba(13, 8, 16, 0.88);
    color: #e6d7e8;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(9px);
}

.story-back-directory:hover,
.story-back-directory:focus-visible,
.close-story-reader:hover,
.close-story-reader:focus-visible {
    background: rgba(97, 63, 113, 0.38);
    outline: 2px solid rgba(208, 170, 224, 0.44);
    outline-offset: 3px;
}

.story-stacks-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    color: #e5d7df;
}

.story-stacks-header {
    max-width: 760px;
    margin-bottom: 30px;
}

.story-stacks-kicker,
.story-page-kicker {
    margin: 0 0 8px;
    color: #af83bd;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.story-stacks-header h1 {
    margin: 0;
    color: #f0dfeb;
    font-family: Georgia, serif;
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    font-weight: normal;
    text-shadow: 0 0 34px rgba(151, 94, 173, 0.23);
}

.story-stacks-header > p:last-child {
    max-width: 650px;
    color: #b9a9b5;
    line-height: 1.7;
}

.story-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.story-search {
    display: grid;
    gap: 7px;
    width: min(390px, 100%);
    color: #a78fa6;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

.story-search input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(175, 129, 190, 0.38);
    border-radius: 10px;
    background: rgba(10, 6, 12, 0.82);
    color: #eadfed;
    font: inherit;
    outline: none;
}

.story-search input:focus {
    border-color: rgba(207, 165, 221, 0.72);
    box-shadow: 0 0 0 3px rgba(141, 88, 158, 0.15);
}

.story-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.story-filter {
    padding: 8px 12px;
    border: 1px solid rgba(173, 135, 183, 0.28);
    border-radius: 999px;
    background: rgba(12, 8, 14, 0.7);
    color: #ad9aaa;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.story-filter.active,
.story-filter:hover,
.story-filter:focus-visible {
    border-color: rgba(212, 170, 224, 0.62);
    background: rgba(107, 68, 121, 0.32);
    color: #eadced;
    outline: none;
}

.story-shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid rgba(142, 98, 151, 0.32);
    border-radius: 18px;
    background:
        repeating-linear-gradient(0deg, transparent 0 155px, rgba(116, 68, 38, 0.42) 155px 161px),
        linear-gradient(145deg, rgba(26, 14, 25, 0.96), rgba(10, 7, 11, 0.96));
    box-shadow: 0 24px 75px rgba(0, 0, 0, 0.62), inset 0 0 55px rgba(100, 55, 111, 0.08);
}

.story-volume {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 15px;
    align-items: center;
    min-height: 124px;
    padding: 18px;
    border: 1px solid rgba(170, 123, 179, 0.28);
    border-left: 8px solid #72507e;
    border-radius: 8px 14px 14px 8px;
    background: linear-gradient(100deg, rgba(46, 28, 49, 0.98), rgba(19, 13, 21, 0.96));
    color: #dfd0df;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 12px 0 25px rgba(0, 0, 0, 0.14);
}

.story-volume[hidden] {
    display: none;
}

button.story-volume {
    width: 100%;
    font: inherit;
    cursor: pointer;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

button.story-volume:hover,
button.story-volume:focus-visible {
    transform: translateY(-4px) rotate(-0.25deg);
    border-color: rgba(215, 173, 223, 0.65);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), 0 0 24px rgba(132, 74, 151, 0.12);
    outline: none;
}

.story-volume-waiting {
    opacity: 0.58;
    filter: saturate(0.5);
}

.story-spine-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 64px;
    border: 1px solid rgba(200, 158, 207, 0.35);
    color: #c89bd2;
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.story-volume-copy strong,
.story-volume-copy small {
    display: block;
}

.story-volume-copy strong {
    margin-bottom: 7px;
    font-family: Georgia, serif;
    font-size: 1.08rem;
    font-weight: normal;
}

.story-volume-copy small {
    color: #978496;
    line-height: 1.4;
}

.story-volume-state {
    align-self: start;
    color: #ab7fba;
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.story-empty-message {
    margin: 28px 0;
    color: #ad98aa;
    text-align: center;
}

.story-reader {
    display: grid;
    place-items: center;
    padding: 78px 18px 36px;
    background:
        radial-gradient(circle at 50% 20%, rgba(129, 80, 144, 0.2), transparent 40%),
        linear-gradient(135deg, #100a12, #050305 75%);
}

.story-page {
    position: relative;
    width: min(760px, 100%);
    padding: clamp(38px, 7vw, 76px);
    border: 1px solid rgba(177, 134, 185, 0.42);
    border-radius: 16px;
    background: linear-gradient(145deg, #211620, #120d14);
    color: #d8c9d5;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), inset 0 0 55px rgba(137, 76, 151, 0.07);
}

.story-page h1 {
    margin: 0 0 20px;
    color: #f0e1ee;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: normal;
}

.story-page p:not(.story-page-kicker) {
    font-family: Georgia, serif;
    font-size: clamp(1.03rem, 2vw, 1.2rem);
    line-height: 1.9;
}

.story-ornament {
    margin: 14px 0 26px;
    color: #aa7bb7;
    letter-spacing: 0.35em;
}

.story-page footer {
    margin-top: 34px;
    color: #a58e9f;
    font-style: italic;
    text-align: right;
}

@media (max-width: 700px) {
    .story-stacks {
        padding: 78px 12px 28px;
    }

    .story-tools {
        align-items: stretch;
    }

    .story-shelf {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .story-volume {
        grid-template-columns: 44px 1fr;
        min-height: 108px;
        padding: 14px;
    }

    .story-spine-mark {
        width: 40px;
        height: 56px;
    }

    .story-volume-state {
        grid-column: 2;
    }
}

.room-placeholder {
    position: fixed;
    inset: 0;
    z-index: 5;

    overflow: auto;
    background:
        radial-gradient(circle at 50% 30%, rgba(111, 61, 27, 0.2), transparent 48%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 2px,
            transparent 2px,
            transparent 72px
        ),
        linear-gradient(135deg, #160d09, #080504 72%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.room-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 18% 28%, rgba(234, 151, 58, 0.08), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(112, 59, 24, 0.12), transparent 32%);
}

.room-placeholder.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.archive-room-content {
    position: relative;
    z-index: 1;

    width: min(1050px, calc(100% - 40px));
    margin: 0 auto;
    padding: 88px 0 48px;
    color: #ead8bb;
    text-align: left;
}

.archive-kicker {
    margin: 0 0 7px;
    color: #c18b4c;
    font-size: clamp(0.72rem, 1.3vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.archive-room-content h2 {
    margin: 0 0 30px;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: normal;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
    gap: 24px;
}

.recipe-card {
    padding: 12px 12px 18px;
    border: 1px solid rgba(201, 145, 74, 0.38);
    border-radius: 16px;
    background: rgba(31, 18, 12, 0.82);
    color: #ead5b2;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.recipe-card:hover,
.recipe-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(230, 177, 102, 0.72);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48), 0 0 24px rgba(201, 121, 45, 0.08);
    outline: none;
}

.recipe-thumbnail {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 15px;
    border-radius: 10px;
    background: #0a0604;
}

.recipe-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.recipe-card strong,
.recipe-card small {
    display: block;
}

.recipe-card strong {
    margin-bottom: 5px;
    font-size: 1.16rem;
    font-weight: normal;
}

.recipe-card small {
    color: #ad8d68;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.return-to-library {
    position: absolute;
    left: clamp(14px, 2.2vw, 32px);
    top: clamp(14px, 2.2vw, 32px);
    z-index: 2;

    padding: 10px 16px;
    border: 1px solid rgba(214, 167, 103, 0.54);
    border-radius: 999px;
    background: rgba(15, 9, 6, 0.8);
    color: #e7cfaa;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
}

.return-to-library:hover,
.return-to-library:focus-visible {
    background: rgba(203, 139, 68, 0.13);
    outline: 2px solid rgba(230, 190, 126, 0.44);
    outline-offset: 3px;
}

.recipe-viewer {
    position: fixed;
    inset: 0;
    z-index: 8;

    overflow: hidden;
    background: #080503;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}

.recipe-viewer::before {
    content: "";
    position: absolute;
    inset: -5%;

    background:
        linear-gradient(rgba(8, 5, 3, 0.54), rgba(8, 5, 3, 0.54)),
        url("images/kitchen-seed-archive.png") center / cover no-repeat;
    filter: blur(18px) brightness(0.58);
}

.recipe-viewer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.recipe-viewer > img {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(0, 0, 0, 0.62));
}

.close-recipe {
    position: absolute;
    left: clamp(14px, 2.2vw, 32px);
    top: clamp(14px, 2.2vw, 32px);
    z-index: 2;

    padding: 10px 16px;
    border: 1px solid rgba(214, 167, 103, 0.54);
    border-radius: 999px;
    background: rgba(15, 9, 6, 0.82);
    color: #e7cfaa;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
}

.close-recipe:hover,
.close-recipe:focus-visible {
    background: rgba(203, 139, 68, 0.16);
    outline: 2px solid rgba(230, 190, 126, 0.44);
    outline-offset: 3px;
}

.library-building {
    /* Match the centered `background-size: cover` image exactly. This gives
       the interactive door the same coordinate system as the painted facade. */
    position: absolute;
    left: 50%;
    top: 50%;

    width: max(100vw, calc(100vh * 1672 / 941));
    aspect-ratio: 1672 / 941;

    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    transform: translate(-50%, -50%);
}
/* ==================================================
   06 — DOORWAY
   ================================================== */


/* --------------------------------------------------
   Doorway Frame + Door Container
   -------------------------------------------------- */
.stone-arch {
    position: absolute;
    inset: 0;
    padding: 0;

    border-radius:
        48% 48%
        4px 4px;

    background: transparent;
    border: none;
    box-shadow: none;


    border: none;

    box-shadow: none;
}

.library-doors {
    position: absolute;
    z-index: 4;

    /* Full transparent doorway cutout in the 1672 x 941 exterior artwork,
       including its feathered edge: x 704..980, y 367..740. */
    top: 39.0011%;
    left: 42.1053%;

    display: flex;
    flex-wrap: nowrap;

    width: 16.5670%;
    height: 39.7450%;
    margin: 0;

    perspective: 1500px;

    overflow: hidden;
    box-sizing: border-box;

    border: none;
    border-radius: 50% 50% 0 0 / 27% 27% 0 0;

    box-shadow: none;
}
/* --------------------------------------------------
   Wooden Door Panels
   -------------------------------------------------- */
.door {
    width: 50%;
    flex: 0 0 50%;
min-width: 0;
    height: 100%;

    position: relative;


    cursor: pointer;
    overflow: hidden;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 0px,
            rgba(255, 255, 255, 0.015) 3px,
            rgba(0, 0, 0, 0.05) 4px,
            rgba(0, 0, 0, 0.05) 8px
        ),
        linear-gradient(
            90deg,
            #120b08,
            #2d1911,
            #100906
        );

    border: none;

    box-sizing: border-box;
}
/* --------------------------------------------------
   Door Opening Animation
   -------------------------------------------------- */
.left-door {
    transform-origin: left center;
}

.right-door {
    transform-origin: right center;
}
.door {
    transition: transform 1.4s ease;
    filter: brightness(0.88);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.library-doors.open .left-door {
    transform: rotateY(-105deg);
}

.library-doors.open .right-door {
    transform: rotateY(105deg);
}
/* --------------------------------------------------
   Door Wood Texture + Panel Detail
   -------------------------------------------------- */
.door::before {
    content: "";

    position: absolute;
    inset: 19px;

    border: 4px solid #1a0e09;

    box-shadow:
    inset 0 0 0 2px #3b2115,
    inset 0 0 26px rgba(0, 0, 0, 0.85);

    background:
    /* deep plank seams */
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 46px,
        rgba(4, 2, 1, 0.75) 47px,
        rgba(80, 42, 22, 0.22) 48px,
        transparent 51px
    ),

    /* thin dark grain */
    repeating-linear-gradient(
        87deg,
        transparent 0px,
        transparent 8px,
        rgba(10, 4, 2, 0.28) 9px,
        transparent 12px,
        transparent 19px
    ),

    /* irregular lighter grain */
    repeating-linear-gradient(
        93deg,
        transparent 0px,
        transparent 21px,
        rgba(120, 68, 36, 0.16) 23px,
        transparent 27px,
        transparent 37px
    ),

    /* subtle aged streaks */
    linear-gradient(
        82deg,
        transparent 10%,
        rgba(15, 6, 3, 0.18) 22%,
        transparent 32%,
        rgba(105, 55, 28, 0.12) 47%,
        transparent 58%,
        rgba(8, 3, 2, 0.22) 73%,
        transparent 85%
    ),

    /* actual wood color */
    linear-gradient(
        90deg,
        #160b07 0%,
        #2d160d 14%,
        #472718 30%,
        #32190f 44%,
        #512d1b 55%,
        #2b150d 70%,
        #452416 86%,
        #150a06 100%
    );
}
/* --------------------------------------------------
   Door Handles
   -------------------------------------------------- */
.door-handle {
    position: absolute;
    top: 46%;

   width: 30px;
height: 58px;

border: 6px solid #1a1b1d;
    border-radius: 50%;

    background: transparent;
    box-sizing: border-box;

    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.08),
        0 2px 5px rgba(0, 0, 0, 0.9);

    z-index: 5;
}

.door-handle::before {
    content: "";

    position: absolute;
    top: -14px;
    left: 50%;

    transform: translateX(-50%);

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #4d4e52,
            #232428 55%,
            #0c0d0f 100%
        );

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9);
}

.door-handle::after {
    content: "";

    position: absolute;
    top: -4px;
    left: 50%;

    transform: translateX(-50%);

    width: 4px;
    height: 12px;

    background: #16171a;
    border-radius: 3px;
}

.left-handle {
    right: 8px;
    transform: rotate(-10deg);
}

.right-handle {
    left: 8px;
    transform: rotate(10deg);
}
/* ==================================================
   08 — LIBRARY SIGN
   ================================================== */
.library-sign {
    position: absolute;
    top: -95px;
    left: 50%;
    z-index: 10;

    width: 390px;
    padding: 14px 22px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #15171c,
            #090b0e
        );

    border: 3px solid #9a6c2e;
    border-radius: 12px;

    color: #d5a65d;

    font-size: 38px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;

    text-shadow:
        0 1px 0 #000,
        0 0 10px rgba(210, 160, 85, 0.18);

    box-shadow:
        inset 0 0 0 2px #33200e,
        0 4px 12px rgba(0, 0, 0, 0.80);
        visibility: hidden;
}
/* ==================================================
   09 — SILVER BELL
   ================================================== */
.silver-bell {
    position: absolute;

    left: 50%;
    top: 40.1700%;

    transform: translateX(-50%) translateY(-6px) scale(0.92);
    width: 1.9139%;
    height: auto;
    aspect-ratio: 8 / 7;


filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8));

    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.35s ease 0.75s,
        transform 0.45s ease 0.75s;
}

.library-doors.open ~ .silver-bell {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.silver-bell::after {
    content: "";

    position: absolute;

    width: 25%;
    height: 28.5%;

    left: 50%;
    bottom: -5px;

    transform: translateX(-50%);

    background: #9da3ab;
    border-radius: 50%;

    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.35),
        0 2px 3px rgba(0,0,0,0.8);
}
.silver-bell::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        #686d75,
        #d7dce3 45%,
        #8b919a 70%,
        #4a4f57
    );

    clip-path: polygon(
        25% 0%,
        75% 0%,
        88% 18%,
        95% 72%,
        100% 82%,
        0% 82%,
        5% 72%,
        12% 18%
    );

    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8));
}
.bell-hanger {
    position: absolute;

    width: 37.5%;
    height: 35.7%;

    left: 50%;
    top: -5px;

    transform: translateX(-50%);

    border: 3px solid #9da3ab;
    border-bottom: none;

    border-radius: 8px 8px 0 0;

    box-sizing: border-box;
}
/* --------------------------------------------------
   Door Iron Straps
   -------------------------------------------------- */
.iron-strap {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 14px;

    background: linear-gradient(
        180deg,
        #2d2d2f,
        #141416
    );

    border: 1px solid #0b0b0c;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.08),
        0 2px 4px rgba(0,0,0,0.65);

    z-index: 4;
}

.strap-top {
    top: 110px;
}

.strap-bottom {
    bottom: 72px;
}
/* --------------------------------------------------
   Door Arch Curves
   -------------------------------------------------- */
.left-door::before {
    top: 12px;

    border-radius:
        100% 0 0 0
        /
        18% 0 0 0;
}

.right-door::before {
    top: 12px;

    border-radius:
        0 100% 0 0
        /
        0 18% 0 0;
}
/* ==================================================
   10 — OUTER STONE WALLS
   Currently hidden — preserved for possible reuse
   ================================================== */
.stone-test-cluster {
    position: absolute;
    left: 0;
    top: 190px;

    width: 130px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    z-index: 1;
    pointer-events: none;
}
/* --------------------------------------------------
   Shared Outer Stone Styles
   -------------------------------------------------- */
.stone-piece {
    height: 58px;

    background:
        linear-gradient(
            145deg,
            #3a3d42,
            #272a2f 55%,
            #181a1e
        );

    border: 1px solid #111317;

box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.04),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 2px 3px rgba(0, 0, 0, 0.45);
    filter: brightness(0.85);
}
/* --------------------------------------------------
   Left Outer Stones
   -------------------------------------------------- */
.stone-one {
    width: 122px;
    clip-path: polygon(
    1% 8%,
    95% 2%,
    100% 10%,
    98% 92%,
    94% 100%,
    3% 97%,
    0% 90%,
    0% 12%
);

background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 0.18)
    ),
    url("images/stone-texture.png");

background-size:
    100% 100%,
    700px 700px;

background-position:
    center,
    20% 30%;

background-repeat: no-repeat;
}

.stone-two {
    width: 105px;
    margin-left: 14px;
    margin-top: 2px;
    clip-path: polygon(
    2% 5%,
    96% 2%,
    100% 9%,
    98% 94%,
    93% 100%,
    4% 97%,
    0% 88%,
    1% 10%
);
background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 0.18)
    ),
    url("images/stone-texture.png");

background-size:
    100% 100%,
    700px 700px;
background-position: center;
background-repeat: no-repeat;

}

.stone-three {
    width: 118px;
    margin-left: -4px;
    margin-top: -1px;

    clip-path: polygon(
    2% 6%,
    97% 3%,
    100% 12%,
    98% 95%,
    92% 100%,
    4% 96%,
    0% 87%,
    1% 11%
);

background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 0.18)
    ),
    url("images/stone-texture.png");

background-size:
    100% 100%,
    700px 700px;

background-position:
    center,
    75% 65%;

background-repeat: no-repeat;
}

.stone-four {
    width: 108px;
    height: 55px;
    margin-left: 10px;
    margin-top: 1px;

    clip-path: polygon(
        1% 7%,
        96% 2%,
        100% 11%,
        98% 93%,
        94% 100%,
        4% 97%,
        0% 89%,
        1% 12%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.18)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-position:
        center,
        35% 80%;

    background-repeat: no-repeat;
}

.stone-five {
    width: 124px;
    height: 57px;
    margin-left: 0;
    margin-top: 1px;

    clip-path: polygon(
        2% 4%,
        96% 1%,
        100% 8%,
        99% 91%,
        95% 98%,
        5% 100%,
        0% 92%,
        1% 10%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.18)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-position:
        center,
        60% 35%;

    background-repeat: no-repeat;
}

.stone-six {
    width: 116px;
    height: 54px;
    margin-left: 6px;
    margin-top: 0;

    clip-path: polygon(
        1% 6%,
        98% 3%,
        100% 10%,
        97% 94%,
        91% 100%,
        3% 97%,
        0% 91%,
        2% 11%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.18)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-position:
        center,
        15% 55%;

    background-repeat: no-repeat;
}

.stone-seven {
    width: 121px;
    height: 52px;
    margin-left: 2px;
    margin-top: 1px;

    clip-path: polygon(
        2% 5%,
        97% 2%,
        100% 9%,
        98% 93%,
        94% 100%,
        5% 98%,
        0% 90%,
        1% 10%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.18)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-position:
        center,
        82% 22%;

    background-repeat: no-repeat;
}
/* --------------------------------------------------
   Right Outer Stones
   -------------------------------------------------- */
.right-stone-cluster {
    left: auto;
    right: 0;
    width: 175px;
}

.right-stone-two {
    margin-left: 12px;
    margin-top: 2px;

    background-position:
        center,
        68% 18%;
}

.right-stone-three {
    margin-left: 4px;
    margin-top: -1px;

    background-position:
        center,
        28% 72%;
}

.right-stone-four {
    margin-left: 14px;
    margin-top: 1px;

    background-position:
        center,
        52% 84%;
}
/* --------------------------------------------------
   Outer Stone Row System
   -------------------------------------------------- */
.stone-row-one {
    display: flex;
    gap: 3px;
    width: 165px;
}

.stone-row-one .row-one-a {
    width: 82px;
    margin-left: 0;
}

.stone-row-one .row-one-b {
    width: 75px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        88% 42%;
}

.stone-row-two {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 8px;
}

.stone-row-two .row-two-a {
    width: 68px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        24% 70%;
}

.stone-row-two .row-two-b {
    width: 86px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        62% 15%;
}

.stone-row-three {
    display: flex;
    gap: 4px;
    width: 165px;
    margin-left: 2px;
}

.stone-row-three .row-three-a {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        72% 32%;
}

.stone-row-three .row-three-b {
    width: 67px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        18% 82%;
}

.stone-row-four {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 10px;
}

.stone-row-four .row-four-a {
    width: 74px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        84% 58%;
}

.stone-row-four .row-four-b {
    width: 79px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        32% 24%;
}

.stone-row-five {
    display: flex;
    gap: 4px;
    width: 165px;
    margin-left: 0px;
}

.stone-row-five .row-five-a {
    width: 75px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        12% 48%;
}

.stone-row-five .row-five-b {
    width: 86px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        76% 66%;
}

.stone-row-six {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 10px;
}

.stone-row-six .row-six-a {
    width: 82px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        58% 82%;
}

.stone-row-six .row-six-b {
    width: 76px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        26% 18%;
}

.stone-row-seven {
    display: flex;
    gap: 4px;
    width: 165px;
    margin-left: 0px;
}

.stone-row-seven .row-seven-a {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        60% 86%;
}

.stone-row-seven .row-seven-b {
    width: 88px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        30% 70%;
}

.stone-row-eight {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 4px;
}

.stone-row-eight .row-eight-a {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        18% 78%;
}

.stone-row-eight .row-eight-b {
    width: 70px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        72% 32%;
}

.stone-row-nine {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 0px;
}

.stone-row-nine .row-nine-a {
    width: 100px;
    margin-left:0;
    margin-top: 0;

    background-position:
        center,
        18% 50%;
}

.stone-row-nine .row-nine-b {
    width: 100px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        50% 60%;
}

.stone-row-ten {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 10px;
}

.stone-row-ten .row-ten-a {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        30% 70%;
}

.stone-row-ten .row-ten-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        70% 30%;
}

.stone-row-eleven {
    display: flex;
    gap: 3px;
    width: 165px;
    margin-left: 0px;
}

.stone-row-eleven .row-eleven-a {
    width: 100px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        40% 60%;
}

.stone-row-eleven .row-eleven-b {
    width: 80px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        60% 40%;
}
/* --------------------------------------------------
   Right Outer Stone Rows
   -------------------------------------------------- */
.right-row-one {
    display: flex;
    gap: 2px;
    width: 165px;
    
}

.right-row-one .right-row-one-a {
    width: 60px;
    margin-left: 0;

    background-position:
        center,
        60% 40%;
}

.right-row-one .right-row-one-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        60% 40%;
}

.right-row-two {
    display: flex;
    gap: 2px;
    width: 165px;
    
}

.right-row-two .right-row-two-a {
    width: 90px;
    margin-left: 0px;

    background-position:
        center,
        62% 50%;
}

.right-row-two .right-row-two-b {
    width: 60px;
    margin-left: 0px;
    margin-top: 0;

    background-position:
        center,
        53% 12%;
}

.right-row-three {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-three .right-row-three-a {
    width: 60px;
    margin-left: 0;

    background-position:
        center,
        80% 50%;
}

.right-row-three .right-row-three-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        25% 40%;
}

.right-row-four {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-four .right-row-four-a {
    width: 90px;
    margin-left: 0;

    background-position:
        center,
        67% 23%;
}

.right-row-four .right-row-four-b {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        44% 21%;
}

.right-row-five {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-five .right-row-five-a {
    width: 60px;
    margin-left: 0;

    background-position:
        center,
        21% 70%;
}

.right-row-five .right-row-five-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        53% 73%;
}

.right-row-six {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-six .right-row-six-a {
    width: 90px;
    margin-left: 0;

    background-position:
        center,
        70% 54%;
}

.right-row-six .right-row-six-b {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        19% 30%;
}

.right-row-seven {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-seven .right-row-seven-a {
    width: 60px;
    margin-left: 0;

    background-position:
        center,
        29% 73%;
}

.right-row-seven .right-row-seven-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        46% 63%;
}

.right-row-eight {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-eight .right-row-eight-a {
    width: 90px;
    margin-left: 0;

    background-position:
        center,
        12% 32%;
}

.right-row-eight .right-row-eight-b {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        10% 50%;
}

.right-row-nine {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-nine .right-row-nine-a {
    width: 60px;
    margin-left: 0;

    background-position:
        center,
        30% 70%;
}

.right-row-nine .right-row-nine-b {
    width: 90px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        50% 30%;
}

.right-row-ten {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-ten .right-row-ten-a {
    width: 90px;
    margin-left: 5px;

    background-position:
        center,
        50% 40%;
}

.right-row-ten .right-row-ten-b {
    width: 60px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        80% 20%;
}

.right-row-eleven {
    display: flex;
    gap: 3px;
    width: 165px;
    
}

.right-row-eleven .right-row-eleven-a {
    width: 50px;
    margin-left: 5px;

    background-position:
        center,
        70% 40%;
}

.right-row-eleven .right-row-eleven-b {
    width: 100px;
    margin-left: 0;
    margin-top: 0;

    background-position:
        center,
        50% 20%;
}

/* ==================================================
   FINISHED STONE FACADE
   ================================================== */

/* Inner stone pillars */

.inner-stone-pillar {
    position: absolute;
    top: 205px;
    z-index: 2;

    width: 88px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    pointer-events: none;
}

.left-inner-pillar {
    left: 158px;
}

.right-inner-pillar {
    right: 158px;
}
/* --------------------------------------------------
   Shared Pillar Stone Styles
   -------------------------------------------------- */
.pillar-stone {
    width: 88px;
    height: 58px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(0, 0, 0, 0.20)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-repeat: no-repeat;

    border: 1px solid #111317;
    border-radius: 2px;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.06),
        inset 0 -3px 5px rgba(0, 0, 0, 0.40),
        0 2px 4px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------
   Pillar Texture Variations
   -------------------------------------------------- */
.inner-stone-pillar .pillar-stone:nth-child(1)  { background-position: center, 18% 72%; }
.inner-stone-pillar .pillar-stone:nth-child(2)  { background-position: center, 72% 24%; }
.inner-stone-pillar .pillar-stone:nth-child(3)  { background-position: center, 36% 84%; }
.inner-stone-pillar .pillar-stone:nth-child(4)  { background-position: center, 82% 46%; }
.inner-stone-pillar .pillar-stone:nth-child(5)  { background-position: center, 22% 52%; }
.inner-stone-pillar .pillar-stone:nth-child(6)  { background-position: center, 62% 18%; }
.inner-stone-pillar .pillar-stone:nth-child(7)  { background-position: center, 42% 76%; }
.inner-stone-pillar .pillar-stone:nth-child(8)  { background-position: center, 86% 32%; }
.inner-stone-pillar .pillar-stone:nth-child(9)  { background-position: center, 28% 62%; }
.inner-stone-pillar .pillar-stone:nth-child(10) { background-position: center, 68% 82%; }
.inner-stone-pillar .pillar-stone:nth-child(11) { background-position: center, 48% 24%; }

/* --------------------------------------------------
   Pillar Mirroring + Top Taper
   -------------------------------------------------- */
.right-inner-pillar .pillar-stone {
    transform: scaleX(-1);
}

.left-inner-pillar .pillar-stone:first-child {
    width: 58px;
    margin-left: 30px;
}

.left-inner-pillar .pillar-stone:nth-child(2) {
    width: 74px;
    margin-left: 14px;
}

.right-inner-pillar .pillar-stone:first-child {
    width: 58px;
}

.right-inner-pillar .pillar-stone:nth-child(2) {
    width: 74px;
}


/* ==================================================
   12 — ARCH STONES
   Currently hidden — preserved for possible reuse
   ================================================== */

.arch-stones {
    position: absolute;
    inset: 0;
    z-index: 3;

    pointer-events: auto;
}
/* --------------------------------------------------
   Shared Arch Stone Styles
   -------------------------------------------------- */
   
.arch-stone {
    position: absolute;

    width: 78px;
    height: 68px;
    margin: 0;

    box-sizing: border-box;

    clip-path: polygon(
        4% 0%,
        100% 0%,
        94% 100%,
        6% 100%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(0, 0, 0, 0.30)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-repeat: no-repeat;

    border: 2px solid #101215;

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.10),
        inset 0 -4px 5px rgba(0, 0, 0, 0.52),
        0 3px 8px rgba(0, 0, 0, 0.42);

    transform-origin: center center;
    cursor: grab;
    filter: brightness(0.85);
}

/* --------------------------------------------------
   Left Arch Stones — 1 through 6
   -------------------------------------------------- */
.arch-stone-1 {
    width: 72px;
    left: -71.3693px;
  top: 97.5463px;
  transform: rotate(-81deg);
    background-position: center, 12% 74%;
  clip-path: polygon(
    22% 0%,
    100% 0%,
    78% 100%,
    30% 100%
);
}


.arch-stone-2 {
    left: -48px;
    top: 46px;
    transform: rotate(-48deg);
    background-position: center, 72% 22%;

    clip-path: polygon(
    0% 0%,
    100% 10%,
    80% 100%,
    10% 100%
);
}

.arch-stone-3 {
    left: -5px;
    top: 8px;
    transform: rotate(-35deg);
    background-position: center, 38% 84%;
}

.arch-stone-4 {
    left: 50px;
    top: -23px;
    transform: rotate(-24deg);
    background-position: center, 84% 48%;
}

.arch-stone-5 {
    left: 116px;
    top: -46px;
    transform: rotate(-15deg);
    background-position: center, 24% 62%;
}

.arch-stone-6 {
    left: 191px;
    top: -59px;
    transform: rotate(-7deg);
    background-position: center, 64% 18%;
}

/* --------------------------------------------------
   Center Arch Stone — 7
   -------------------------------------------------- */
.arch-stone-7 {
    left: 271px;
    top: -64px;
    transform: rotate(0deg);
    background-position: center, 42% 76%;
}

/* --------------------------------------------------
   Right Arch Stones — 8 through 13
   -------------------------------------------------- */
.arch-stone-8 {
    left: 351px;
    top: -59px;
    transform: rotate(7deg);
    background-position: center, 82% 30%;
}

.arch-stone-9 {
    left: 426px;
    top: -46px;
    transform: rotate(15deg);
    background-position: center, 16% 52%;
}

.arch-stone-10 {
    left: 492px;
    top: -23px;
    transform: rotate(24deg);
    background-position: center, 68% 84%;
}

.arch-stone-11 {
    left: 547px;
    top: 8px;
    transform: rotate(35deg);
    background-position: center, 32% 26%;
}

.arch-stone-12 {
    left: 590px;
    top: 46px;
    transform: rotate(48deg);
    background-position: center, 76% 58%;
}

.arch-stone-13 {
    width: 72px;
    left: 619px;
    top: 91px;
    transform: rotate(80deg);
    background-position: center, 76% 58%;
}


/* ==================================================
   13 — FOUNDATION STONES
   Currently hidden — preserved for possible reuse
   ================================================== */

.bottom-stone-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    height: 58px;

    display: flex;
    gap: 3px;
}

/* --------------------------------------------------
   Shared Foundation Stone Styles
   -------------------------------------------------- */
.foundation-stone {
    flex: 1;
    min-width: 0;
    height: 58px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.06),
            rgba(0, 0, 0, 0.20)
        ),
        url("images/stone-texture.png");

    background-size:
        100% 100%,
        700px 700px;

    background-repeat: no-repeat;

    border: 1px solid #111317;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.05),
        inset 0 -3px 4px rgba(0, 0, 0, 0.38),
        0 2px 4px rgba(0, 0, 0, 0.50);
        filter: brightness(0.85);
}

.foundation-stone:nth-child(1)  { flex: 1.10; background-position: center, 18% 72%; }
.foundation-stone:nth-child(2)  { flex: 0.85; background-position: center, 68% 24%; }
.foundation-stone:nth-child(3)  { flex: 1.20; background-position: center, 38% 82%; }
.foundation-stone:nth-child(4)  { flex: 0.90; background-position: center, 84% 46%; }
.foundation-stone:nth-child(5)  { flex: 1.10; background-position: center, 24% 62%; }
.foundation-stone:nth-child(6)  { flex: 0.95; background-position: center, 64% 18%; }
.foundation-stone:nth-child(7)  { flex: 1.15; background-position: center, 42% 76%; }
.foundation-stone:nth-child(8)  { flex: 0.90; background-position: center, 82% 30%; }
.foundation-stone:nth-child(9)  { flex: 1.05; background-position: center, 16% 52%; }
.foundation-stone:nth-child(10) { flex: 0.85; background-position: center, 68% 84%; }
.foundation-stone:nth-child(11) { flex: 1.15; background-position: center, 32% 26%; }
.foundation-stone:nth-child(12) { flex: 0.95; background-position: center, 76% 58%; }
.right-inner-pillar .pillar-stone:first-child {
    visibility: hidden;
}
.left-inner-pillar .pillar-stone:first-child {
    visibility: hidden;
}
.entrance-message {
    visibility: hidden;
}
/* TEMPORARY: test doorway against generated background */
.stone-test-cluster,
.inner-stone-pillar,
.arch-stone,
.arch-stones,
.bottom-stone-row {
    display: none;
}
/* ==================================================
   DOORWAY THRESHOLD
   ================================================== */

.doorway-threshold {
    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    border-radius: 50% 50% 0 0 / 18% 18% 0 0;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(255, 213, 139, 0.34) 0%,
            rgba(226, 141, 64, 0.23) 24%,
            rgba(117, 55, 25, 0.15) 48%,
            rgba(28, 17, 13, 0.88) 78%,
            rgba(13, 10, 9, 0.96) 100%
        );

    opacity: 0;
    transition: opacity 0.8s ease 0.38s;
}

.library-doors.open .doorway-threshold {
    opacity: 1;
}

.candlelight-entry {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 1;

    width: 34%;
    height: 28%;
    padding: 0;

    transform: translate(-50%, -50%) scale(0.86);
    border: 0;
    border-radius: 50%;
    outline: none;
    background: transparent;
    box-shadow: none;

    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity 0.35s ease 0.8s,
        transform 0.35s ease 0.8s,
        box-shadow 0.25s ease;
}

.library-doors.open .candlelight-entry {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.library-doors.open .candlelight-entry:hover,
.library-doors.open .candlelight-entry:focus-visible {
    box-shadow:
        0 0 28px rgba(255, 207, 129, 0.16),
        inset 0 0 22px rgba(255, 222, 164, 0.08);
}

.library-doors.open .candlelight-entry:focus-visible {
    outline: 2px solid rgba(255, 221, 158, 0.72);
    outline-offset: 5px;
}

.doorway-threshold::before {
    content: "";
    position: absolute;
    inset: 12% 18% 14%;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 224, 166, 0.28) 0%,
            rgba(242, 166, 86, 0.13) 42%,
            transparent 72%
        );

    filter: blur(16px);
    animation: candlelight-breathe 3.8s ease-in-out infinite alternate;
}

@keyframes candlelight-breathe {
    from {
        opacity: 0.62;
        transform: scale(0.97) translateY(2px);
    }

    to {
        opacity: 0.88;
        transform: scale(1.03) translateY(-2px);
    }
}

/* Keep the unfinished interior controls from showing through the transparent
   doorway. Entering the library later can add `.inside-library` to reveal it. */
body:not(.inside-library) > h1,
body:not(.inside-library) > #library-message,
body:not(.inside-library) > .edwin,
body:not(.inside-library) > .bookshelf,
body:not(.inside-library) > #library-interior {
    visibility: hidden;
}

/* ==================================================
   KEEP DOORS IN FRONT OF THRESHOLD
   ================================================== */

.door {
    z-index: 2;
}