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

body {
  background: #0a0508;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Times New Roman', serif;
}

.haunted-room {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    repeating-linear-gradient(90deg,
      #2a1a20 0px,
      #2a1a20 8px,
      #251518 8px,
      #251518 16px),
    linear-gradient(180deg, #2a1a20 0%, #1f1418 100%);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7);
}

.sconce {
  position: absolute;
  width: 40px;
  height: 50px;
  background: linear-gradient(180deg, #4a3020 0%, #2a1810 100%);
  border-radius: 5px;
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.8),
    inset 0 2px 5px rgba(139, 105, 20, 0.2);
  top: 50%;
  transform: translateY(-50%);
}

.sconce::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #4a3020;
}

.sconce-left {
  left: calc(50% - 240px);
}

.sconce-right {
  right: calc(50% - 240px);
}

.picture-frame {
  position: absolute;
  width: 120px;
  height: 150px;
  background:
    repeating-linear-gradient(45deg,
      #3d2415 0px,
      #3d2415 2px,
      #4a2c1a 2px,
      #4a2c1a 4px),
    linear-gradient(135deg, #4a2c1a 0%, #3d2415 50%, #2f1710 100%);
  border: 0;
  padding: 18px;
  box-shadow:
    0 0 0 3px #654d0f,
    0 0 0 6px rgba(139, 105, 20, 0.4),
    0 0 0 7px #2a1810,
    0 0 0 10px rgba(139, 105, 20, 0.2),
    0 20px 50px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    inset 0 3px 8px rgba(139, 105, 20, 0.3),
    inset 0 -3px 8px rgba(0, 0, 0, 0.6);
}

.picture-frame::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid rgba(139, 105, 20, 0.3);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(139, 105, 20, 0.2);
}

.frame-inner-detail {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 3px ridge rgba(139, 105, 20, 0.5);
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.7),
    inset 2px 2px 5px rgba(139, 105, 20, 0.2),
    inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

.frame-inner-detail::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(139, 105, 20, 0.15);
}

.frame-corner {
  position: absolute;
  width: 30px;
  height: 30px;
}

.corner-tl {
  top: 3px;
  left: 3px;
  background:
    radial-gradient(circle at 100% 100%, rgba(139, 105, 20, 0.6) 0%, rgba(139, 105, 20, 0.3) 40%, transparent 70%);
}

.corner-tr {
  top: 3px;
  right: 3px;
  background:
    radial-gradient(circle at 0% 100%, rgba(139, 105, 20, 0.6) 0%, rgba(139, 105, 20, 0.3) 40%, transparent 70%);
}

.corner-bl {
  bottom: 3px;
  left: 3px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 105, 20, 0.6) 0%, rgba(139, 105, 20, 0.3) 40%, transparent 70%);
}

.corner-br {
  bottom: 3px;
  right: 3px;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 105, 20, 0.6) 0%, rgba(139, 105, 20, 0.3) 40%, transparent 70%);
}

.portrait-canvas {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  bottom: 18px;
  background:
    radial-gradient(ellipse at 50% 30%, #2a2420 0%, #1a1410 40%, #0f0a08 100%);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.9),
    inset 0 5px 15px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.portrait-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px,
      rgba(80, 70, 60, 0.03) 1px,
      transparent 2px);
  opacity: 0.5;
}

.portrait-character {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  filter: grayscale(0.8) sepia(0.4) blur(0.5px);
  opacity: 0.7;
  text-shadow: 0 0 20px rgba(100, 100, 120, 0.4);
}

.portrait-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.frame-1 {
  top: 18vh;
  left: 18%;
  transform: rotate(-3deg);
}

.frame-3 {
  top: 22vh;
  right: 20%;
  transform: rotate(4deg);
}

.frame-5 {
  bottom: 18vh;
  left: 20%;
  width: 90px;
  height: 110px;
  transform: rotate(-4deg);
}

.frame-5 .portrait-character {
  font-size: 60px;
}

.wall-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 80vw);
  height: min(576px, 80vh);
  background:
    linear-gradient(135deg, #4a2c1a 0%, #3d1f14 50%, #2f1710 100%),
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 8px,
      rgba(0, 0, 0, 0.1) 8px,
      rgba(0, 0, 0, 0.1) 9px);
  background-blend-mode: normal, multiply;
  border-radius: 8px;
  box-shadow:
    0 0 0 2px #654d0f,
    0 0 0 4px rgba(139, 105, 20, 0.3),
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 2px 0 rgba(139, 105, 20, 0.2),
    inset 0 0 50px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(139, 105, 20, 0.1);
  animation: clock-presence 12s ease-in-out infinite;
  z-index: 10;
}

.wall-clock::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

.wall-clock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15px;
  right: 15px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 105, 20, 0.2) 50%, transparent 100%);
}

