* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: radial-gradient(ellipse at center, #1a0505 0%, #000 70%);
    color: #ff4d4d;
    font-family: "Cinzel", serif;
    min-height: 100vh;
}

.page {
    position: relative;
    width: min(1400px, 96vw);
    height: min(950px, 94vh);
    min-height: 0;
    margin: 16px auto;
    background:
        linear-gradient(
            rgba(10, 0, 0, 0.35),
            rgba(10, 0, 0, 0.35)
        ),
        url("images/manuscript-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.page-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 30;
}

.hero, .lower, .site-footer { position: relative; z-index: 1; }

.top-nav {
    position: relative;
    z-index: 31;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 56px 0;
    padding: 8px 16px;
    background: rgba(5, 0, 0, 0.78);
    border: 1px solid rgba(139, 21, 21, 0.55);
}

.logo {
    font-family: "UnifrakturMaguntia", cursive;
    font-size: 1.45rem;
    color: #ff2a2a;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 8px #000;
}

.logo .pentagram, .logo .bats {
    font-family: sans-serif;
    font-size: 1.05rem;
    color: #c41e1e;
}

nav a {
    color: #e07070;
    text-decoration: none;
    margin-left: 16px;
    font-size: 0.86rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #000;
}
nav a:first-child { margin-left: 0; }
nav a:hover { color: #ff1a1a; }
nav a.active {
    color: #ff3030;
    border-bottom: 2px solid #ff3030;
    padding-bottom: 2px;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: end;
    min-height: 340px;
    padding: 4px 48px 0;
    overflow: hidden;
    background-image:
        linear-gradient(to top, #070000 0%, rgba(7, 0, 0, 0.3) 26%, transparent 52%),
        url("images/hell-bg.png");
    background-size: cover;
    background-position: center top;
}

.hero-copy { text-align: center; z-index: 3; padding-bottom: 70px; }

.hero-copy h1 {
    font-family: "New Rocker", cursive;
    font-size: clamp(2.1rem, 3.8vw, 3.4rem);
    color: #ff3b4a;
    text-shadow: 0 0 18px rgba(255, 20, 40, 0.7), 0 4px 0 #4a0000;
    letter-spacing: 2px;
    white-space: nowrap;
}

.welcome-line { margin-top: 10px; font-size: 0.74rem; letter-spacing: 3px; color: #f0c9c9; }
.welcome-line.small { font-size: 0.68rem; letter-spacing: 2px; color: #d8a0a0; }
.tiny-star { margin-top: 10px; color: #c41e3a; }

.char { z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.char-left { align-items: flex-end; padding-left: 36px; }
.char-right { align-items: flex-start; padding-right: 36px; }
.tagline { font-size: 0.7rem; line-height: 1.3; color: #ffd0d0; text-shadow: 0 2px 8px #000; }
.tagline.right { text-align: left; }

.char-img {
    height: 260px;
    width: auto;
    max-width: 300px;
    object-fit: contain;
    display: block;
    transform: scale(1.5);
    transform-origin: bottom center;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.85));
    pointer-events: none;
    user-select: none;
}

.hero {
    overflow: visible;
}

.char {
    overflow: visible;
}

.ledge {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12px;
    background: linear-gradient(to bottom, #4a1010, #1a0404);
    border-top: 1px solid #8b2020;
    z-index: 4;
}

.lower {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 12px;
    padding: 12px 78px 8px;
    min-height: 390px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #6b1515;
    background: linear-gradient(#140404, #0a0000);
    padding: 8px;
    margin-bottom: 36px;
}

.stay-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: #b98b8b;
    transition: color 0.25s ease;
}

.stay-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-check {
    width: 18px;
    height: 18px;
    border: 1px solid #5c1212;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.stay-option:hover {
    color: #ff6b6b;
}

.stay-option:hover .custom-check {
    border-color: #a52a2a;
}

.stay-option input:checked + .custom-check {
    color: #ff4d4d;
    border-color: #ff4d4d;
    box-shadow:
        0 0 6px rgba(255, 40, 40, 0.5),
        inset 0 0 5px rgba(255, 40, 40, 0.2);
    transform: scale(1.08);
}

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e07070;
    text-decoration: none;
    padding: 10px 12px;
    font-size: 0.9rem;
}
.side-link.active {
    background: #3a0a0a;
    border: 1px solid #8b1a1a;
    color: #ff4d4d;
}
.side-link:hover { color: #ff2a2a; }

.stay {
    margin-top: auto;
    border: 1px solid #6b1515;
    padding: 12px;
    background: #120303;
}
.stay h3 { color: #ff3b4a; font-size: 0.95rem; margin-bottom: 8px; }
.stay label { display: block; font-size: 0.82rem; color: #e8b0b0; margin: 6px 0; cursor: pointer; }
.stay input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px; height: 13px;
    border: 1px solid #c44;
    background: #1a0000;
    margin-right: 6px;
    vertical-align: middle;
    cursor: pointer;
}
.stay input[type="checkbox"]:checked {
    background: #ff2a2a;
    box-shadow: inset 0 0 0 2px #1a0000;
}

.panels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 36px;
}

.panel {
    border: 1px solid #5c1212;
    background: #050000;
    min-height: 330px;
}

.panel-photo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panel-photo img {
    flex: 1;
    width: 100%;
    min-height: 180px;
    object-fit: cover;
    display: block;
}
.panel-caption {
    padding: 8px 10px;
    background: #120303;
    border-top: 1px solid #6b1515;
    font-size: 0.72rem;
    color: #ffb0b0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.panel-caption a { color: #e07070; text-decoration: none; }
.panel-caption a:hover { color: #ff3030; }

.panel-story { padding: 14px; overflow: auto; }
.panel-story h3 { font-size: 0.82rem; letter-spacing: 1px; color: #ff4d4d; margin-bottom: 12px; }
.chat p { font-size: 0.72rem; line-height: 1.45; color: #e8b8b8; margin-bottom: 10px; }
.chat b { color: #ff6b6b; }

.panel-links { display: flex; flex-direction: column; }

.add-us {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    min-height: 220px;
}

.add-card {
    flex: 1;
    position: relative;
    z-index: 31;
    border: 1px solid #6b1515;
    background: #1a0505;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    color: inherit;
}
.add-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.add-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));
    color: #ffd0d0;
    font-size: 0.68rem;
    text-align: left;
}
.add-card:hover { border-color: #c41e3a; }

.quick {
    width: 100%;
    border-top: 1px solid #6b1515;
    padding: 12px 10px;
    text-align: center;
}
.quick h4 { font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 10px; color: #ff6b6b; }
.quick-row { display: flex; justify-content: space-around; }
.quick-row a { color: #d08080; text-decoration: none; font-size: 0.7rem; }
.quick-row a:hover { color: #ff3030; }

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 8px 70px 14px;
    color: #c07070;
    font-size: 0.82rem;
    text-shadow: 0 2px 6px #000;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%) translateY(10px);
    background: #140000;
    border: 1px solid #c41e3a;
    box-shadow: 0 0 18px rgba(180, 0, 0, 0.55);
    color: #ffd0d0;
    padding: 12px 18px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: 80;
    transition: opacity 0.2s, transform 0.2s;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast-mark { color: #ff2a2a; margin-right: 8px; }

/* LOCK PAGE SIZE so the frame stops stretching */
.page {
    width: min(1400px, 96vw);
    height: min(950px, 94vh);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hero {
    flex: 0 0 36%;
    min-height: 0;
}

.hero-copy {
    padding-bottom: 46px;
}

.lower {
    flex: 1;
    min-height: 0;
    padding: 8px 78px 4px;
}

.panels {
    min-height: 0;
    margin-bottom: 10px;
    height: 100%;
}

.panel {
    min-height: 0;
    height: 100%;
}

.sidebar {
    margin-bottom: 10px;
}

.site-footer {
    padding: 4px 70px 8px;
}

/* AGE GATE */
body.gate-open { overflow: hidden; }

.gate {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.gate.hidden { display: none; }

.gate-card {
    position: relative;
    width: min(720px, 92vw);
}

.gate-art {
    width: 100%;
    height: auto;
    display: block;
}

.gate-form {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 32%;
    bottom: 26%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.gate-user {
    width: 100%;
    height: 42px;
    background: #0a0000;
    border: 1px solid #8b1a1a;
    outline: none;
    color: #ffd0d0;
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
    padding: 0 12px;
}

.gate-user::placeholder { color: #8a5050; }

.gate-user:focus { border-color: #ff3b4a; }

.gate-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.age-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #ffd0d0;
    cursor: pointer;
}

.age-check input {
    accent-color: #c41e3a;
    width: 15px;
    height: 15px;
}

.gate-submit {
    width: 100%;
    background: #3a0a0a;
    border: 1px solid #c41e3a;
    color: #ffd0d0;
    font-family: "Creepster", cursive;
    font-size: 1.35rem;
    letter-spacing: 2px;
    padding: 8px;
    cursor: pointer;
}

.gate-submit:hover { background: #5a1010; }

.user-greet {
    margin-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: #ffb0b0;
    text-shadow: 0 2px 8px #000;
}

.gate {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

body.gate-open .page {
    filter: blur(18px);
}

.hot-ad {
    padding: 10px 8px;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 1px;
    border-bottom: 1px solid #6b1515;
    animation: hellglow 2.8s ease-in-out infinite;
}

@keyframes hellglow {
    0%   { color: #ff2a2a; text-shadow: 0 0 6px #ff0000; }
    50%  { color: #ff9ad8; text-shadow: 0 0 16px #ff4ad2; }
    100% { color: #ff2a2a; text-shadow: 0 0 6px #ff0000; }
}

.panel-story {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.chat-log {
    flex: 1;
    overflow: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #e8b8b8;
}

.msg b { margin-right: 6px; }
.msg.darcy b { color: #ff9ad8; }
.msg.trixie b { color: #ff6b6b; }
.msg.user b { color: #ffd0a0; }

.msg.typing span {
    letter-spacing: 2px;
    opacity: 0.7;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

.chat-choices {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid #3a1010;
}

.chat-choices button {
    background: #1a0505;
    border: 1px solid #6b1515;
    color: #ffb0b0;
    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    text-align: left;
    padding: 6px 8px;
    cursor: pointer;
}

.chat-choices button:hover {
    border-color: #c41e3a;
    color: #fff;
}

.chat-composer {
    border: none;
    border-top: 1px solid #6b1515;
    background: #120303;
    color: #c08080;
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.chat-composer:disabled {
    background: #0a0000;
    color: #5a3030;
    cursor: default;
}

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

.panel-story {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid #5c1212;
    background: #050000;
}

.chat-frame { display: none; }

.chat-inner {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.chat-log {
    flex: 1;
    overflow: auto;
    padding: 10px 12px;
}

.msg {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #ffd4d4;
}

.msg b { font-size: 0.88rem; }

.chat-composer {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    width: 100%;
    z-index: auto;
    background: #120303;
    border: none;
    border-top: 1px solid #6b1515;
    color: #c08080;
    font-family: "Cinzel", serif;
    font-size: 0.78rem;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.chat-composer:disabled {
    background: #0a0000;
    color: #5a3030;
    cursor: default;
}

.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-track { background: #140303; }
.chat-log::-webkit-scrollbar-thumb {
    background: #8b1a1a;
    border-radius: 6px;
    border: 1px solid #3a0808;
}
.chat-log::-webkit-scrollbar-thumb:hover { background: #c41e3a; }
.chat-log {
    scrollbar-width: thin;
    scrollbar-color: #8b1a1a #140303;
}

.character-lore::-webkit-scrollbar {
    width: 8px;
}

.character-lore::-webkit-scrollbar-track {
    background: #140303;
}

.character-lore::-webkit-scrollbar-thumb {
    background: #8b1a1a;
    border-radius: 6px;
    border: 1px solid #3a0808;
}

.character-lore::-webkit-scrollbar-thumb:hover {
    background: #c41e3a;
}

.character-lore {
    scrollbar-width: thin;
    scrollbar-color: #8b1a1a #140303;
}

.chat-choices:empty {
    display: none;
}

.hero-title-img {
    width: min(540px, 92%);
    height: auto;
    display: block;
    margin: 0 auto 8px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.welcome-line {
    margin-top: 8px;
    font-size: 0.95rem;
    letter-spacing: 3px;
    color: #ffe0e0;
    text-shadow: 0 2px 6px #000, 0 0 10px rgba(255, 40, 40, 0.6);
}

.welcome-line.small {
    font-size: 0.88rem;
    letter-spacing: 2px;
    color: #ffd0d0;
}

.user-greet {
    margin-top: 8px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: #ffe8e8;
    text-shadow: 0 2px 8px #000;
}

.frame-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    z-index: 25;
} 

.page {
    width: min(1580px, 98vw);
    overflow: visible;

    transform: scale(1.12);
    transform-origin: top center;
}

.frame-left { left: -30px; }
.frame-right { right: -30px; }

.lower {
    padding-left: 210px;
    padding-right: 210px;
}

.hero {
    padding-left: 40px;
    padding-right: 40px;
}

/* PAGE DEPTH */
.page {
    box-shadow:
        0 0 80px rgba(160, 0, 0, 0.28),
        inset 0 0 90px rgba(40, 0, 0, 0.35);
}

.hero {
    box-shadow: inset 0 -30px 50px rgba(0, 0, 0, 0.45);
}

.ledge {
    box-shadow: 0 -8px 24px rgba(180, 0, 0, 0.35);
}

/* PANELS */
.sidebar,
.panel,
.stay {
    background: linear-gradient(180deg, #1c070a 0%, #090000 100%);
    border: 1px solid #8b1c1c;
    box-shadow:
        inset 0 0 28px rgba(90, 0, 0, 0.35),
        0 0 14px rgba(80, 0, 0, 0.18);
}

.panel {
    position: relative;
}

.panel::before,
.panel::after {
    content: "✦";
    position: absolute;
    color: #7a1515;
    font-size: 0.7rem;
    z-index: 2;
    pointer-events: none;
}

.panel::before { top: 4px; left: 6px; }
.panel::after { top: 4px; right: 6px; }

/* SIDEBAR */
.side-link {
    border: 1px solid transparent;
}

.side-link.active {
    background: linear-gradient(90deg, #5a1218, #220608);
    border-color: #a02020;
    box-shadow: inset 0 0 14px rgba(255, 40, 40, 0.2);
}

.side-link:hover {
    background: rgba(80, 10, 14, 0.45);
}

.stay h3 {
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.45);
}

/* CHAT */
.panel-story {
    background: linear-gradient(180deg, #160508 0%, #070000 100%);
}

.chat-composer {
    background: linear-gradient(180deg, #1a0608, #0c0000);
    color: #e0a0a0;
}

/* RIGHT COLUMN */
.hot-ad {
    background: linear-gradient(180deg, #2a0a0e, #120305);
    border-bottom: 1px solid #8b1c1c;
}

.add-card {
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
}

/* NAV */
.top-nav {
    background: linear-gradient(to bottom, rgba(18, 0, 0, 0.88), rgba(8, 0, 0, 0.35));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.logo {
    text-shadow: 0 0 14px rgba(255, 30, 30, 0.55);
}

/* FOOTER */
.site-footer {
    border-top: 1px solid #6b1515;
    background: linear-gradient(180deg, #120305, transparent);
}

/* CORNER TICKS */
.sidebar,
.panel,
.stay {
    background-image:
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a);
    background-size:
        12px 2px, 2px 12px,
        12px 2px, 2px 12px,
        12px 2px, 2px 12px,
        12px 2px, 2px 12px;
    background-position:
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    background-repeat: no-repeat;
}

/* SIDE SIGIL */
.sigil {
    text-align: center;
    color: #8b1a1a;
    font-size: 1.1rem;
    padding: 6px 0 4px;
    text-shadow: 0 0 10px rgba(180, 0, 0, 0.6);
}

.sidebar {
    background-color: #0c0000;
    background-image:
        radial-gradient(circle at 50% 72%, rgba(140, 20, 20, 0.2), transparent 46%),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a),
        linear-gradient(#c41e3a, #c41e3a);
    background-size:
        auto,
        12px 2px, 2px 12px,
        12px 2px, 2px 12px,
        12px 2px, 2px 12px,
        12px 2px, 2px 12px;
    background-position:
        center,
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    background-repeat: no-repeat;
}

/* CHAT HEADER LINE */
.chat-head {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: #c45a5a;
    padding: 7px 8px 6px;
    border-bottom: 1px solid #5c1212;
    text-shadow: 0 0 8px rgba(180, 0, 0, 0.45);
}

/* DIVIDER LINES WITH A SIGIL */
.stay h3::after,
.hot-ad::after,
.site-footer::before {
    display: block;
    content: "— ⛧ —";
    color: #7a1515;
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-top: 4px;
    text-align: center;
}

.hot-ad::after { margin-top: 2px; }

/* THIN INNER LINE */
.panel,
.sidebar {
    outline: 1px solid rgba(60, 8, 8, 0.9);
    outline-offset: -4px;
}

/* FOOTER */
.site-footer {
    letter-spacing: 1px;
}

.about-label {
    padding: 8px 12px 3px;
    color: #8b1a1a;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-align: left;
    text-shadow: 0 0 8px rgba(180, 0, 0, 0.35);
}

/* CHARACTER LORE */
.character-lore {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    padding: 24px 28px;
}

.lore-content {
    width: 92%;
    margin: 0 auto;
    color: #e8b8b8;
    font-size: 0.88rem;
    line-height: 1.75;
}

.lore-content .character-stats {
    color: #d99b9b;
    line-height: 1.6;
    margin-bottom: 18px;
}

.lore-content .character-stats strong {
    color: #ff4d4d;
    font-weight: normal;
}

.lore-divider {
    height: 1px;
    background: #5c1212;
    margin: 18px 0 22px;
}

.lore-content h2 {
    color: #ff4d4d;
    font-size: 1rem;
    letter-spacing: 1.5px;
    margin: 0 0 20px;
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.35);
}

.lore-content p {
    margin: 0 0 18px;
}

.lore-content blockquote {
    margin: 22px 20px;
    padding: 10px 18px;
    border-left: 2px solid #7d1717;
    color: #ffb0b0;
    font-style: italic;
    text-shadow: 0 0 8px rgba(255, 40, 40, 0.25);
}

.character-lore .lore-title {
    flex: 0 0 auto;
    color: #ff4d4d;
    font-size: 1rem;
    letter-spacing: 3px;
    text-align: center;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid #5c1212;
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.45);
}

.character-lore p {
    flex: 1;
    width: 92%;
    margin: 0 auto;
    color: #e8b8b8;
    font-size: 0.88rem;
    line-height: 1.75;
    text-align: left;
}

/* CHARACTER SWITCH TRANSITION */

.panel.character-switching {
    opacity: 0;
    transform: scale(0.97);
    filter: brightness(0.5);
}

.panel-photo,
.panel-story {
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        filter 0.28s ease;
}

.side-link {
    border: none;
    font: inherit;
    color: inherit;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.stay-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.stay-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-check {
    width: 13px;
    height: 13px;
    border: 1px solid #6e2020;
    background: #120000;
    display: inline-block;
    position: relative;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.stay-option:hover .custom-check {
    border-color: #ff4d4d;
    box-shadow: 0 0 8px rgba(255, 40, 40, 0.35);
}

.stay-check:checked + .custom-check {
    border-color: #ff4d4d;
    background: #260000;
    box-shadow: 0 0 10px rgba(255, 40, 40, 0.45);
}

.stay-check:checked + .custom-check::after {
    content: "⛧";
    position: absolute;
    left: -1px;
    top: -3px;
    color: #ff4d4d;
    font-size: 12px;
}

.fate-toast {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translate(-50%, -20px);

    width: min(620px, 80vw);
    padding: 24px 30px;

    background:
        linear-gradient(
            rgba(35, 0, 0, 0.96),
            rgba(12, 0, 0, 0.98)
        );

    border: 2px solid #7d1717;

    box-shadow:
        0 0 8px rgba(255, 30, 30, 0.5),
        0 0 30px rgba(255, 20, 20, 0.25),
        inset 0 0 25px rgba(100, 0, 0, 0.35);

    color: #f0caca;
    font-size: 1rem;
    letter-spacing: 2px;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    z-index: 9999;
}

.fate-toast span {
    color: #ff3b3b;
    font-size: 1.4rem;
    text-shadow:
        0 0 8px rgba(255, 30, 30, 0.8),
        0 0 18px rgba(255, 30, 30, 0.4);
}

.fate-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

html,
body {
    overflow: hidden;
}

.stay {
    position: relative;
    overflow: visible;
}

.stay-sealed {
    position: absolute;
    inset: 0;

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

    background: rgba(5, 0, 0, 0.55);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.5s ease;

    z-index: 10;
}

.stay-sealed img {
    width: 165%;
    max-width: 150px;
    height: auto;

    opacity: 1;

    filter:
        brightness(1)
        contrast(1.1);

    transform: scale(0.9);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.stay-sealed span {
    margin-top: -8px;

    color: #ee2e2e;
    font-size: 0.65rem;
    letter-spacing: 4px;

    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

.stay.sealed .stay-sealed {
    opacity: 1;
    pointer-events: all;
}

.stay.sealed .stay-sealed img {
    opacity: 1;
    transform: scale(1);
}

.stay.sealed .stay-sealed span {
    opacity: 1;
}

.stay.sealed {
    border-color: #260606;
    background: #080000;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(0, 0, 0, 0.8);
}

.stay.sealed h3,
.stay.sealed .stay-option {
    opacity: 0.6;
    filter: brightness(0.8);
}

.sound-hint {
    margin-top: 10px;
    text-align: center;

    color: #d98a8a;
    font-size: 0.7rem;
    letter-spacing: 1px;

    opacity: 1;

    text-shadow:
        0 0 5px rgba(255, 60, 60, 0.45),
        0 0 10px rgba(255, 30, 30, 0.2);
}

/* =========================================================
   HOME / GALLERY SWITCH
   ========================================================= */

.gallery-menu {
    display: none;
}

.gallery-panels {
    display: none;
}


/* Gallery mode */

.lower.gallery-active .home-panels {
    display: none;
}

.lower.gallery-active .gallery-panels {
    display: block;
}

/* Hide Home menu and show Gallery menu */

.lower.gallery-active > .sidebar > .about-label,
.lower.gallery-active > .sidebar > .side-link {
    display: none;
}

.lower.gallery-active > .sidebar .gallery-menu {
    display: block;
}


/* Gallery menu appearance */

.gallery-link {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    border: 1px solid transparent;
    background: transparent;

    color: #e07070;

    padding: 10px 12px;

    font-family: inherit;
    font-size: 0.9rem;

    text-align: left;

    cursor: pointer;
}

.gallery-link:hover {
    color: #ff2a2a;
}

.gallery-link.active {
    background: linear-gradient(90deg, #5a1218, #220608);
    border-color: #a02020;
    box-shadow: inset 0 0 14px rgba(255, 40, 40, 0.2);
    color: #ff4d4d;
}

.gallery-soon small {
    color: #6d4545;
    font-size: 0.68rem;
}

/* Keep the original Home panels as direct grid items */
.home-panels {
    display: contents;
}

/* Keep the sidebar the same height in Home and Gallery */

.sidebar {
    height: 100%;
}

/* =========================================================
   HOME / GALLERY TRANSITION
   ========================================================= */

.panels {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar {
    transition: opacity 0.3s ease;
}

.lower.view-changing .panels,
.lower.view-changing .sidebar {
    opacity: 0;
}

.lower.view-changing .panels {
    transform: translateY(4px);
}

/* =========================================================
   GALLERY WINDOW
   ========================================================= */

.gallery-panels {
    width: 100%;
    min-width: 0;
}

.gallery-window {
    width: 100%;
    min-height: 390px;

    border: 1px solid #5c1212;
    background:
        linear-gradient(
            180deg,
            rgba(25, 2, 5, 0.96),
            rgba(5, 0, 0, 0.98)
        );

    box-shadow:
        inset 0 0 30px rgba(120, 0, 0, 0.12),
        0 0 12px rgba(80, 0, 0, 0.25);

    overflow: hidden;
}


/* WINDOW HEADER */

.gallery-window-top {
    border-bottom: 1px solid #5c1212;
    background: linear-gradient(
        180deg,
        #180407,
        #0b0002
    );
}


/* Small "HELL" title */

.gallery-window-title {
    padding: 7px 12px 4px;

    color: #b84b4b;

    font-size: 0.65rem;
    letter-spacing: 2px;
}


/* Folder path */

.gallery-path {
    padding: 5px 12px 9px;

    color: #8e5a5a;

    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

.gallery-path span {
    margin: 0 7px;
    color: #5f2828;
}

.gallery-path strong {
    color: #d77a7a;
    font-weight: normal;
}


/* Main gallery area */

.gallery-content {
    min-height: 275px;
    padding: 14px;

    position: relative;
}


/* Temporary empty state */

.gallery-empty {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    color: #5f2b2b;

    pointer-events: none;
}

.gallery-empty > span {
    display: block;

    margin-bottom: 8px;

    color: #8b2020;
    font-size: 1.2rem;

    text-shadow: 0 0 12px rgba(180, 0, 0, 0.5);
}

.gallery-empty div {
    color: #8e4141;

    font-size: 0.8rem;
    letter-spacing: 2px;
}

.gallery-empty small {
    display: block;

    margin-top: 5px;

    color: #4e2727;

    font-size: 0.62rem;
}

/* =========================================================
   GALLERY WINDOW POSITION
   ========================================================= */

.gallery-panels {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;

    align-self: stretch;
    margin-bottom: 36px;
}

.gallery-window {
    height: 100%;
    min-height: 390px;
}

/* =========================================================
   GALLERY IMAGE GRID
   ========================================================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
}

.gallery-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(120, 0, 20, 0.7);
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: 
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-item:hover {
    transform: translateY(-2px);
    border-color: rgba(180, 20, 40, 0.95);
    box-shadow: 0 0 12px rgba(120, 0, 20, 0.45);
}

.gallery-item img {
    transition: transform 0.35s ease, filter 0.35s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

/* GALLERY SCROLL */
.gallery-window {
    overflow-y: auto;
    overflow-x: hidden;
}

.gallery-window::-webkit-scrollbar {
    width: 8px;
}

.gallery-window::-webkit-scrollbar-track {
    background: #140303;
}

.gallery-window::-webkit-scrollbar-thumb {
    background: #8b1a1a;
    border-radius: 6px;
    border: 1px solid #3a0808;
}

.gallery-window::-webkit-scrollbar-thumb:hover {
    background: #c41e3a;
}

.gallery-window {
    scrollbar-width: thin;
    scrollbar-color: #8b1a1a #140303;
}

.gallery-window-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #100202;
    padding-bottom: 6px;
}

/* =========================================================
   GALLERY IMAGE VIEWER
   ========================================================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    padding: 40px;

    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    cursor: pointer;
}

.gallery-lightbox.open {
    opacity: 1;
    visibility: visible;
}


/* Image container */

.gallery-lightbox-inner {
    position: relative;

    max-width: 90vw;
    max-height: 90vh;

    transform: scale(0.92);

    transition: transform 0.3s ease;

    cursor: default;
}

.gallery-lightbox.open .gallery-lightbox-inner {
    transform: scale(1);
}


/* Actual large image */

.gallery-lightbox-inner img {
    display: block;

    max-width: 90vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border: 1px solid #7a1b1b;

    box-shadow:
        0 0 25px rgba(120, 0, 0, 0.45),
        0 0 80px rgba(0, 0, 0, 0.9);
}


/* Close button */

.gallery-lightbox-close {
    position: absolute;
    top: 9%;
    right: 28%;
    z-index: 2;

    width: 38px;
    height: 38px;

    border: 1px solid #641717;

    background: rgba(10, 0, 0, 0.8);

    color: #c85a5a;

    font-family: inherit;
    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.gallery-lightbox-close:hover {
    color: #ff4d4d;

    border-color: #a52222;

    background: rgba(50, 0, 0, 0.9);
}

/* Gallery lightbox must appear above the site frame */

.gallery-lightbox {
    z-index: 999999;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    width: 52px;
    height: 80px;

    border: 1px solid #641717;
    background: rgba(10, 0, 0, 0.65);
    color: #c85a5a;

    font-family: inherit;
    font-size: 46px;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.gallery-lightbox-prev {
    left: 24%;
}

.gallery-lightbox-next {
    right: 24%;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    color: #ff4d4d;
    border-color: #a52222;
    background: rgba(50, 0, 0, 0.9);
}

.gallery-lightbox-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.gallery-lightbox-next:hover {
    transform: translateY(-50%) translateX(2px);
}

.gallery-lightbox-inner img {
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.gallery-lightbox-inner img.gallery-slide-out-left {
    opacity: 0;
    transform: translateX(-35px) scale(0.97);
}

.gallery-lightbox-inner img.gallery-slide-out-right {
    opacity: 0;
    transform: translateX(35px) scale(0.97);
}

.gallery-lightbox-inner img.gallery-slide-in-left {
    opacity: 0;
    transform: translateX(35px) scale(0.97);
}

.gallery-lightbox-inner img.gallery-slide-in-right {
    opacity: 0;
    transform: translateX(-35px) scale(0.97);
}

.gallery-empty {
    grid-column: 1 / -1;

    min-height: 220px;

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

    text-align: center;

    color: rgba(150, 70, 70, 0.75);

    font-family: inherit;
}

.gallery-empty-symbol {
    margin-bottom: 10px;

    font-size: 28px;

    color: rgba(130, 20, 30, 0.7);
}

.gallery-empty-title {
    font-size: 14px;
    letter-spacing: 1px;
}

.gallery-empty-text {
    margin-top: 5px;

    font-size: 11px;
    color: rgba(120, 70, 70, 0.55);
}

/* =========================================================
   ALTAR VIEW
   ========================================================= */

:root {
    --altar-darcy-size: 100%;
    --altar-trixie-size: 100%;
    --altar-scare-normal: 68vh;
    --altar-scare-eyeless: 68vh;
    --altar-scare-lewd: 74vh;
}

.altar-stage {
    display: none;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 2;
    margin: 6px 150px 36px;
}

.page.altar-active {
    overflow: hidden;
}

.page.altar-active .hero,
.page.altar-active .lower,
.page.altar-active .site-footer {
    display: none;
}

.page.altar-active .altar-stage {
    display: flex;
}

.altar-stage-inner {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid #5c1212;
    background:
        radial-gradient(ellipse at center, rgba(40, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.72) 70%),
        url("images/Altar/altar-bg.png");
    background-size: cover;
    background-position: center;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.65),
        0 0 14px rgba(80, 0, 0, 0.18);
}

.altar-scene {
    position: relative;
    height: 100%;
    min-height: 0;
}

/* Big sprites standing on the dialogue */
.altar-cast {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 118px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.altar-char {
    height: 100%;
    width: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: bottom center;
}

.altar-char img {
    width: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.85));
    user-select: none;
}

#altar-darcy-wrap img { height: var(--altar-darcy-size); }
#altar-trixie-wrap img { height: var(--altar-trixie-size); }

.altar-char.hop {
    animation: altarHop 0.28s ease;
}

@keyframes altarHop {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-14px) scale(1.03); }
    100% { transform: translateY(0) scale(1); }
}

/* Full-width dialogue bar */
.altar-dialogue-wrap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 4;
    border: 1px solid #8b1a1a;
    background: #120303;
    box-shadow:
        inset 0 0 18px rgba(80, 0, 0, 0.35),
        0 0 16px rgba(80, 0, 0, 0.25);
    padding: 12px 16px 14px;
}

.altar-dialogue-wrap {
    overflow: visible;
}

.altar-nameplate {
    position: absolute;
    left: 18px;
    top: -22px;
    z-index: 5;
    pointer-events: none;
}

.altar-nameplate span:first-child {
    color: #c45a5a;
    font-size: 0.72rem;
    letter-spacing: 2px;
}

.altar-speaker {
    font-size: 1.55rem;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow:
        0 2px 10px #000,
        0 0 14px rgba(0, 0, 0, 0.95);
}

.altar-speaker.darcy { color: #ff9ad8; }
.altar-speaker.trixie { color: #ff6b6b; }

.altar-ending-toast {
    position: relative;
}

.altar-ending-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #641717;
    background: rgba(10, 0, 0, 0.8);
    color: #c85a5a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.altar-ending-close:hover {
    color: #ff4d4d;
    border-color: #a52222;
}

.altar-dialogue {
    min-height: 64px;
    color: #ffe0e0;
    font-size: 1.12rem;
    line-height: 1.6;
    letter-spacing: 0.3px;
}

.altar-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.altar-choices button {
    background: linear-gradient(180deg, #2a0a0e, #120305);
    border: 1px solid #7a1717;
    color: #ffd0d0;
    font-family: "Cinzel", serif;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    text-align: left;
    padding: 11px 12px;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.altar-choices button:hover {
    border-color: #ff3030;
    color: #fff;
    background: linear-gradient(180deg, #4a1014, #1a0505);
}

.altar-choices button:disabled {
    opacity: 0.35;
    cursor: default;
}

.altar-ending-toast {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translate(-50%, -20px);
    width: min(620px, 80vw);
    padding: 24px 30px;
    background: linear-gradient(rgba(35, 0, 0, 0.96), rgba(12, 0, 0, 0.98));
    border: 2px solid #7d1717;
    box-shadow:
        0 0 8px rgba(255, 30, 30, 0.5),
        0 0 30px rgba(255, 20, 20, 0.25),
        inset 0 0 25px rgba(100, 0, 0, 0.35);
    color: #f0caca;
    font-size: 1rem;
    letter-spacing: 2px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 9999;
}

.altar-ending-toast span {
    display: block;
    color: #ff3b3b;
    font-size: 1.4rem;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(255, 30, 30, 0.8);
}

.altar-ending-toast strong {
    display: block;
    margin-bottom: 8px;
}

.altar-ending-toast p {
    margin: 0 0 16px;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: #e8b8b8;
}

.altar-ending-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.altar-ending-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.altar-ending-links a {
    color: #ffd0d0;
    text-decoration: none;
    border: 1px solid #8b1a1a;
    background: #2a0a0e;
    padding: 8px 12px;
    font-size: 0.78rem;
    letter-spacing: 1px;
}

.altar-ending-links a:hover {
    color: #fff;
    border-color: #ff3030;
}

.altar-jumpscare {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.altar-jumpscare.lock {
    display: flex;
}

.altar-scare-frame {
    position: absolute;
    inset: -8%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.altar-jumpscare img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--scare-scale-normal));
    opacity: 1;
    transition: opacity 0.7s ease;
}

.altar-jumpscare.lock.scare-normal:not(.souls) img {
    animation: scareSlamNormal 0.18s ease-out;
}

.altar-jumpscare.lock.scare-eyeless:not(.souls) img {
    animation: scareSlamEyeless 0.18s ease-out;
}

@keyframes scareSlamNormal {
    0%   { opacity: 0; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(var(--scare-scale-normal)); }
}

@keyframes scareSlamEyeless {
    0%   { opacity: 0; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(var(--scare-scale-eyeless)); }
}

.altar-jumpscare {
    --scare-scale-normal: 0.9;
    --scare-scale-eyeless: 0.9;
    --scare-scale-lewd: 0.9;
}

.altar-jumpscare.scare-normal img { transform: scale(var(--scare-scale-normal)); }
.altar-jumpscare.scare-eyeless img { transform: scale(var(--scare-scale-eyeless)); }
.altar-jumpscare.scare-lewd img { transform: scale(var(--scare-scale-lewd)); }

.altar-jumpscare::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 140px 50px #000;
}

.altar-jumpscare.lewd img {
    animation: lewdPulse 0.55s ease-in-out infinite;
}

@keyframes lewdPulse {
    0%, 100% { transform: scale(var(--scare-scale-lewd)); }
    50% { transform: scale(1.28); }
}

.altar-jumpscare.souls img {
    opacity: 0;
}

.altar-jumpscare.souls:not(.lewd) img {
    animation: none !important;
}

.altar-jumpscare.souls .altar-scare-flash,
.altar-jumpscare.lewd-end .altar-scare-flash {
    animation: none !important;
    opacity: 0 !important;
    display: none;
}

.altar-scare-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.45);
    opacity: 0;
    pointer-events: none;
}

.altar-jumpscare.lewd img {
    animation: lewdPulse 0.55s ease-in-out infinite;
}

.altar-jumpscare.lewd .altar-scare-flash {
    animation: lewdFlash 0.45s ease-in-out infinite;
}

@keyframes lewdPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

@keyframes lewdFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.altar-souls {
    position: absolute;
    z-index: 3;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.8s ease, transform 1.8s ease;
}

.altar-jumpscare.souls .altar-souls {
    opacity: 1;
    transform: translateY(0);
}

.altar-souls-title {
    color: #7a1010;
    font-family: "Cinzel", serif;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(90, 0, 0, 0.9);
}

.altar-souls-sub {
    margin-top: 14px;
    color: #c9a36a;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.altar-souls-hint {
    margin-top: 28px;
    color: #6a4040;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
}

.altar-jumpscare.lewd-end {
    background: #1a0010;
}

.altar-jumpscare.lewd-end .altar-souls-title {
    color: #ff4fa3;
    text-shadow: 0 0 18px rgba(255, 80, 160, 0.8);
}

.altar-jumpscare.lewd-end .altar-souls-sub {
    color: #ffc1de;
}

.altar-jumpscare.lewd-end .altar-souls-hint {
    color: #a86a88;
}

body.altar-locked {
    overflow: hidden;
    pointer-events: none;
}

body.altar-locked .altar-jumpscare {
    pointer-events: all;
}