:root {
  --blood: #8b1518;
  --fog: #c9c2b0;
  --ink: #070706;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--fog);
  font-family: "Palatino Linotype", Palatino, "Times New Roman", serif;
  cursor: crosshair;
  user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.55) 78%, #000 100%);
}

#grain {
  pointer-events: none;
  position: fixed;
  inset: -20%;
  z-index: 3;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: repeating-radial-gradient(
      circle at 20% 30%,
      #fff 0 0.5px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 2px);
  animation: grain 0.18s steps(2) infinite;
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-2%, 1%);
  }
}

#hurt {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle, transparent 30%, rgba(120, 0, 0, 0.75));
  opacity: 0;
  transition: opacity 0.2s ease;
}

#hurt.on {
  opacity: 1;
}

#screamer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: center;
  background: #000;
}

#screamer.on {
  display: grid;
  animation: scream-shake 0.12s steps(2) infinite;
}

.scream-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: scream-flash 0.7s ease forwards;
}

.scream-face {
  position: relative;
  width: min(72vw, 520px);
  height: min(86vh, 640px);
  border-radius: 46% 46% 42% 42%;
  background: radial-gradient(circle at 50% 38%, #d8d0c4 0%, #8a8074 55%, #1a1210 100%);
  box-shadow: inset 0 -40px 50px #000, 0 0 80px #400;
}

.scream-eye {
  position: absolute;
  top: 28%;
  width: 18%;
  height: 22%;
  background: radial-gradient(circle at 50% 60%, #ff2a22 0 18%, #000 19%);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 24px #f00;
}

.scream-eye.left {
  left: 16%;
  transform: rotate(-12deg);
}

.scream-eye.right {
  right: 16%;
  transform: rotate(12deg);
}

.scream-mouth {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 58%;
  height: 28%;
  background: radial-gradient(circle at 50% 0%, #2a0000 0%, #000 70%);
  border-radius: 10% 10% 50% 50%;
  box-shadow: inset 0 18px 0 #111, 0 0 30px #500;
}

@keyframes scream-shake {
  0% {
    transform: translate(-8px, 4px) scale(1.08);
  }
  100% {
    transform: translate(9px, -5px) scale(1.14);
  }
}

@keyframes scream-flash {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 0;
  }
  28% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

#screamer-boss {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 42;
  display: none;
  place-items: center;
  background: #090000;
}

#screamer-boss.on {
  display: grid;
  animation: boss-scream-shake 0.08s steps(2) infinite;
}

.boss-flash {
  position: absolute;
  inset: 0;
  background: #7a0000;
  animation: boss-flash 1.15s ease forwards;
}

.boss-skull {
  position: relative;
  width: min(92vw, 780px);
  height: min(96vh, 860px);
  border-radius: 48% 48% 36% 36%;
  background:
    radial-gradient(circle at 50% 30%, #e8dcc8 0%, #9a8a72 42%, #2a1a14 78%, #000 100%);
  box-shadow: inset 0 -80px 70px #000, 0 0 120px #800, 0 0 40px #f00;
}

.boss-horn {
  position: absolute;
  background: linear-gradient(180deg, #1a0a08, #000);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.boss-horn.left {
  left: 4%;
  top: -18%;
  width: 22%;
  height: 38%;
  transform: rotate(-28deg);
}

.boss-horn.right {
  right: 2%;
  top: -12%;
  width: 16%;
  height: 28%;
  transform: rotate(38deg);
}

.boss-horn.mid {
  left: 42%;
  top: -14%;
  width: 12%;
  height: 22%;
  transform: rotate(-8deg);
}

.boss-socket {
  position: absolute;
  top: 24%;
  background: #000;
  border-radius: 46% 46% 38% 38%;
  box-shadow: inset 0 0 24px #200, 0 0 30px #500;
}

.boss-socket.left {
  left: 12%;
  width: 28%;
  height: 26%;
  transform: rotate(-18deg);
}

.boss-socket.right {
  right: 10%;
  width: 18%;
  height: 30%;
  top: 22%;
  transform: rotate(22deg);
}

.boss-socket i {
  position: absolute;
  left: 38%;
  top: 48%;
  width: 22%;
  height: 18%;
  border-radius: 50%;
  background: #ff1408;
  box-shadow: 0 0 28px #f00, 0 0 8px #fff;
}

.boss-socket.right i {
  width: 14%;
  height: 12%;
  left: 42%;
  top: 56%;
}

.boss-nose {
  position: absolute;
  left: 46%;
  top: 48%;
  width: 8%;
  height: 12%;
  background: #000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.boss-jaw {
  position: absolute;
  left: 14%;
  right: 12%;
  top: 62%;
  height: 28%;
  background: radial-gradient(circle at 50% 0%, #1a0505 0%, #000 70%);
  border-radius: 8% 8% 48% 48%;
  box-shadow: inset 0 20px 0 #140000, 0 0 40px #600;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 6px;
  transform: rotate(4deg);
}

.boss-jaw span {
  width: 8%;
  height: 38%;
  background: #ddd2c0;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

@keyframes boss-scream-shake {
  0% {
    transform: translate(-14px, 8px) scale(1.16) rotate(-2deg);
  }
  100% {
    transform: translate(16px, -10px) scale(1.22) rotate(2deg);
  }
}

@keyframes boss-flash {
  0% {
    opacity: 1;
    background: #fff;
  }
  8% {
    opacity: 0.2;
    background: #900;
  }
  16% {
    opacity: 1;
    background: #fff;
  }
  28% {
    opacity: 0;
  }
  40% {
    opacity: 0.85;
    background: #600;
  }
  100% {
    opacity: 0;
  }
}

#screamer-angel {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 42;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #0c0a12;
}

#screamer-angel.on {
  display: grid;
  animation: angel-scream-shake 0.1s steps(2) infinite;
}

.angel-flash {
  position: absolute;
  inset: 0;
  background: #fff8e8;
  animation: angel-flash 1.2s ease forwards;
}

.angel-wing {
  position: absolute;
  top: 4%;
  width: 46%;
  height: 90%;
  background:
    radial-gradient(ellipse at 50% 18%, #fff 0%, #f7ead0 22%, transparent 58%),
    repeating-linear-gradient(200deg, #fff8 0 7px, transparent 7px 16px),
    repeating-linear-gradient(160deg, #ead9a866 0 5px, transparent 5px 14px);
  filter: drop-shadow(0 0 34px #ffe9b0);
  opacity: 0.96;
}

.angel-wing.left {
  left: -4%;
  clip-path: polygon(88% 4%, 100% 48%, 78% 96%, 18% 72%, 0 38%, 22% 8%);
  transform: rotate(8deg);
  animation: angel-wing-l 1.2s ease-out both;
}

.angel-wing.right {
  right: -4%;
  clip-path: polygon(12% 4%, 0 48%, 22% 96%, 82% 72%, 100% 38%, 78% 8%);
  transform: rotate(-8deg);
  animation: angel-wing-r 1.2s ease-out both;
}

.angel-face {
  position: relative;
  width: min(64vw, 520px);
  height: min(76vh, 660px);
  border-radius: 46% 46% 40% 40%;
  background:
    radial-gradient(circle at 32% 28%, #fff8 0 12%, transparent 28%),
    radial-gradient(circle at 50% 30%, #fffdf8 0%, #f0dcc4 42%, #c4a888 78%, #3a2a20 100%);
  box-shadow: inset 0 -46px 54px #2a1c14, 0 0 110px #ffe7a8, 0 0 42px #fff;
  z-index: 1;
}

.angel-halo {
  position: absolute;
  left: 16%;
  right: 16%;
  top: -18%;
  height: 30%;
  border: 8px solid #f0d48a;
  border-radius: 50%;
  box-shadow: 0 0 28px #ffe9a0, inset 0 0 18px #fff6;
  transform: rotate(-12deg);
}

.angel-crown {
  position: absolute;
  left: 22%;
  right: 22%;
  top: -10%;
  height: 16%;
  background: repeating-conic-gradient(from 0deg, #f6e2a0 0 8deg, transparent 8deg 30deg);
  mask: radial-gradient(circle at 50% 120%, transparent 52%, #000 53%);
  filter: drop-shadow(0 0 12px #ffe08a);
}

.angel-hair {
  position: absolute;
  left: 6%;
  right: 6%;
  top: -6%;
  height: 38%;
  border-radius: 50% 50% 18% 18%;
  background: radial-gradient(circle at 50% 20%, #fff6d8 0%, #e8d09a 55%, transparent 78%);
  opacity: 0.9;
  z-index: 0;
}

.angel-brow {
  position: absolute;
  top: 24%;
  width: 22%;
  height: 4%;
  border-radius: 40%;
  background: #c9a888;
  opacity: 0.7;
}

.angel-brow.left {
  left: 18%;
  transform: rotate(-12deg);
}

.angel-brow.right {
  right: 18%;
  transform: rotate(12deg);
}

.angel-ring {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -8%;
  height: 22%;
  border: 3px solid #fff8;
  border-radius: 50%;
  transform: rotate(12deg);
}

.angel-eye {
  position: absolute;
  top: 31%;
  width: 20%;
  height: 14%;
  background: radial-gradient(circle at 50% 58%, #f7e7a0 0 18%, #7a5a18 42%, #09080c 70%);
  border-radius: 46%;
  box-shadow: 0 0 18px #ffe9a8, inset 0 8px 10px #0006;
}

.angel-eye.left {
  left: 16%;
  transform: rotate(-6deg);
}

.angel-eye.right {
  right: 16%;
  transform: rotate(6deg);
}

.angel-eye i {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 26%;
  height: 34%;
  border-radius: 50%;
  background: #17120a;
  box-shadow: 0 0 10px #ffe9a0;
  transform: translate(-50%, -50%);
}

.angel-eye i::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 12%;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: #fff;
}

.angel-tear {
  position: absolute;
  top: 46%;
  width: 5%;
  height: 18%;
  background: linear-gradient(#fff, #c8b090);
  border-radius: 40% 40% 50% 50%;
  opacity: 0.85;
}

.angel-tear.left {
  left: 26%;
}

.angel-tear.right {
  right: 26%;
}

.angel-smile {
  position: absolute;
  left: 28%;
  right: 28%;
  top: 58%;
  height: 16%;
  background: radial-gradient(circle at 50% 0%, #3a2018 0%, #12080c 74%);
  border-radius: 0 0 48% 48%;
  box-shadow: inset 0 10px 0 #c47a78, 0 0 18px #fff4;
}

@keyframes angel-scream-shake {
  0% {
    transform: translate(-6px, 3px) scale(1.06) rotate(-1deg);
  }
  100% {
    transform: translate(7px, -4px) scale(1.12) rotate(1deg);
  }
}

@keyframes angel-flash {
  0% {
    opacity: 1;
    background: #fff;
  }
  10% {
    opacity: 0.15;
    background: #c8b070;
  }
  18% {
    opacity: 1;
    background: #fffaf0;
  }
  32% {
    opacity: 0;
  }
  48% {
    opacity: 0.7;
    background: #ffe9b0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes angel-wing-l {
  0% {
    transform: rotate(28deg) translateX(8%);
  }
  100% {
    transform: rotate(8deg) translateX(0);
  }
}

@keyframes angel-wing-r {
  0% {
    transform: rotate(-28deg) translateX(-8%);
  }
  100% {
    transform: rotate(-8deg) translateX(0);
  }
}

#pad {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: none;
}

#pad.show {
  display: block;
}

.pad-move {
  pointer-events: auto;
  position: absolute;
  left: 24px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pad-row {
  display: flex;
  gap: 6px;
}

.pad-actions {
  pointer-events: auto;
  position: absolute;
  right: 24px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.pad-key,
#fireBtn,
#weaponBtn {
  min-width: 56px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 223, 200, 0.7);
  background: rgba(20, 14, 12, 0.92);
  color: #efe6d0;
  letter-spacing: 0.12em;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  touch-action: none;
}

.pad-key:active,
#fireBtn:active,
#weaponBtn:active {
  background: var(--blood);
}

#hud {
  pointer-events: none;
  position: fixed;
  left: 28px;
  top: 22px;
  z-index: 5;
  text-shadow: 0 2px 16px #000, 0 0 18px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.18em;
}

#task {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 6px;
}

#count {
  font-size: 22px;
  color: #e8dfc8;
}

#count span,
#lives span,
#level span,
#weapon span,
#ammo span {
  color: #d44;
}

#level {
  font-size: 13px;
  margin-bottom: 4px;
  color: #e8dfc8;
  opacity: 0.9;
}

#lives,
#weapon,
#ammo {
  font-size: 16px;
  margin-top: 4px;
  color: #e8dfc8;
}

#ammo.empty span {
  color: #ff8866;
}

#hint {
  margin-top: 10px;
  font-size: 10px;
  opacity: 0.45;
  letter-spacing: 0.22em;
}

#crosshair {
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  transition: width 0.12s ease, height 0.12s ease, opacity 0.12s ease;
}

#crosshair.aiming {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.ch {
  position: absolute;
  background: #efe6d0;
  box-shadow: 0 0 6px #000;
}

.ch.h {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.ch.v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.ch.dot {
  width: 3px;
  height: 3px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(90, 30, 22, 0.35) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 40%, #1c1410 0%, #050403 78%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

#overlay.visible {
  display: grid;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}

.panel {
  width: min(540px, 90vw);
  text-align: center;
  padding: 40px 32px 44px;
  border: 1px solid rgba(232, 210, 160, 0.28);
  background: linear-gradient(180deg, rgba(22, 16, 12, 0.88), rgba(8, 6, 5, 0.9));
  box-shadow: 0 30px 90px #000, inset 0 0 40px rgba(80, 20, 16, 0.18);
}

.kicker {
  letter-spacing: 0.42em;
  font-size: 11px;
  color: var(--blood);
  margin-bottom: 14px;
}

h1 {
  font-weight: 400;
  font-size: clamp(42px, 8vw, 64px);
  letter-spacing: 0.08em;
  color: #efe6d0;
  margin-bottom: 18px;
}

.blurb {
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.78;
  margin-bottom: 22px;
}

.controls {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  margin-bottom: 28px;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  margin-right: 2px;
  border: 1px solid rgba(232, 223, 200, 0.35);
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
}

button {
  cursor: pointer;
  border: 1px solid #a33;
  background: transparent;
  color: #efe6d0;
  letter-spacing: 0.28em;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 13px;
}

button:hover {
  background: var(--blood);
  border-color: #c44;
}

#banner {
  pointer-events: none;
  position: fixed;
  top: 18%;
  left: 50%;
  z-index: 9;
  transform: translateX(-50%);
  text-align: center;
  letter-spacing: 0.28em;
  font-size: clamp(18px, 3vw, 28px);
  color: #efe6d0;
  text-shadow: 0 2px 18px #000;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#banner.show {
  opacity: 1;
}

#pauseBtn,
#grabBtn {
  display: none;
  position: fixed;
  top: 22px;
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
  letter-spacing: 0.22em;
  padding: 8px 14px;
  font-size: 11px;
}

#pauseBtn {
  right: 22px;
}

#grabBtn {
  right: 118px;
}

