/* The horror theme (scripts/horror.js, SeasonalThemes.cs). horror.js sets data-horror="day" or
   "night" on <html>, on top of data-theme="dark": the dark theme's dark blue turns pitch black
   and its blue accents blood red. MainLayout's .page carries data-theme as well, so the colours
   are set on it too, or it would bring the dark blue back. */

@font-face {
    font-family: 'Creepster';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* SIL Open Font License 1.1, Sideshow; the Latin subset from Google Fonts. */
    src: url('../fonts/creepster-latin.woff2') format('woff2');
}

:root[data-horror],
:root[data-horror] [data-theme] {
    color-scheme: dark;
    --cb-primary: #c1121f;
    --cb-primary-dark: #e5383b;
    --cb-secondary: #c1121f;
    --cb-link-color: #ff5c5c;

    --cb-bg-body: #000000;
    --cb-bg-surface: #0a0a0a;
    --cb-bg-elevated: #101010;
    --cb-bg-input: #080808;
    --cb-bg-sidebar-start: #000000;
    --cb-bg-sidebar-end: #2b0000;

    --cb-text-body: #e8e2dc;
    --cb-text-strong: #f6efe8;
    --cb-text-muted: #a89c94;

    --cb-border-color: #331414;
    --cb-border-strong: #5a1d1d;
    --cb-border-focus: #ff3b3b;
    --cb-shadow-color: rgba(120, 0, 0, 0.35);

    --cb-tab-active: #ff5c5c;
    --cb-row-active-bg: #2a0707;
    --cb-row-active-border: #7a1616;
    --cb-accent-strong: #ff2e2e;

    --cbh-blood: #8a0303;
    --cbh-blood-light: #b3060b;
}

/* The header's greeting while the horror theme is on: "Välkommen till HorrorBuddy!" (MiniPlayer). */
:root[data-horror] .cb-horror-welcome {
    font-family: 'Creepster', var(--cb-font-family);
    font-size: 1.25em;
    letter-spacing: 0.05em;
    color: #ff2a2a;
    text-shadow: 0 0 6px rgba(160, 0, 0, 0.8);
}

/* Headings only: the horror font is fun, but not for song titles and lyrics. Besides the real
   headings, the app shows headings as legends, the "Välj sånglista:"-style selector labels and
   table headers. The dense grids keep their plain headers: those are mostly dates and numbers,
   which the horror font makes hard to read, and it is wide enough to stretch their columns. */
:root[data-horror] :is(h1, h2, h3, h4, h5, h6, legend, .cb-selector-label, .cb-loader-greeting),
:root[data-horror] th:not(:is(.attendance-grid, .attendance-table, .poll-grid-roster-table, .poll-grid-tally-table, .lineup-spread) th) {
    font-family: 'Creepster', var(--cb-font-family);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #d90429;
}

:root[data-horror="night"] h1,
:root[data-horror="night"] h2,
:root[data-horror="night"] h3,
:root[data-horror="night"] .cb-loader-greeting {
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.55);
}

/* ---- The overlay: never in the way of a tap ---- */
.cbh-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

/* The edges of the screen glow red with a slow heartbeat: faint by day, strong at night, and
   now and then it races (horror.js sets cbh-racing). Only the opacity is animated: the browser
   fades that on the GPU. Animating the box-shadow itself repainted the whole screen on the main
   thread every frame, which starved the app on phones until it froze. */
.cbh-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 110px 18px rgba(90, 0, 0, 0.4);
    opacity: 0.5;
    will-change: opacity;
    animation: cbh-heartbeat 1.4s ease-out infinite;
}

:root[data-horror="night"] .cbh-overlay::before {
    box-shadow: inset 0 0 150px 40px rgba(110, 0, 0, 0.65);
}

.cbh-overlay.cbh-racing::before {
    animation-duration: 0.55s;
}

@keyframes cbh-heartbeat {
    0% { opacity: 0.45; }
    8% { opacity: 1; }
    16% { opacity: 0.6; }
    24% { opacity: 0.9; }
    45%, 100% { opacity: 0.45; }
}

/* Blood along the top edge, dripping. */
.cbh-rim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3e%3cpath d='M0 0H120V5C112 5 110 10 104 10C98 10 99 4 90 4C82 4 84 8 76 8C70 8 70 3 62 3C54 3 56 11 48 11C40 11 42 5 34 5C26 5 28 9 20 9C12 9 12 4 0 5Z' fill='%238a0303'/%3e%3c/svg%3e") repeat-x;
    background-size: 120px 12px;
}