.pediment {
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  width: 384px;
  height: 132px;
  background: linear-gradient(135deg, #4a2c1a 0%, #3d1f14 50%, #2f1710 100%);
  border-radius: 15px 15px 0 0;
  box-shadow:
    0 0 0 2px #654d0f,
    0 15px 40px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(139, 105, 20, 0.2);
}

.pediment::before {
  content: '';
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 48px;
  background:
    radial-gradient(ellipse at center, rgba(139, 105, 20, 0.3) 0%);
  border-radius: 50% 50% 40% 40%;
  opacity: 0.6;
}

.pediment::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 336px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 105, 20, 0.4) 50%, transparent 100%);
}

.pediment-crown {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 84px;
  background: linear-gradient(180deg, #4a2c1a 0%, #3d1f14 100%);
  border-radius: 0;
  clip-path: polygon(50% 0%, 70% 20%, 85% 35%, 90% 50%, 85% 65%, 70% 80%, 50% 100%, 30% 80%, 15% 65%, 10% 50%, 15% 35%, 30% 20%);
  box-shadow:
    0 0 0 2px #654d0f,
    0 8px 20px rgba(0, 0, 0, 0.6);
}

.scroll-left,
.scroll-right {
  position: absolute;
  top: -18px;
  width: 48px;
  height: 120px;
  background: linear-gradient(180deg, #4a2c1a 0%, #3d1f14 100%);
  border-radius: 0;
}

.scroll-left {
  left: -12px;
}

.scroll-right {
  right: -12px;
}

.scroll-left::before,
.scroll-right::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, #3d1f14 0%, #2f1710 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #654d0f;
}

.columns {
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  height: 312px;
}

.column {
  position: absolute;
  width: 36px;
  background: linear-gradient(90deg, #4a2c1a 0%, #5d3521 30%, #4a2c1a 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(139, 105, 20, 0.2),
    inset -4px 0 8px rgba(0, 0, 0, 0.3);
}

.column::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 40%;
  background:
    repeating-linear-gradient(180deg,
      rgba(139, 105, 20, 0.15) 0px,
      rgba(139, 105, 20, 0.15) 3px,
      transparent 3px,
      transparent 8px);
}

.column-left {
  left: 24px;
  height: 100%;
}

.column-right {
  right: 24px;
  height: 100%;
}

.column-capital,
.column-base {
  position: absolute;
  width: 40px;
  height: 20px;
  background: linear-gradient(135deg, #5d3521 0%, #4a2c1a 100%);
  border-radius: 6px;
  left: -5px;
  box-shadow: 0 0 0 1px rgba(139, 105, 20, 0.3);
}

.column-capital {
  top: -12px;
}

.column-capital::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  background: linear-gradient(90deg, #5d3521 0%, #4a2c1a 50%, #5d3521 100%);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.column-base {
  bottom: -12px;
}

.column-base::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  background: linear-gradient(90deg, #5d3521 0%, #4a2c1a 50%, #5d3521 100%);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.clock-housing {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 216px;
  height: 216px;
  background: radial-gradient(circle at 30% 30%, #8b6914 0%, #654d0f 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(47, 23, 16, 0.8),
    0 0 0 10px rgba(139, 105, 20, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.6);
}

.clock-housing::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.4),
    inset 0 -5px 10px rgba(139, 105, 20, 0.3);
}

.clock-face {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 188px;
  height: 188px;
  background: radial-gradient(circle at 35% 35%, #f5f5dc 0%, #e6dbb7 70%, #d4c49a 100%);
  border-radius: 50%;
  box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.15);
}

.clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 168px;
  height: 168px;
  border: 1px solid rgba(139, 105, 20, 0.2);
  border-radius: 50%;
}

.clock-face::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 144px;
  height: 144px;
  border: 1px solid rgba(139, 105, 20, 0.1);
  border-radius: 50%;
}

.numbers {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  font-size: 22px;
  color: #2f1e15;
  z-index: 2;
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(139, 105, 20, 0.3);
}

.num-12 {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-72px) rotate(0deg);
}

.num-1 {
  transform: translate(-50%, -50%) rotate(30deg) translateY(-72px) rotate(-30deg);
}

.num-2 {
  transform: translate(-50%, -50%) rotate(60deg) translateY(-72px) rotate(-60deg);
}

.num-3 {
  transform: translate(-50%, -50%) rotate(90deg) translateY(-72px) rotate(-90deg);
}

.num-4 {
  transform: translate(-50%, -50%) rotate(120deg) translateY(-72px) rotate(-120deg);
}

.num-5 {
  transform: translate(-50%, -50%) rotate(150deg) translateY(-72px) rotate(-150deg);
}

.num-6 {
  transform: translate(-50%, -50%) rotate(180deg) translateY(-72px) rotate(-180deg);
}

.num-7 {
  transform: translate(-50%, -50%) rotate(210deg) translateY(-72px) rotate(-210deg);
}

.num-8 {
  transform: translate(-50%, -50%) rotate(240deg) translateY(-72px) rotate(-240deg);
}

.num-9 {
  transform: translate(-50%, -50%) rotate(270deg) translateY(-72px) rotate(-270deg);
}

.num-10 {
  transform: translate(-50%, -50%) rotate(300deg) translateY(-72px) rotate(-300deg);
}

