main > section[data-hell-level] { position: relative; }

.hell-level-marker {
  position: relative; z-index: 8; width: min(520px, calc(100% - 2rem));
  margin: 0 auto clamp(1.8rem, 4vw, 3.4rem); padding: 1.05rem 4rem;
  text-align: center; color: #d9a07c;
  background: linear-gradient(90deg, transparent, rgba(58,8,3,.82) 18%, rgba(21,3,1,.96) 50%, rgba(58,8,3,.82) 82%, transparent);
  border-block: 1px solid rgba(173,39,18,.52); text-transform: uppercase;
  letter-spacing: .18em; font: 800 .67rem Arial, sans-serif; transition: .7s ease;
}
.hell-level-marker::before, .hell-level-marker::after {
  content: ""; position: absolute; top: 50%; width: 32px; height: 32px;
  border: 1px solid #a82d18; transform: translateY(-50%) rotate(45deg);
  background: #100201; box-shadow: inset 0 0 14px #000, 0 0 12px rgba(255,51,12,.24);
}
.hell-level-marker::before { left: 14px; }
.hell-level-marker::after { right: 14px; }
.hell-level-marker strong {
  display: block; margin-bottom: .32rem; color: #ec4b25;
  font-family: Georgia, "Times New Roman", serif; font-size: .88rem;
  letter-spacing: .28em; text-shadow: 0 0 12px rgba(255,62,16,.5);
}
.hell-level-marker.is-visible { color: #f0c0a2; border-color: #dc4b28; box-shadow: 0 0 34px rgba(255,46,8,.14); }
.hell-level-marker.is-visible::before, .hell-level-marker.is-visible::after {
  border-color: #f06134; box-shadow: inset 0 0 14px #000, 0 0 20px rgba(255,62,16,.5);
}

/* Top anchoring avoids Firefox clipping caused by the tome's 3D reader height. */
.layer-demon {
  position: absolute; z-index: 2; top: clamp(6.5rem, 11vw, 10rem); bottom: auto;
  display: block; width: clamp(150px, 20vw, 320px); max-width: calc(50vw - 1rem);
  height: auto; object-fit: contain; pointer-events: none; user-select: none; opacity: .58;
  filter: saturate(.72) contrast(1.16) drop-shadow(0 0 24px rgba(255,46,8,.25));
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 35%, rgba(0,0,0,.92) 55%, transparent 82%);
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 35%, rgba(0,0,0,.92) 55%, transparent 82%);
  mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%;
}
.layer-demon-left { left: clamp(.25rem, 1.5vw, 1.5rem); }
.layer-demon-right { right: clamp(.25rem, 1.5vw, 1.5rem); transform: scaleX(-1); transform-origin: center; }

#about { margin-top: 0; }
#about .hell-level-marker { margin-top: -1rem; }

@media (max-width: 820px) {
  .hell-level-marker { padding-inline: 3.2rem; }
  .layer-demon { top: 6rem; width: clamp(112px, 22vw, 170px); max-width: 28vw; opacity: .3; }
  .layer-demon-left { left: .25rem; }
  .layer-demon-right { right: .25rem; }
}
@media (max-width: 560px) {
  .hell-level-marker { padding: .9rem 2.8rem; font-size: .58rem; }
  .hell-level-marker::before, .hell-level-marker::after { width: 24px; height: 24px; }
  .hell-level-marker::before { left: 10px; }
  .hell-level-marker::after { right: 10px; }
  .layer-demon { top: 5.5rem; width: 86px; max-width: 24vw; opacity: .2; }
}
@media (prefers-reduced-motion: reduce) { .hell-level-marker { transition: none; } }