.cbh-drip,
.cbh-drop {
    position: absolute;
    /* From the very top, inside the rim, so a drip always hangs from it; and the rim's red. */
    top: 0;
    width: 7px;
    margin-left: -3.5px;
    background: var(--cbh-blood);
}

.cbh-drip {
    height: var(--len);
    border-radius: 0 0 4px 4px;
    transform-origin: top;
    animation: cbh-drip var(--dur) ease-in var(--delay) infinite;
}

.cbh-drop {
    height: 9px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: cbh-drop var(--dur) ease-in var(--delay) infinite;
}

@keyframes cbh-drip {
    0% { transform: scaleY(0.05); }
    65% { transform: scaleY(1); }
    75% { transform: scaleY(0.75); }
    100% { transform: scaleY(0.05); }
}

@keyframes cbh-drop {
    0%, 64% { transform: translateY(var(--len)); opacity: 0; }
    66% { transform: translateY(var(--len)); opacity: 1; }
    100% { transform: translateY(105vh); opacity: 0.8; }
}

:root[data-horror="day"] .cbh-night-only {
    display: none;
}

.cbh-cobweb {
    /* Top left: on the right it covered the menu button. */
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    color: rgba(220, 220, 220, 0.28);
}

.cbh-cobweb svg {
    width: 100%;
    height: 100%;
}

/* ---- Creatures ---- */
.cbh-spider {
    position: absolute;
    top: 0;
    left: 0;
    /* Off-screen until its animation moves it, and after (horror.js). */
    transform: translate(-200px, -200px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

/* On the black page a black spider is hard to see; it gets a faint outline. */
.cbh-spider svg,
.cbh-big-spider svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75));
}

.cbh-legs-a,
.cbh-legs-b {
    animation: cbh-legs 0.18s ease-in-out infinite alternate;
    transform-origin: 0 0;
}

.cbh-legs-b {
    animation-direction: alternate-reverse;
}

/* A spider standing still keeps its legs still (horror.js). */
.cbh-still .cbh-legs-a,
.cbh-still .cbh-legs-b {
    animation-play-state: paused;
}

/* A foraging spider nibbling at something: its body twitches to and fro (horror.js). */
.cbh-nibble svg {
    animation: cbh-nibble 0.7s ease-in-out;
}

@keyframes cbh-nibble {
    0%, 100% { transform: none; }
    15% { transform: rotate(-14deg) translateY(-1px); }
    30% { transform: rotate(10deg); }
    45% { transform: rotate(-8deg) translateY(-1px); }
    60% { transform: rotate(6deg); }
    80% { transform: rotate(-3deg); }
}

@keyframes cbh-legs {
    from { transform: rotate(-9deg); }
    to { transform: rotate(9deg); }
}

.cbh-bat {
    position: absolute;
    top: 0;
    left: 0;
    /* Off-screen until its animation moves it, and after (horror.js). */
    transform: translate(-200px, -200px);
    width: 56px;
    height: 24px;
}

.cbh-bat svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(255, 60, 60, 0.5));
}

.cbh-wing {
    animation: cbh-flap 0.16s ease-in-out infinite alternate;
    transform-origin: 0 0;
}

@keyframes cbh-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(-0.4); }
}

.cbh-eyes {
    position: absolute;
    display: flex;
    gap: 7px;
    animation: cbh-eyes 4.2s ease-in-out forwards;
}

.cbh-eyes i {
    width: 9px;
    height: 5px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 8px 2px rgba(255, 60, 0, 0.8);
}

@keyframes cbh-eyes {
    0% { opacity: 0; transform: scaleY(0.1); }
    15% { opacity: 1; transform: scaleY(1); }
    45% { opacity: 1; transform: scaleY(1); }
    48% { transform: scaleY(0.1); }
    51% { transform: scaleY(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: scaleY(0.1); }
}

/* ---- Jump scares ---- */
.cbh-scare {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.cbh-scare-bird {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(60, 0, 0, 0.92), rgba(0, 0, 0, 0.98) 70%);
    animation: cbh-scare-fade 1.7s ease-out forwards;
}

.cbh-scare-svg {
    width: min(85vw, 85vh);
    height: auto;
    animation: cbh-lunge 1.7s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

@keyframes cbh-scare-fade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes cbh-lunge {
    0% { transform: scale(0.15) rotate(-8deg); }
    14% { transform: scale(1.12) rotate(3deg); }
    22% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.04) translateX(-6px); }
    36% { transform: scale(1.04) translateX(6px); }
    42% { transform: scale(1); }
    100% { transform: scale(1.5); }
}

