/* ------------------------------------------------------------------ Halloween week (Oct 31 – Nov 7): «ночь в проклятой
   библиотеке». Everything here applies only under html.hw, which theme.js sets during that week (and the pumpkin next
   to the site's name takes off again). The paper stays light and readable; the night is around it: sky, moon, fog,
   a graveyard, bats, a ghost; cobwebs and spiders on the paper, jack-o'-lanterns for the notebook rings, a tombstone
   for the bookend, a candle on every shelf. Decorations never take clicks (except the moon: bats). */

html.hw {
  --page: #0e0a17;
  --paper: #efe2c4;
  --paper-2: #f6ebd3;
  --ink: #2b1f1b;
  --ink-soft: #5a483f;
  --muted: #76655a;
  --accent: #a8390b;
  --accent-dark: #74250a;
  --line: #ccb48c;
  --frame: #2e1f36;
  --sq-cream: #f0e1c0;
  --sq-tan: #e5c99a;
  --sq-grey: #ddd0b8;
  --sq-sel: #ffc977;
  --shadow-tan: #4b2c5c;
  --hw-orange: #ff8a1f;
  --hw-bone: #e8dcc6;
}
html.hw, html.hw:has(.shelf-body) {
  background: #0e0a17 linear-gradient(180deg, #06040c 0%, #120b20 40%, #26143a 78%, #3d1b3c 100%) fixed;
}
html.hw body, html.hw .shelf-body { background: transparent; }
html.hw ::selection { background: var(--hw-orange); color: #1a0f0a; }

/* everything real sits above the night */
html.hw .topbar, html.hw main { position: relative; z-index: 1; }
/* (the header lets clicks through to the moon behind it; its links still take them) */
html.hw .topbar { pointer-events: none; }
html.hw .topbar a, html.hw .topbar button { pointer-events: auto; }

/* ------------------------------------------------------------------ the night: stars, moon, fog, graveyard */
.hw-layer { display: none; }
html.hw .hw-layer { display: block; }
.hw-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hw-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 80px, #f6e9ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 75px 160px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 210px 210px, #ffe9c4 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 260px 40px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 140px, #dcd0ff 50%, transparent 51%);
  background-size: 320px 260px;
  opacity: .75;
  animation: hw-twinkle 5s ease-in-out infinite alternate;
}
.hw-stars.b { background-size: 470px 390px; background-position: 130px 90px; opacity: .5; animation-duration: 7s; animation-delay: -3s; }
@keyframes hw-twinkle { from { opacity: .25; } to { opacity: .85; } }

.hw-moon {
  position: fixed; z-index: 0; top: 6px; left: 37%; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 38%, rgba(160, 150, 120, .45) 0 7%, transparent 8%),
    radial-gradient(circle at 62% 64%, rgba(160, 150, 120, .4) 0 10%, transparent 11%),
    radial-gradient(circle at 66% 30%, rgba(160, 150, 120, .35) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 40%, #fffbe6, #f3e2a8 60%, #d8c27e);
  box-shadow: 0 0 24px 6px rgba(255, 236, 170, .45), 0 0 90px 30px rgba(255, 210, 120, .14);
  animation: hw-moon 9s ease-in-out infinite;
}
.hw-moon:hover { box-shadow: 0 0 30px 10px rgba(255, 236, 170, .6), 0 0 110px 40px rgba(255, 190, 90, .22); }
.hw-moon:focus-visible { outline: 2px solid var(--hw-orange); outline-offset: 4px; }
@keyframes hw-moon { 50% { transform: translateY(3px); } }
@media (min-width: 1560px) {
  .hw-moon { top: 110px; left: auto; right: calc((100vw - 1240px) / 4 - 60px); width: 120px; height: 120px; }
}