.num-11 {
  transform: translate(-50%, -50%) rotate(330deg) translateY(-72px) rotate(-330deg);
}

.clock-hands {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hand {
  position: absolute;
  background: linear-gradient(180deg, #2f1e15 0%, #1a1008 100%);
  transform-origin: bottom center;
  border-radius: 1px;
}

.hour-hand {
  width: 5px;
  height: 54px;
  top: -54px;
  left: -2.5px;
  border-radius: 2.5px 2.5px 0 0;
}

.minute-hand {
  width: 4px;
  height: 72px;
  top: -72px;
  left: -2px;
  border-radius: 2px 2px 0 0;
}

.second-hand {
  width: 1.5px;
  height: 78px;
  background: #8b0000;
  top: -78px;
  left: -0.75px;
}

.center-hub {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #8b6914 0%, #2f1e15 100%);
  border-radius: 50%;
  top: -5px;
  left: -5px;
  box-shadow:
    0 0 0 2px rgba(139, 105, 20, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(218, 165, 32, 0.4);
}

.center-hub::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 30% 30%, rgba(218, 165, 32, 0.8) 0%, rgba(139, 105, 20, 0.4) 100%);
  border-radius: 50%;
}

.lower-case {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 186px;
  background: linear-gradient(135deg, #4a2c1a 0%, #3d1f14 50%, #2f1710 100%);
  border-radius: 0 0 8px 8px;
}

.lower-case::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 312px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 105, 20, 0.4) 50%, transparent 100%);
}

.lower-case::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 24px;
  background:
    radial-gradient(ellipse at center, rgba(139, 105, 20, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.pendulum-window {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 156px;
  height: 132px;
  background: rgba(0, 0, 0, 0.6);
  border: 3px solid #654d0f;
  border-radius: 4px;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    inset 0 2px 5px rgba(139, 105, 20, 0.1);
}

.pendulum-window::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid rgba(139, 105, 20, 0.3);
  border-radius: 5px;
}

.pendulum-window::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 105, 20, 0.2) 50%, transparent 100%);
}

.pendulum-assembly {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 132px;
}

.pendulum {
  position: absolute;
  top: 22px;
  left: 50%;
  transform-origin: top center;
  animation: pendulum-swing 2s ease-in-out infinite alternate;
}

.pendulum-rod {
  width: 2.5px;
  height: 78px;
  background: linear-gradient(180deg, #8b6914 0%, #654d0f 100%);
  margin-left: -1.25px;
}

.pendulum-bob {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  background: radial-gradient(circle at 30% 30%, #daa520 0%, #8b6914 100%);
  border-radius: 50%;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.6),
    inset 0 0 10px rgba(218, 165, 32, 0.4),
    inset -2px -2px 5px rgba(0, 0, 0, 0.3);
}

.pendulum-bob::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(139, 105, 20, 0.4);
  border-radius: 50%;
}

.pendulum-bob::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 200, 0.6) 0%, transparent 70%);
  border-radius: 50%;
}

.candle {
  position: absolute;
  width: 18px;
  height: 140px;
  background: linear-gradient(180deg, #8b7355 0%, #6b5940 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
  top: 50%;
  transform: translateY(-50%);
}

.candle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #4a3830;
  border-radius: 50%;
}

.flame {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 15px;
  background:
    radial-gradient(ellipse at bottom, #ff6b00 0%, #ff9500 30%, #ffaa00 60%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 1.5s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

.candle-left {
  left: calc(50% - 240px);
}

.candle-right {
  right: calc(50% - 240px);
}

.ghost {
  position: absolute;
  font-size: 300px;
  color: rgba(200, 220, 255, 0.3);
  text-shadow: 0 0 80px rgba(200, 220, 255, 0.5);
  z-index: 10;
  bottom: 15vh;
  left: 60%;
  animation: ghost-float 6s ease-in-out infinite;
}

@keyframes pendulum-swing {
  0% {
    transform: translateX(-50%) rotate(-8deg);
  }

  100% {
    transform: translateX(-50%) rotate(8deg);
  }
}

@keyframes flicker {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translateX(-50%) scale(1.1) rotate(2deg);
    opacity: 1;
  }
}

@keyframes ghost-float {
  0% {
    transform: translateX(-50%) translate(0, 0) scale(1) rotate(0deg);
    opacity: 0;
  }

  25% {
    transform: translateX(-50%) translate(-20px, -25px) scale(1.2) rotate(-8deg);
    opacity: 0.5;
  }

  50% {
    transform: translateX(-50%) translate(20px, -45px) scale(1.5) rotate(10deg);
    opacity: 1;
  }

  75% {
    transform: translateX(-50%) translate(-15px, -30px) scale(1.3) rotate(-5deg);
    opacity: 0.6;
  }

  90% {
    transform: translateX(-50%) translate(0, -10px) scale(1.1) rotate(0deg);
    opacity: 0.3;
  }

  100% {
    transform: translateX(-50%) translate(0, 0) scale(1) rotate(0deg);
    opacity: 0;
  }
}