.cbh-scare-spider .cbh-thread {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5px;
    height: 0;
    background: rgba(230, 230, 230, 0.7);
    animation: cbh-thread 2.6s ease-in forwards;
}

.cbh-big-spider {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 216px;
    margin-left: -90px;
    transform: translateY(-240px) rotate(180deg);
    animation: cbh-big-spider 2.6s ease-in forwards;
}

@keyframes cbh-thread {
    0% { height: 0; }
    12% { height: 40vh; }
    70% { height: 40vh; }
    85% { height: 0; }
    100% { height: 0; }
}

@keyframes cbh-big-spider {
    0% { transform: translateY(-240px) rotate(180deg); }
    12% { transform: translateY(calc(40vh - 20px)) rotate(180deg); }
    18% { transform: translateY(calc(40vh - 50px)) rotate(176deg); }
    26% { transform: translateY(calc(40vh - 20px)) rotate(184deg); }
    70% { transform: translateY(calc(40vh - 20px)) rotate(180deg); }
    85% { transform: translateY(-240px) rotate(180deg); }
    100% { transform: translateY(-240px) rotate(180deg); }
}

/* ---- The loading screen ---- */
.cb-loader-horror .cbh-splash-bird {
    width: min(55vw, 13rem);
    height: auto;
    animation: cbh-splash 3s ease-in-out infinite;
}

.cb-loader-horror .cb-loader-lines {
    fill: #4a1a1a;
}

.cb-loader-horror .cb-loader-music {
    fill: #e8e2dc;
}

.cb-loader-horror .cb-loader-note.cb-current {
    fill: #ff1a1a;
}

