/* the hell scape's look. Loaded after style.css; everything is scoped to .view-hellscape, .hx-* or html[data-view="hellscape"]
   (the main app sets document.documentElement.dataset.view), so it changes nothing on any other page.
   Decoration is built by hell.js (XMHell.enter) and is all pointer-events: none. Animations are transform/opacity only. */

/* ---------- page-wide, hell scape only: a dark header + footer instead of the cute pink ones ---------- */
html[data-view="hellscape"] body { background-color: #090101; background-image: none; display: flex; flex-direction: column; }   /* column: a short page pushes the footer to the bottom, so no fire shows below it */
html[data-view="hellscape"] main { flex: 1 0 auto; }
html[data-view="hellscape"] .top { background: rgba(16, 3, 3, .92); border-bottom-color: #6b1608; box-shadow: 0 6px 24px rgba(0, 0, 0, .65); }
html[data-view="hellscape"] .logo, html[data-view="hellscape"] .logo span { color: #ffe9d6; }
html[data-view="hellscape"] .logo i { color: #ff4a1c; }
html[data-view="hellscape"] .tabs a, html[data-view="hellscape"] .hdr-btn, html[data-view="hellscape"] .theme-toggle {
  background: #1d0706; color: #ffd2b8; border-color: #6b1608; box-shadow: 2px 2px 0 #000;
}
html[data-view="hellscape"] .tabs a:not([aria-current]):hover, html[data-view="hellscape"] .hdr-btn:hover, html[data-view="hellscape"] .theme-toggle:hover {
  background: #3a0e08; color: #fff; box-shadow: 3px 3px 0 #000;
}
html[data-view="hellscape"] .tabs a[aria-current="page"] { background: #b3200c; color: #fff; border-color: #ff5a2a; }
html[data-view="hellscape"] footer { background: #0b0202; color: #cfa99b; border-top: 3px solid #5a1207; }
html[data-view="hellscape"] footer a { color: #ff8a5c; }
html[data-view="hellscape"] footer a:hover { color: #ffc2a0; }

/* ---------- the section ---------- */
.view-hellscape { color: #ffe9d6; }
.view-hellscape.hx-on > .hell-sky { display: none; }                       /* the old emoji-fire sky */
.view-hellscape .view-head p { color: #ffd2b8; text-shadow: 0 1px 2px #000; position: relative; z-index: 1; }
.view-hellscape .hell-rule {
  background: rgba(12, 2, 2, .66); border-left: 3px solid #a3200c; padding: 10px 14px; border-radius: 0 10px 10px 0; color: #ffdcc8;
}
.view-hellscape .chip { background: #1d0706; color: #ffd2b8; border-color: #6b1608; }
.view-hellscape a.chip { color: #ffd2b8; }
.view-hellscape .chip:not([aria-pressed="true"]):hover { background: #3a0e08; color: #fff; }
.view-hellscape .chip[aria-current="page"], .view-hellscape a.chip[aria-current="page"] { background: #b3200c; color: #fff; border-color: #ff5a2a; }

/* ---------- the title: blood red, glitching now and then, dripping when gore is on ---------- */
.view-hellscape .view-head h1.h-display {
  position: relative; color: #ff3b1f; -webkit-text-stroke: 2px #1a0000; font-variant-emoji: text;
  text-shadow: 0 3px 0 #5a0000, 0 8px 12px rgba(120, 0, 0, .85), 0 0 26px rgba(255, 60, 20, .28);
}
.hx-title::before, .hx-title::after {
  content: attr(data-text) / ""; position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0;
  -webkit-text-stroke: 0; text-shadow: none;
}
.hx-title::before { color: #ff9a4a; animation: hx-gl-a 6.5s steps(1) infinite; }
.hx-title::after { color: #7a0000; animation: hx-gl-b 6.5s steps(1) infinite .12s; }
@keyframes hx-gl-a {
  0%, 93%, 100% { opacity: 0; transform: none; }
  94% { opacity: .7; transform: translate(-4px, 1px); clip-path: inset(8% 0 62% 0); }
  96% { opacity: .55; transform: translate(3px, -1px); clip-path: inset(54% 0 14% 0); }
  98% { opacity: .6; transform: translate(-2px, 0); clip-path: inset(30% 0 40% 0); }
}
@keyframes hx-gl-b {
  0%, 93%, 100% { opacity: 0; transform: none; }
  94% { opacity: .65; transform: translate(4px, 0); clip-path: inset(40% 0 30% 0); }
  96% { opacity: .5; transform: translate(-3px, 1px); clip-path: inset(12% 0 60% 0); }
  98% { opacity: .55; transform: translate(2px, 0); clip-path: inset(62% 0 8% 0); }
}
.hx-drip {
  display: none; position: absolute; top: 74%; width: 5px; height: var(--len, 30px); margin-left: -2px; z-index: 0;
  background: linear-gradient(#6a0000, #b00a0a 80%); border-radius: 0 0 3px 3px; -webkit-text-stroke: 0;
  transform-origin: 50% 0; transform: scaleY(.25); animation: hx-drip var(--dur, 20s) ease-in-out var(--del, 0s) infinite alternate;
}
.hx-drip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 10px; margin-left: -4.5px; background: #b00a0a; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
.hx-gore .hx-drip { display: block; }
@keyframes hx-drip { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---------- the layers ---------- */
.hx-back, .hx-front { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: layout paint; }
.hx-back { z-index: -1; }
.hx-front { z-index: 25; }
.hx-back *, .hx-front * { pointer-events: none; }

.hx-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 38% at 50% 104%, rgba(255, 170, 60, .34), transparent 70%),
    linear-gradient(#040000 0%, #110202 28%, #250503 56%, #3f0a05 80%, #5c1105 100%);
}
.hx-glow {
  position: absolute; left: -10%; right: -10%; bottom: -10%; height: 78%;
  background: radial-gradient(ellipse 62% 62% at 50% 100%, rgba(255, 110, 25, .5), rgba(210, 45, 10, .26) 42%, transparent 74%);
  animation: hx-glow 3.1s ease-in-out infinite alternate;
}
@keyframes hx-glow { from { opacity: .62; } to { opacity: 1; } }

.hx-fog { position: absolute; left: 0; width: calc(100% + 1024px); background-repeat: repeat-x; background-size: 1024px 100%; will-change: transform; }
.hx-fog-b { bottom: 18vh; height: 54vh; background-image: url(/fx/hell/fog-b.webp); opacity: .5; animation: hx-drift 150s linear infinite reverse; }
.hx-fog-a { bottom: 0; height: 44vh; background-image: url(/fx/hell/fog-a.webp); opacity: .55; animation: hx-drift 100s linear infinite; }
@keyframes hx-drift { from { transform: translateX(0); } to { transform: translateX(-1024px); } }

.hx-pillar {
  display: none; position: absolute; bottom: 0; width: clamp(90px, 11vw, 190px); height: 78vh; opacity: .5;
  background: url(/fx/fire-tall.webp) no-repeat 50% 100% / contain; transform-origin: 50% 100%; will-change: transform;
}
.hx-pl { left: -2vw; animation: hx-lick-p 2.4s ease-in-out infinite alternate; }
.hx-pr { right: -2vw; animation: hx-lick-pr 2.9s ease-in-out infinite alternate; }
@keyframes hx-lick-p { from { transform: scaleY(1) skewX(0); } to { transform: scaleY(1.08) skewX(-1.2deg); } }
@keyframes hx-lick-pr { from { transform: scale(-1, 1) skewX(0); } to { transform: scale(-1, 1.08) skewX(-1.2deg); } }

.hx-fire { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(170px, 40vh, 460px); }
.hx-fire i { position: absolute; inset: 0 -6%; background-repeat: repeat-x; background-position: 50% 100%; transform-origin: 50% 100%; will-change: transform, opacity; }
.hx-fglow { inset: -35% -6% 0; background-image: url(/fx/hell/fire-glow.webp); background-size: auto 100%; opacity: .9; animation: hx-fglow 2.2s ease-in-out infinite alternate; }
.hx-f1 { background-image: url(/fx/fire-wide.webp); background-size: auto 100%; animation: hx-lick-a 1.9s ease-in-out infinite alternate; }
.hx-f2 { background-image: url(/fx/fire-wide.webp); background-size: auto 80%; background-position: 20% 100%; opacity: .9; transform: scale(-1, 1); animation: hx-lick-b 2.7s ease-in-out infinite alternate; }
.hx-f3 { background-image: url(/fx/fire-wide.webp); background-size: auto 58%; background-position: 70% 100%; opacity: .8; animation: hx-lick-c 1.3s ease-in-out infinite alternate; }
@keyframes hx-fglow { from { opacity: .7; transform: scale(1, 1); } to { opacity: 1; transform: scale(1.02, 1.06); } }
@keyframes hx-lick-a {
  0% { transform: scale(1, 1) skewX(0); opacity: .96; }
  35% { transform: scale(1.01, 1.08) skewX(-.8deg); }
  70% { transform: scale(.995, 1.03) skewX(.7deg); opacity: 1; }
  100% { transform: scale(1.01, 1.11) skewX(-.4deg); opacity: .9; }
}
@keyframes hx-lick-b {
  0% { transform: scale(-1, 1) skewX(0); }
  40% { transform: scale(-1.01, 1.1) skewX(.9deg); }
  100% { transform: scale(-1, 1.04) skewX(-.6deg); }
}
@keyframes hx-lick-c {
  0% { transform: scale(1, .96) skewX(.5deg); opacity: .7; }
  100% { transform: scale(1.02, 1.12) skewX(-.9deg); opacity: .9; }
}

/* the hands: they come up out of the fire, very slowly, over about three minutes */
.hx-hand {
  position: absolute; bottom: 0; width: clamp(80px, 9vw, 150px); aspect-ratio: 305 / 820; opacity: .92; will-change: transform;
  background: url(/fx/demon-hand.webp) no-repeat 50% 100% / contain; --sx: 1;
  transform: translateY(var(--y1)) rotate(var(--r1)) scaleX(var(--sx));
  animation: hx-creep 170s linear infinite alternate;
}
.hx-hl { left: -1vw; --y0: 64%; --y1: 22%; --r0: -7deg; --r1: 3deg; }
.hx-hr { right: -1vw; --y0: 70%; --y1: 30%; --r0: 8deg; --r1: -2deg; --sx: -1; animation-duration: 210s; }
@keyframes hx-creep {
  from { transform: translateY(var(--y0)) rotate(var(--r0)) scaleX(var(--sx)); }
  to { transform: translateY(var(--y1)) rotate(var(--r1)) scaleX(var(--sx)); }
}
.hx-hm {
  display: none; --w: clamp(96px, 13vw, 200px); width: var(--w); left: 0; bottom: auto; top: calc(52vh - 2.69 * var(--w)); transform-origin: 0 100%;
  transform: translateX(-150%) rotate(90deg); animation: hx-reach 240s linear infinite alternate;
}
@keyframes hx-reach { from { transform: translateX(-262%) rotate(92deg); } to { transform: translateX(-148%) rotate(87deg); } }

/* gore: blood running down from the top edge (three drip curtains, slowly lengthening) */
.hx-bloodtop { display: none; position: absolute; inset: 0 0 auto; height: 0; }
.hx-gore .hx-bloodtop { display: block; }
.hx-bt { position: absolute; top: -2px; width: clamp(100px, 13vw, 180px); aspect-ratio: 583 / 700; opacity: .9; transform-origin: 50% 0; background: url(/fx/blood-drips.webp) 50% 0 / 100% 100% no-repeat; animation: hx-bleed 46s ease-in-out infinite alternate; }
.hx-bt1 { left: 3%; }
.hx-bt2 { left: 41%; animation-duration: 61s; animation-delay: -20s; transform: scaleX(-1); }
.hx-bt3 { right: 4%; animation-duration: 53s; animation-delay: -35s; }
@keyframes hx-bleed { from { transform: scaleY(.48); } to { transform: scaleY(1); } }
.hx-bt2 { animation-name: hx-bleed-m; }
@keyframes hx-bleed-m { from { transform: scale(-1, .48); } to { transform: scale(-1, 1); } }

/* vignette that breathes; the heartbeat (.hx-beat) and the lightning (.hx-flash) are pulsed by hell.js */
.hx-vig {
  position: absolute; inset: -3%;
  background: radial-gradient(ellipse 78% 72% at 50% 46%, transparent 38%, rgba(60, 0, 0, .38) 66%, rgba(8, 0, 0, .86) 100%);
  animation: hx-breathe 8.5s ease-in-out infinite;
}
@keyframes hx-breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.hx-beat {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 48%, transparent 45%, rgba(130, 0, 0, .5) 80%, rgba(95, 0, 0, .66) 100%);
}
.hx-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 80% 55% at var(--fx, 50%) 0%, rgba(180, 30, 12, .55), rgba(110, 12, 8, .22) 50%, transparent 78%);
}
.hx-eyes { position: absolute; inset: 0; }
.hx-eye {
  position: absolute; width: 34px; height: 20px; margin: -10px 0 0 -17px; opacity: 0;
  background:
    radial-gradient(circle at 25% 50%, #ff5a36 0 1.9px, rgba(255, 60, 30, .38) 2.8px, transparent 7px),
    radial-gradient(circle at 75% 50%, #ff5a36 0 1.9px, rgba(255, 60, 30, .38) 2.8px, transparent 7px);
}
.hx-embers { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
.hx-grain { position: absolute; inset: -48px; opacity: .07; background-size: 96px; animation: hx-grain .9s steps(6) infinite; }
@keyframes hx-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-30px, 18px); } 33% { transform: translate(22px, -36px); }
  50% { transform: translate(-14px, 40px); } 67% { transform: translate(36px, 10px); } 83% { transform: translate(-24px, -20px); } 100% { transform: translate(0, 0); }
}

/* ---------- the banished: charred, caged, chained (gore adds blood) ---------- */
.view-hellscape .hell-grid .tile {
  filter: none; background: linear-gradient(#1c0a07, #0d0403); border: 3px solid #5a1308; border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 0 24px rgba(255, 70, 20, .16), 5px 6px 0 #000;
}
.view-hellscape .hell-grid .tile:hover, .view-hellscape .hell-grid .tile:focus-within { box-shadow: 0 0 0 1px #000, 0 0 32px rgba(255, 90, 30, .34), 6px 8px 0 #000; }
.view-hellscape .hell-grid .tile .open { position: relative; background: #000; }
.view-hellscape .hell-grid .tile .open img {
  filter: grayscale(.8) sepia(.55) hue-rotate(-20deg) saturate(1.3) brightness(.66) contrast(1.22); transition: filter .35s;
}
.view-hellscape .hell-grid .tile:hover .open img, .view-hellscape .hell-grid .tile:focus-within .open img { filter: grayscale(.3) sepia(.2) brightness(.92); }
.view-hellscape .hell-grid .tile .open::after {                              /* the cage */
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .35s;
  background:
    linear-gradient(#0b0605, #0b0605) 0 0 / 100% 5px no-repeat,
    linear-gradient(#0b0605, #0b0605) 0 100% / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(10, 6, 5, .92) 0 3px, rgba(120, 90, 70, .5) 3px 4px, transparent 4px 26px);
}
.view-hellscape .hell-grid .tile:hover .open::after, .view-hellscape .hell-grid .tile:focus-within .open::after { opacity: .28; }
.view-hellscape .hell-grid .tile .open::before {                              /* the chain (inside the image box, which clips it) */
  content: ""; position: absolute; left: -6%; right: -6%; top: 38%; height: 13px; z-index: 2; pointer-events: none; opacity: .92;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cg fill='none' stroke-width='2.6'%3E%3Crect x='1.5' y='2' width='24' height='12' rx='6' stroke='%238d8479'/%3E%3Crect x='21' y='5' width='20' height='6' rx='3' stroke='%236f665d'/%3E%3Crect x='-19' y='5' width='20' height='6' rx='3' stroke='%236f665d'/%3E%3C/g%3E%3Cpath d='M7 3.7h12' stroke='%23d8cdbd' stroke-width='.9' opacity='.55'/%3E%3C/svg%3E") repeat-x 0 50% / auto 13px;
  transform: rotate(var(--ch, -8deg)); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .8)); transition: opacity .35s;
}
.view-hellscape .hell-grid .tile:nth-child(2n) .open::before { --ch: 9deg; top: 46%; }
.view-hellscape .hell-grid .tile:nth-child(3n) .open::before { --ch: -4deg; top: 54%; }
.view-hellscape .hell-grid .tile:hover .open::before, .view-hellscape .hell-grid .tile:focus-within .open::before { opacity: .4; }
.view-hellscape .hell-grid .tile .tape {                                     /* the cute tape becomes a padlock */
  width: 26px; height: 32px; margin-left: -13px; top: -16px; border: 0; z-index: 3; transform: none; filter: drop-shadow(0 2px 1px #000);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='32' viewBox='0 0 26 32'%3E%3Cpath d='M7 15V9.5a6 6 0 0 1 12 0V15' fill='none' stroke='%23a3a3a8' stroke-width='3'/%3E%3Crect x='3' y='14' width='20' height='15' rx='3' fill='%236b5a2a' stroke='%23241a08' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='20.5' r='2.3' fill='%231b1204'/%3E%3Crect x='12' y='21' width='2' height='5' fill='%231b1204'/%3E%3C/svg%3E") center / contain no-repeat;
}
.view-hellscape .hell-grid .tile .cap span { color: #ffe0cc; text-shadow: 0 1px 0 #000; }
.view-hellscape .hell-grid .tile .icon-btn:not([aria-pressed="true"]) { background: #2a0b08; color: #ffd2b8; border-color: #6b1608; box-shadow: 2px 2px 0 #000; }
.view-hellscape .hell-grid .tile .icon-btn:not([aria-pressed="true"]):hover { background: #4a1209; color: #fff; }
.view-hellscape.hx-gore .hell-grid .tile::after {                             /* blood on some of them */
  content: ""; position: absolute; right: -22px; top: -26px; width: 96px; height: 96px; z-index: 3; pointer-events: none; opacity: .88;
  background: url(/fx/blood-splat.webp) center / contain no-repeat; transform: rotate(var(--sp, 20deg));
}
.view-hellscape.hx-gore .hell-grid .tile:nth-child(3n+2)::after { right: auto; left: -26px; top: -24px; --sp: 130deg; }   /* top corners only: never over a caption */
.view-hellscape.hx-gore .hell-grid .tile:nth-child(3n)::after { display: none; }

/* the redeem button: still easy to hit, now a little rusty */
.view-hellscape .redeem {
  background: linear-gradient(#3a0e08, #220806); color: #ffe9d6; border-color: #a3200c; min-height: 40px;
  box-shadow: 3px 3px 0 #000, 0 0 12px rgba(255, 70, 20, .2);
}
.view-hellscape .redeem:hover:not(:disabled) { background: #5a1409; color: #fff; box-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 90, 30, .45); }
.view-hellscape .redeem:disabled { opacity: .55; }

/* ---------- phones: smaller fire and hands, no side pillars ---------- */
@media (min-width: 900px) {
  .hx-pillar { display: block; }
  .hx-hm { display: block; }
}
@media (max-width: 760px) {
  .hx-fire { height: clamp(150px, 27vh, 320px); }
  .hx-hand { width: 22vw; }
  .hx-hl { left: -8vw; }
  .hx-hr { right: -8vw; }
  .view-hellscape .hell-grid .tile .open::before { height: 10px; background-size: auto 10px; }
  .hx-eye { transform: scale(.8); }
}

/* ---------- calm: the site's calm mode (hell.js adds .hx-calm) or the system's reduced-motion: still pictures, no flicker ---------- */
.view-hellscape.hx-calm .hx-deco, .view-hellscape.hx-calm .hx-deco *, .view-hellscape.hx-calm .hx-title, .view-hellscape.hx-calm .hx-title::before,
.view-hellscape.hx-calm .hx-title::after, .view-hellscape.hx-calm .hx-drip { animation: none !important; }
.view-hellscape.hx-calm .hx-hand { transform: translateY(calc((var(--y0) + var(--y1)) / 2)) rotate(var(--r1)) scaleX(var(--sx)); }
.view-hellscape.hx-calm .hx-hm { transform: translateX(-190%) rotate(90deg); }
.view-hellscape.hx-calm .hx-drip { transform: scaleY(.6); }
.view-hellscape.hx-calm .hx-bt { transform: scaleY(.8); }
.view-hellscape.hx-calm .hx-bt2 { transform: scale(-1, .8); }
.view-hellscape.hx-calm .hx-eyes { display: none; }
@media (prefers-reduced-motion: reduce) {
  .view-hellscape .hx-deco, .view-hellscape .hx-deco *, .view-hellscape .hx-title, .view-hellscape .hx-title::before,
  .view-hellscape .hx-title::after, .view-hellscape .hx-drip { animation: none !important; }
  .view-hellscape .hx-hand { transform: translateY(calc((var(--y0) + var(--y1)) / 2)) rotate(var(--r1)) scaleX(var(--sx)); }
  .view-hellscape .hx-hm { transform: translateX(-190%) rotate(90deg); }
  .view-hellscape .hx-drip { transform: scaleY(.6); }
  .view-hellscape .hx-bt { transform: scaleY(.8); }
  .view-hellscape .hx-bt2 { transform: scale(-1, .8); }
  .view-hellscape .hx-eyes { display: none; }
}
.view-hellscape.hx-leaving .hx-deco { opacity: 0; transition: opacity 1.4s linear; }