.hw-fog {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 34vh;
  background:
    radial-gradient(ellipse 22% 60% at 20% 100%, rgba(210, 200, 240, .16), transparent 70%),
    radial-gradient(ellipse 30% 55% at 55% 100%, rgba(200, 190, 230, .13), transparent 70%),
    radial-gradient(ellipse 25% 65% at 85% 100%, rgba(220, 210, 245, .15), transparent 70%);
  animation: hw-fog 38s linear infinite alternate;
}
.hw-fog.b { bottom: -4vh; animation-duration: 52s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes hw-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.hw-grave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  background: url(graveyard.svg) left bottom / auto 100% repeat-x;
}
/* eyes in the dark: open, blink, gone, back (each pair on its own schedule) */
.hw-eyes { position: absolute; width: 22px; height: 7px; animation: hw-blink 11s infinite; }
.hw-eyes::before, .hw-eyes::after {
  content: ""; position: absolute; top: 0; width: 7px; height: 7px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(circle at 50% 60%, #fff7b0, #ffb300 55%, #ff6a00); box-shadow: 0 0 7px 1px rgba(255, 150, 0, .8);
}
.hw-eyes::before { left: 0; transform: rotate(12deg); }
.hw-eyes::after { right: 0; transform: rotate(-12deg); }
@keyframes hw-blink {
  0%, 30% { opacity: 0; transform: scaleY(1); }
  33%, 52%, 55%, 74% { opacity: 1; transform: scaleY(1); }
  53.5% { opacity: 1; transform: scaleY(.1); }
  77%, 100% { opacity: 0; }
}
/* lightning: the sky behind the page flashes now and then */
.hw-flash { position: absolute; inset: 0; background: #d8d4ff; opacity: 0; }
.hw-flash.go { animation: hw-flash .9s ease-out; }
@keyframes hw-flash { 0% { opacity: 0; } 6% { opacity: .55; } 14% { opacity: .05; } 22% { opacity: .4; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ header: a burning, dripping name */
.hw-brandbox { display: flex; align-items: center; gap: 14px; }
html.hw .brand {
  position: relative; display: inline-block; color: var(--hw-orange);
  text-shadow: 0 0 6px rgba(255, 138, 31, .75), 0 0 20px rgba(255, 80, 0, .45);
  animation: hw-flicker 7s infinite;
}
html.hw .brand::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 100%; margin-top: -3px; height: 14px;
  background: url(drips.svg) left top / 200px 100% repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 120, 0, .6));
}
@keyframes hw-flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .55; }
}
html.hw .topnav a { color: var(--hw-bone); }
html.hw .topnav a:hover { color: var(--hw-orange); }
html.hw .topnav a[aria-current=page] { color: var(--hw-orange); border-bottom-color: var(--hw-orange); text-shadow: 0 0 10px rgba(255, 120, 0, .6); }