@keyframes cbh-splash {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

.cbh-eye-glow {
    animation: cbh-glow 2.4s ease-in-out infinite;
}

@keyframes cbh-glow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ---- Gothic frames: the start page's cards get a spiky obsidian frame with skulls ----
   A 9-slice frame (31 px slices) whose thorns point outwards, with a fan of big thorns at each
   corner; a skull at the top of every card and at the foot of the last one (more would crowd the
   narrow gaps between the cards). The black gets a sheen and a dark red glow, or it would vanish
   on the black page. Extra layers that ignore the pointer, so the cards keep their size. */
:root[data-horror] .home-page .cb-page-card {
    position: relative;
    /* The song list's card (.home-panel) clips what overflows it, which cut off its own skull and
       thorns. The frame's band covers the card's outer 13 px, corners included, so nothing that
       the clipping kept tidy can show. */
    overflow: visible;
}

:root[data-horror] .home-page .cb-page-card::before {
    content: "";
    position: absolute;
    inset: -16px;
    border: 31px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93' height='93' viewBox='0 0 93 93'%3E%3Cdefs%3E%3ClinearGradient id='ob' x1='0' y1='0' x2='0.4' y2='1'%3E%3Cstop offset='0' stop-color='%235a524e'/%3E%3Cstop offset='0.35' stop-color='%231c1919'/%3E%3Cstop offset='0.7' stop-color='%230b0a0a'/%3E%3Cstop offset='1' stop-color='%2334302d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate%280 46.5 46.5%29'%3E%3Crect x='16' y='16' width='61' height='13' fill='url%28%23ob%29'/%3E%3Cpath d='M16 16.6 H77' stroke='%23a39892' stroke-opacity='0.45' stroke-width='0.9'/%3E%3Cpath d='M18 21.5 H75' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 22.6 H75' stroke='%238d827c' stroke-opacity='0.3' stroke-width='0.6'/%3E%3Cpath d='M16 29 H77' stroke='%23000' stroke-width='1.4'/%3E%3Cg fill='url%28%23ob%29' stroke='%23000' stroke-width='0.6'%3E%3Cpath d='M35.8 17.0 Q35.7 8.7 34.5 0.3 Q39.1 10.7 44.2 17.0 Z'/%3E%3Cpath d='M52.1 17.0 Q55.3 12.5 57.5 8.0 Q57.2 14.5 56.9 17.0 Z'/%3E%3Cpath d='M17.0 17.0 Q16.8 8.7 9.0 0.3 Q20.0 10.7 25.0 17.0 Z'/%3E%3Cpath d='M25.8 17.0 Q26.3 11.5 26.0 6.0 Q28.1 13.5 30.2 17.0 Z'/%3E%3Cpath d='M16 16 L21 14.5 Q9 6 0.3 0.3 Q6 9 14.5 21 Z'/%3E%3C/g%3E%3Ccircle cx='22.5' cy='22.5' r='3.4' fill='url%28%23ob%29' stroke='%23000' stroke-width='0.7'/%3E%3Cpath d='M22.5 20.6 a1.9 1.9 0 1 1 -1.9 1.9' fill='none' stroke='%23a39892' stroke-opacity='0.5' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='rotate%2890 46.5 46.5%29'%3E%3Crect x='16' y='16' width='61' height='13' fill='url%28%23ob%29'/%3E%3Cpath d='M16 16.6 H77' stroke='%23a39892' stroke-opacity='0.45' stroke-width='0.9'/%3E%3Cpath d='M18 21.5 H75' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 22.6 H75' stroke='%238d827c' stroke-opacity='0.3' stroke-width='0.6'/%3E%3Cpath d='M16 29 H77' stroke='%23000' stroke-width='1.4'/%3E%3Cg fill='url%28%23ob%29' stroke='%23000' stroke-width='0.6'%3E%3Cpath d='M35.8 17.0 Q35.7 8.7 34.5 0.3 Q39.1 10.7 44.2 17.0 Z'/%3E%3Cpath d='M52.1 17.0 Q55.3 12.5 57.5 8.0 Q57.2 14.5 56.9 17.0 Z'/%3E%3Cpath d='M17.0 17.0 Q16.8 8.7 9.0 0.3 Q20.0 10.7 25.0 17.0 Z'/%3E%3Cpath d='M25.8 17.0 Q26.3 11.5 26.0 6.0 Q28.1 13.5 30.2 17.0 Z'/%3E%3Cpath d='M16 16 L21 14.5 Q9 6 0.3 0.3 Q6 9 14.5 21 Z'/%3E%3C/g%3E%3Ccircle cx='22.5' cy='22.5' r='3.4' fill='url%28%23ob%29' stroke='%23000' stroke-width='0.7'/%3E%3Cpath d='M22.5 20.6 a1.9 1.9 0 1 1 -1.9 1.9' fill='none' stroke='%23a39892' stroke-opacity='0.5' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='rotate%28180 46.5 46.5%29'%3E%3Crect x='16' y='16' width='61' height='13' fill='url%28%23ob%29'/%3E%3Cpath d='M16 16.6 H77' stroke='%23a39892' stroke-opacity='0.45' stroke-width='0.9'/%3E%3Cpath d='M18 21.5 H75' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 22.6 H75' stroke='%238d827c' stroke-opacity='0.3' stroke-width='0.6'/%3E%3Cpath d='M16 29 H77' stroke='%23000' stroke-width='1.4'/%3E%3Cg fill='url%28%23ob%29' stroke='%23000' stroke-width='0.6'%3E%3Cpath d='M35.8 17.0 Q35.7 8.7 34.5 0.3 Q39.1 10.7 44.2 17.0 Z'/%3E%3Cpath d='M52.1 17.0 Q55.3 12.5 57.5 8.0 Q57.2 14.5 56.9 17.0 Z'/%3E%3Cpath d='M17.0 17.0 Q16.8 8.7 9.0 0.3 Q20.0 10.7 25.0 17.0 Z'/%3E%3Cpath d='M25.8 17.0 Q26.3 11.5 26.0 6.0 Q28.1 13.5 30.2 17.0 Z'/%3E%3Cpath d='M16 16 L21 14.5 Q9 6 0.3 0.3 Q6 9 14.5 21 Z'/%3E%3C/g%3E%3Ccircle cx='22.5' cy='22.5' r='3.4' fill='url%28%23ob%29' stroke='%23000' stroke-width='0.7'/%3E%3Cpath d='M22.5 20.6 a1.9 1.9 0 1 1 -1.9 1.9' fill='none' stroke='%23a39892' stroke-opacity='0.5' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='rotate%28270 46.5 46.5%29'%3E%3Crect x='16' y='16' width='61' height='13' fill='url%28%23ob%29'/%3E%3Cpath d='M16 16.6 H77' stroke='%23a39892' stroke-opacity='0.45' stroke-width='0.9'/%3E%3Cpath d='M18 21.5 H75' stroke='%23000' stroke-width='1.1'/%3E%3Cpath d='M18 22.6 H75' stroke='%238d827c' stroke-opacity='0.3' stroke-width='0.6'/%3E%3Cpath d='M16 29 H77' stroke='%23000' stroke-width='1.4'/%3E%3Cg fill='url%28%23ob%29' stroke='%23000' stroke-width='0.6'%3E%3Cpath d='M35.8 17.0 Q35.7 8.7 34.5 0.3 Q39.1 10.7 44.2 17.0 Z'/%3E%3Cpath d='M52.1 17.0 Q55.3 12.5 57.5 8.0 Q57.2 14.5 56.9 17.0 Z'/%3E%3Cpath d='M17.0 17.0 Q16.8 8.7 9.0 0.3 Q20.0 10.7 25.0 17.0 Z'/%3E%3Cpath d='M25.8 17.0 Q26.3 11.5 26.0 6.0 Q28.1 13.5 30.2 17.0 Z'/%3E%3Cpath d='M16 16 L21 14.5 Q9 6 0.3 0.3 Q6 9 14.5 21 Z'/%3E%3C/g%3E%3Ccircle cx='22.5' cy='22.5' r='3.4' fill='url%28%23ob%29' stroke='%23000' stroke-width='0.7'/%3E%3Cpath d='M22.5 20.6 a1.9 1.9 0 1 1 -1.9 1.9' fill='none' stroke='%23a39892' stroke-opacity='0.5' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E") 31 round;
    filter: drop-shadow(0 0 5px rgba(150, 0, 0, 0.55));
    pointer-events: none;
}

:root[data-horror] .home-page .cb-page-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -22px;
    width: 44px;
    height: 40px;
    margin-left: -22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40' viewBox='-2 -2 44 40'%3E%3Cdefs%3E%3CradialGradient id='bone' cx='0.45' cy='0.35' r='0.75'%3E%3Cstop offset='0' stop-color='%236b625c'/%3E%3Cstop offset='0.6' stop-color='%232a2624'/%3E%3Cstop offset='1' stop-color='%230e0c0c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url%28%23bone%29' stroke='%23000' stroke-width='0.7'%3E%3Cpath d='M7 9 L-1 3 L4 11 Z'/%3E%3Cpath d='M33 9 L41 3 L36 11 Z'/%3E%3Cpath d='M11 4 L8 -2 L14 3 Z'/%3E%3Cpath d='M29 4 L32 -2 L26 3 Z'/%3E%3Cpath d='M20 1 C8 1 2 9 2 17 C2 23 5 26 8 27 L8 31 C8 33 10 34 12 34 L28 34 C30 34 32 33 32 31 L32 27 C35 26 38 23 38 17 C38 9 32 1 20 1Z'/%3E%3C/g%3E%3Cellipse cx='13' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Cellipse cx='27' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Ccircle cx='13.6' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Ccircle cx='26.4' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Cpath d='M20 21 L17.5 26 L22.5 26Z' fill='%23000'/%3E%3Cpath d='M12 29 H28 M14 28 V33 M17 28 V34 M20 28 V34 M23 28 V34 M26 28 V33' stroke='%23000' stroke-width='0.9' fill='none'/%3E%3Cpath d='M21 1.5 L18.5 6.5 L21.5 9.5 L19.5 12' stroke='%23000' stroke-width='0.8' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(170, 0, 0, 0.7));
    pointer-events: none;
}