#pauseBtn.visible,
#grabBtn.visible {
  display: block;
}

body.locked {
  cursor: none;
}

#pauseOverlay {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: none;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(18, 12, 10, 0.88) 0%, rgba(5, 4, 3, 0.94) 75%);
  pointer-events: none;
}

#pauseOverlay.visible {
  display: grid;
  pointer-events: auto;
  cursor: default;
}

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

.actions button.locked,
.actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

#flash {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 6;
  background: radial-gradient(circle at 50% 58%, rgba(255, 230, 180, 0.35), transparent 38%);
  opacity: 0;
}

#bossIntro {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 24;
  display: none;
  place-items: center;
}

#bossIntro.on {
  display: grid;
}

.intro-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 40, 12, 0.45), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(20, 0, 0, 0.72), transparent 55%),
    linear-gradient(180deg, rgba(8, 0, 0, 0.35), transparent 40%, rgba(0, 0, 0, 0.55));
  animation: intro-veil 4.4s ease forwards;
}

.intro-bolts {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, transparent 48%, rgba(255, 230, 210, 0.95) 50%, transparent 52%),
    linear-gradient(78deg, transparent 62%, rgba(255, 80, 40, 0.7) 63.5%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: intro-bolts 4.4s steps(2) forwards;
}

.intro-title {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #f3e6d2;
  text-shadow: 0 0 28px #c00, 0 4px 24px #000;
  letter-spacing: 0.42em;
  opacity: 0;
  transform: scale(0.86) translateY(18px);
  animation: intro-title 4.4s ease forwards;
}