/* the switch: a lit pumpkin while it's on; an unlit one to bring it back */
.hw-toggle {
  flex: none; width: 30px; height: 28px; padding: 0; border: 0; cursor: pointer;
  background: url(pumpkin.svg) center / contain no-repeat;
  filter: grayscale(1) brightness(.75) opacity(.55);
  transition: transform .15s;
}
html.hw .hw-toggle { filter: drop-shadow(0 0 6px rgba(255, 160, 40, .8)); }
.hw-toggle:hover { transform: scale(1.15) rotate(-8deg); }
.hw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ paper: aged, scorched at the edges */
html.hw .notebook {
  background: radial-gradient(ellipse at 50% 40%, transparent 58%, rgba(96, 52, 18, .2) 100%), #e7d6b4;
  border-color: #6d4f35;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), 0 0 70px rgba(255, 110, 20, .1);
}
html.hw .board { position: relative; box-shadow: 0 0 0 1px #6d4f35, 0 24px 60px -16px rgba(0, 0, 0, .9), 0 0 70px rgba(255, 110, 20, .1); }
html.hw .results { position: relative; border-color: var(--frame); box-shadow: 0 0 0 1px #6d4f35, 0 24px 60px -16px rgba(0, 0, 0, .9); }
html.hw .modal { background: #f2e5c8; }
html.hw .modal::backdrop { background: rgba(8, 4, 18, .72); }
html.hw .tip { background: #f7ecd4; }
html.hw .foot, html.hw .foot a { color: #a99bbd; }

/* cobwebs in the corners */
html.hw .notebook::before, html.hw .board::before, html.hw .results::before,
html.hw .notebook::after, html.hw .board::after {
  content: ""; position: absolute; width: 130px; height: 130px; pointer-events: none; z-index: 4;
  background: url(web.svg) center / contain no-repeat;
}
html.hw .notebook::before, html.hw .board::before, html.hw .results::before { top: 0; right: 0; }
html.hw .notebook::after, html.hw .board::after { bottom: 0; left: 0; transform: rotate(180deg); width: 100px; height: 100px; }
html.hw .board::before { width: 96px; height: 96px; }
html.hw .board::after { width: 80px; height: 80px; }

/* a spider on its thread, going up and down */
.hw-spider { position: absolute; top: 0; right: 16%; width: 1px; height: 0; z-index: 5; pointer-events: none; }
.hw-spider::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100px; transform-origin: top;
  background: rgba(70, 58, 48, .65); animation: hw-thread 9s ease-in-out var(--hw-delay, 0s) infinite;
}
.hw-spider i {
  position: absolute; left: -13px; top: -4px; width: 27px; height: 30px;
  background: url(spider.svg) center / contain no-repeat; animation: hw-drop 9s ease-in-out var(--hw-delay, 0s) infinite;
}
@keyframes hw-thread { 0%, 100% { transform: scaleY(.35); } 45%, 55% { transform: scaleY(1.3); } }
@keyframes hw-drop { 0%, 100% { transform: translateY(35px); } 45%, 55% { transform: translateY(130px) rotate(4deg); } 50% { transform: translateY(126px) rotate(-6deg); } }

/* ------------------------------------------------------------------ notebook pages: jack-o'-lantern rings, a mummy's bandage */
html.hw .rings i {
  width: 36px; height: 33px; margin-left: -3px; border: 0; border-radius: 0;
  background: url(pumpkin.svg) center / contain no-repeat;
  animation: hw-lantern 2.6s ease-in-out infinite;
}
html.hw .rings i:nth-child(2) { animation-delay: -.7s; }
html.hw .rings i:nth-child(3) { animation-delay: -1.9s; }
html.hw .rings i:nth-child(4) { animation-delay: -.3s; }
html.hw .rings i:nth-child(5) { animation-delay: -1.3s; }
html.hw .rings i:nth-child(6) { animation-delay: -2.2s; }
html.hw .rings i::after { left: 30px; top: 16px; width: 22px; background: #3a2a1e; box-shadow: none; }
@keyframes hw-lantern {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 170, 50, .55)); }
  40% { filter: drop-shadow(0 0 10px rgba(255, 150, 30, .95)); }
  55% { filter: drop-shadow(0 0 5px rgba(255, 170, 50, .6)); }
  70% { filter: drop-shadow(0 0 12px rgba(255, 140, 20, .9)); }
}
html.hw .tape {
  width: 150px; height: 26px;
  background: repeating-linear-gradient(-6deg, #f1ebdc 0 5px, #d6ccb6 5px 6px, #f6f1e6 6px 11px, #e3dac6 11px 12px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

/* buttons */
html.hw .card-btn { background: #fbefd5; border-color: var(--accent); color: var(--accent-dark); box-shadow: 3px 3px 0 var(--shadow-tan); }
html.hw .card-btn:hover { background: #fff6e2; }
html.hw .btn:hover { box-shadow: 8px 8px 0 var(--shadow-tan), 0 0 22px rgba(255, 120, 20, .55); }

/* ------------------------------------------------------------------ the shelf: a candle on each plank, a tombstone bookend,
   books that twitch when touched */
html.hw .shelf-row .plank { background: linear-gradient(#4e3426 0 5px, #3e281d 5px 100%); }
html.hw .shelf-row .plank::before {
  content: ""; position: absolute; left: 4px; bottom: 100%; width: 14px; height: 46px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #d9cfb4, #fffaf0 40%, #cfc2a2);
  box-shadow: inset 0 3px 0 #fffdf6, 3px 0 0 -1px #e9e0c8;
}
html.hw .shelf-row .plank::after {
  content: ""; position: absolute; left: 6px; bottom: calc(100% + 45px); width: 10px; height: 19px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 72%, #fffbe0 0 22%, #ffc23a 42%, #ff6a00 66%, transparent 72%);
  box-shadow: 0 0 22px 10px rgba(255, 170, 60, .3);
  transform-origin: 50% 100%; animation: hw-flame 1.6s ease-in-out infinite;
}
@keyframes hw-flame {
  0%, 100% { transform: scale(1, 1) rotate(-2deg); }
  25% { transform: scale(.92, 1.08) rotate(3deg); }
  50% { transform: scale(1.05, .94) rotate(-1deg); }
  75% { transform: scale(.96, 1.1) rotate(2deg); }
}
html.hw .shelf-row .books { padding-left: 32px; }
html.hw .bookend {
  background: radial-gradient(circle at 70% 85%, rgba(70, 110, 50, .7) 0 14%, transparent 15%), linear-gradient(#9b97a2, #6d6974);
  border-color: #4e4a55; color: #e2dee8; text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  box-shadow: 2px 6px 8px -3px rgba(0, 0, 0, .6);
}
html.hw .spine:hover { animation: hw-twitch .32s ease-in-out 2; }
@keyframes hw-twitch {
  25% { rotate: calc(var(--tilt, 0deg) - 3deg); }
  75% { rotate: calc(var(--tilt, 0deg) + 3deg); }
}
html.hw .under, html.hw .hint { color: var(--accent); }

/* ------------------------------------------------------------------ the board: horror glows; the dice burn */
html.hw .sq.hw-horror:not(.on) { animation: hw-horror 2.8s ease-in-out infinite; color: #1f3a12; }
@keyframes hw-horror {
  0%, 100% { background: #d4f2b8; box-shadow: inset 0 0 10px rgba(80, 200, 40, .5); }
  50% { background: #bdeb98; box-shadow: inset 0 0 22px rgba(60, 220, 20, .8); }
}
html.hw .die { background: #f6ecd6; border-color: #5b3d63; box-shadow: 4px 4px 0 var(--shadow-tan); }
html.hw .die i.on { background: radial-gradient(circle at 45% 40%, #ffe08a, #ff7a10 55%, #b33a00); box-shadow: 0 0 6px rgba(255, 120, 0, .8); }
html.hw .reading li.now { background: rgba(255, 170, 70, .28); }

/* ------------------------------------------------------------------ fliers: bats and a ghost (theme.js moves them) */
.hw-bat, .hw-ghost { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; }
.hw-bat i { display: block; width: 100%; height: 100%; background: url(bat.svg) center / contain no-repeat; animation: hw-flap .16s ease-in-out infinite alternate; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.35) translateY(10%); } }
.hw-ghost { width: 74px; height: 92px; background: url(ghost.svg) center / contain no-repeat; filter: drop-shadow(0 0 14px rgba(220, 210, 255, .7)); }

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .hw-moon { left: auto; right: 16px; top: 8px; width: 40px; height: 40px; }
  .hw-grave { height: 110px; }
  html.hw .rings { display: none; }
  html.hw .notebook::after, html.hw .board::before, html.hw .board::after { display: none; } /* (the board's would cover «Сбросить») */
  html.hw .notebook::before, html.hw .results::before { width: 80px; height: 80px; }
}

/* no motion for those who asked for none (theme.js sends no fliers then either) */
@media (prefers-reduced-motion: reduce) {
  html.hw *, html.hw *::before, html.hw *::after { animation: none !important; }
}