:root[data-horror] .home-page .cb-page-card:last-child::after {
    height: auto;
    bottom: -22px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40' viewBox='-2 -2 44 40'%3E%3Cdefs%3E%3CradialGradient id='bone' cx='0.45' cy='0.35' r='0.75'%3E%3Cstop offset='0' stop-color='%236b625c'/%3E%3Cstop offset='0.6' stop-color='%232a2624'/%3E%3Cstop offset='1' stop-color='%230e0c0c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url%28%23bone%29' stroke='%23000' stroke-width='0.7'%3E%3Cpath d='M7 9 L-1 3 L4 11 Z'/%3E%3Cpath d='M33 9 L41 3 L36 11 Z'/%3E%3Cpath d='M11 4 L8 -2 L14 3 Z'/%3E%3Cpath d='M29 4 L32 -2 L26 3 Z'/%3E%3Cpath d='M20 1 C8 1 2 9 2 17 C2 23 5 26 8 27 L8 31 C8 33 10 34 12 34 L28 34 C30 34 32 33 32 31 L32 27 C35 26 38 23 38 17 C38 9 32 1 20 1Z'/%3E%3C/g%3E%3Cellipse cx='13' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Cellipse cx='27' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Ccircle cx='13.6' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Ccircle cx='26.4' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Cpath d='M20 21 L17.5 26 L22.5 26Z' fill='%23000'/%3E%3Cpath d='M12 29 H28 M14 28 V33 M17 28 V34 M20 28 V34 M23 28 V34 M26 28 V33' stroke='%23000' stroke-width='0.9' fill='none'/%3E%3Cpath d='M21 1.5 L18.5 6.5 L21.5 9.5 L19.5 12' stroke='%23000' stroke-width='0.8' fill='none'/%3E%3C/svg%3E") center top / 44px 40px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40' viewBox='-2 -2 44 40'%3E%3Cdefs%3E%3CradialGradient id='bone' cx='0.45' cy='0.35' r='0.75'%3E%3Cstop offset='0' stop-color='%236b625c'/%3E%3Cstop offset='0.6' stop-color='%232a2624'/%3E%3Cstop offset='1' stop-color='%230e0c0c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url%28%23bone%29' stroke='%23000' stroke-width='0.7'%3E%3Cpath d='M7 9 L-1 3 L4 11 Z'/%3E%3Cpath d='M33 9 L41 3 L36 11 Z'/%3E%3Cpath d='M11 4 L8 -2 L14 3 Z'/%3E%3Cpath d='M29 4 L32 -2 L26 3 Z'/%3E%3Cpath d='M20 1 C8 1 2 9 2 17 C2 23 5 26 8 27 L8 31 C8 33 10 34 12 34 L28 34 C30 34 32 33 32 31 L32 27 C35 26 38 23 38 17 C38 9 32 1 20 1Z'/%3E%3C/g%3E%3Cellipse cx='13' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Cellipse cx='27' cy='17' rx='5' ry='4.6' fill='%23000'/%3E%3Ccircle cx='13.6' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Ccircle cx='26.4' cy='17.6' r='1.4' fill='%23ff2a1a'/%3E%3Cpath d='M20 21 L17.5 26 L22.5 26Z' fill='%23000'/%3E%3Cpath d='M12 29 H28 M14 28 V33 M17 28 V34 M20 28 V34 M23 28 V34 M26 28 V33' stroke='%23000' stroke-width='0.9' fill='none'/%3E%3Cpath d='M21 1.5 L18.5 6.5 L21.5 9.5 L19.5 12' stroke='%23000' stroke-width='0.8' fill='none'/%3E%3C/svg%3E") center bottom / 44px 40px no-repeat;
}