.intro-title p {
  font-size: clamp(12px, 2vw, 16px);
  opacity: 0.7;
  margin-bottom: 10px;
}

.intro-title h2 {
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 400;
}

@keyframes intro-veil {
  0% { opacity: 0; }
  8% { opacity: 1; }
  55% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes intro-bolts {
  0%, 12%, 18%, 40%, 100% { opacity: 0; }
  6%, 15%, 22% { opacity: 1; }
}

@keyframes intro-title {
  0%, 18% { opacity: 0; transform: scale(0.86) translateY(18px); }
  32% { opacity: 1; transform: scale(1.04) translateY(0); }
  72% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.08) translateY(-8px); }
}

#bossDeath {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 24;
  display: none;
  place-items: center;
}

#bossDeath.on {
  display: grid;
}

.death-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 210, 140, 0.55), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(80, 8, 0, 0.7), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 35%, #000 100%);
  animation: death-veil 5.2s ease forwards;
}

.death-bolts {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(88deg, transparent 46%, #fff 50%, transparent 54%),
    linear-gradient(118deg, transparent 58%, rgba(255, 90, 30, 0.85) 60%, transparent 63%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: death-bolts 5.2s steps(2) forwards;
}

.death-title {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff4dc;
  text-shadow: 0 0 36px #ff8020, 0 4px 28px #000;
  letter-spacing: 0.42em;
  opacity: 0;
  transform: scale(0.8);
  animation: death-title 5.2s ease forwards;
}

.death-title p {
  font-size: clamp(12px, 2vw, 16px);
  opacity: 0.75;
  margin-bottom: 10px;
}

.death-title h2 {
  font-size: clamp(30px, 6.5vw, 68px);
  font-weight: 400;
}

@keyframes death-veil {
  0% { opacity: 0; }
  6% { opacity: 1; }
  22% { opacity: 0.55; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes death-bolts {
  0%, 8%, 14%, 28%, 36%, 100% { opacity: 0; }
  4%, 11%, 18%, 32% { opacity: 1; }
}

@keyframes death-title {
  0%, 28% { opacity: 0; transform: scale(0.8) translateY(20px); }
  42% { opacity: 1; transform: scale(1.06) translateY(0); }
  78% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.1) translateY(-12px); }
}

#rite {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 23;
  display: none;
}

#rite.on {
  display: block;
}