/* ---- The eye that follows you (horror.js): bottom right, where the main view has room ---- */
.cbh-watcher {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 24px;
    transition: transform 0.12s ease-in;
    filter: drop-shadow(0 0 4px rgba(255, 30, 0, 0.45));
}

.cbh-watcher svg,
.cbh-visitor svg,
.cbh-hand svg {
    width: 100%;
    height: 100%;
}

.cbh-iris {
    transition: transform 0.25s ease-out;
}

.cbh-watcher.cbh-blink,
.cbh-watcher.cbh-shut {
    transform: scaleY(0.08);
}

/* ---- The occasional visitor ---- */
.cbh-visitor {
    position: absolute;
    bottom: 0;
    aspect-ratio: 120 / 300;
    opacity: 0;
    animation: cbh-visit 7s ease-in-out forwards;
}

@keyframes cbh-visit {
    0% { opacity: 0; }
    25%, 70% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* ---- Corrupted headings: false words over a real heading, for a moment ---- */
.cbh-corrupt {
    position: absolute;
    white-space: nowrap;
    color: #ff1a1a;
    animation: cbh-glitch 0.32s steps(1) forwards;
}

@keyframes cbh-glitch {
    0% { transform: translateX(-3px); opacity: 1; }
    20% { transform: translateX(2px); }
    45% { transform: translateX(-1px) skewX(-8deg); }
    70% { transform: translateX(3px); }
    90% { transform: none; opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Whispers ---- */
.cbh-whisper {
    position: absolute;
    max-width: 80vw;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(225, 205, 205, 0.85);
    text-shadow: 0 0 6px rgba(160, 0, 0, 0.8);
    opacity: 0;
    animation: cbh-whisper 6s ease-in-out forwards;
}

@keyframes cbh-whisper {
    0% { opacity: 0; transform: translateY(8px); }
    35%, 65% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* ---- Handprints on the glass ---- */
.cbh-hand {
    position: absolute;
    opacity: 0;
    transform: rotate(var(--tilt));
    animation: cbh-hand 8s ease-out forwards;
}

/* A pentagram is painted in, stroke by stroke, then blood runs from it (horror.js). It shows at
   once, and the painting does the appearing. */
.cbh-pentagram {
    animation-name: cbh-pentagram;
}

.cbh-paint {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cbh-paint 0.9s ease-in forwards;
}

.cbh-runs {
    transform-origin: 50% 70%;
    transform: scaleY(0);
    animation: cbh-runs 2.5s ease-in 1.3s forwards;
}

@keyframes cbh-paint {
    to { stroke-dashoffset: 0; }
}

@keyframes cbh-runs {
    to { transform: scaleY(1); }
}

@keyframes cbh-pentagram {
    0% { opacity: 0.9; transform: rotate(var(--tilt)); }
    60% { opacity: 0.8; }
    100% { opacity: 0; transform: rotate(var(--tilt)); }
}

/* The other apparitions (horror.js): eyes that glow, things rising out of the earth, a lid that
   creaks open. */
.cbh-glow-eye {
    animation: cbh-glow 1.6s ease-in-out infinite;
}

.cbh-rise {
    transform-box: fill-box;
    transform: translateY(75%);
    animation: cbh-rise 1.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.cbh-lid {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: cbh-lid 2.4s ease-in-out 1s forwards;
}

@keyframes cbh-rise {
    to { transform: none; }
}

@keyframes cbh-lid {
    0% { transform: none; }
    30% { transform: rotate(-3deg); }
    40% { transform: rotate(-2deg); }
    100% { transform: rotate(-11deg) translateX(-3px); }
}

@keyframes cbh-hand {
    0% { opacity: 0; transform: rotate(var(--tilt)) scale(1.06); }
    4% { opacity: 0.9; transform: rotate(var(--tilt)) scale(1); }
    55% { opacity: 0.75; }
    100% { opacity: 0; transform: rotate(var(--tilt)) scale(1); }
}

/* ---- The calm theme (data-horror="calm"; ThemePreference.HorrorCalm) ----
   The same look without the moving parts: drips hang still, nothing falls, the red edge glows
   without beating, the bird on the loading screen keeps still, and only half the drips show.
   With the notes in full screen nothing of it shows at all. */
:root[data-horror="calm"] .cbh-drip,
:root[data-horror="calm"] .cbh-overlay::before,
:root[data-horror="calm"] .cb-loader-horror .cbh-splash-bird {
    animation: none;
}

:root[data-horror="calm"] .cbh-drop,
:root[data-horror="calm"] .cbh-night-only,
:root[data-horror="calm"]:has(.smv-overlay) .cbh-overlay {
    display: none;
}

/* Reduced motion: the still decorations stay; nothing moves or jumps (horror.js skips the
   creatures and scares). */
@media (prefers-reduced-motion: reduce) {
    .cbh-drip,
    .cbh-drop,
    .cbh-eye-glow,
    .cb-loader-horror .cbh-splash-bird,
    .cbh-overlay::before {
        animation: none;
    }

    .cbh-drop {
        display: none;
    }
}

/* ---- The invitation to switch the theme on (SeasonInviteBanner), shown before it is on: pitch
   black and blood red, with the theme's font ---- */
.season-invite-horror {
    background: linear-gradient(180deg, #000, #1a0000) !important;
    color: #e8e2dc !important;
    border: 2px solid #8a0303 !important;
    box-shadow: 0 0 14px rgba(160, 0, 0, 0.5);
}

.season-invite-horror .season-invite-title {
    font-family: 'Creepster', var(--cb-font-family);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #ff2a2a;
    text-shadow: 0 0 6px rgba(160, 0, 0, 0.8);
}

.season-invite-horror .season-invite-yes {
    background: #8a0303;
    border-color: #b3060b;
    color: #f6efe8;
}

.season-invite-horror .season-invite-yes:hover {
    background: #b3060b;
}

.season-invite-horror .season-invite-no {
    color: #e8e2dc;
    border-color: #5a1d1d;
}