#rite.dawn .rite-veil {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 196, 120, 0.28), transparent 46%),
    radial-gradient(circle at 50% 40%, transparent 18%, rgba(8, 10, 16, 0.42) 75%),
    linear-gradient(180deg, rgba(40, 28, 18, 0.25), transparent 32%, rgba(0, 0, 0, 0.55) 100%);
}

#rite.dawn .rite-copy {
  color: #fff4dc;
  text-shadow: 0 2px 24px #000, 0 0 22px rgba(255, 170, 70, 0.45);
}

.rite-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 20%, rgba(0, 0, 0, 0.55) 72%),
    linear-gradient(180deg, rgba(8, 10, 14, 0.45), transparent 28%, rgba(0, 0, 0, 0.5) 100%);
}

.rite-bars {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#050403 0 11%, transparent 11% 89%, #050403 89% 100%);
  opacity: 0.92;
}

.rite-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16%;
  text-align: center;
  color: #efe6d0;
  text-shadow: 0 2px 24px #000, 0 0 18px rgba(180, 140, 70, 0.35);
  letter-spacing: 0.28em;
}

.rite-copy p {
  font-size: clamp(11px, 1.6vw, 14px);
  opacity: 0.65;
  margin-bottom: 10px;
}

.rite-copy h2 {
  font-size: clamp(18px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1.35;
}

.rite-skip {
  margin-top: 18px !important;
  font-size: 11px !important;
  opacity: 0.35 !important;
  letter-spacing: 0.32em;
}