:root {
  --bg: #08060a;
  --red: #e31b1b;
  --cream: #f4ead8;
  --ink: #f3eadc;
  --muted: #cbbba6;
  --dim: #8d7f6e;
  --gold: #ffd27a;
}

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

html { scroll-behavior: smooth; }

body {
  min-height: 100%;
  background: #05060a;
  color: var(--ink);
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.07;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 3px
    );
}

a { color: inherit; }

.tape {
  position: sticky;
  top: 0;
  z-index: 30;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  background: repeating-linear-gradient(-28deg, #e31b1b 0 14px, #1a0808 14px 28px);
  color: var(--cream);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 0 rgba(0,0,0,0.35);
  animation: tapeSlide 0.9s linear infinite;
}

@keyframes tapeSlide {
  from { background-position: 0 0; }
  to { background-position: 60px 0; }
}

.nav {
  position: sticky;
  top: 34px;
  z-index: 25;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: rgba(8, 6, 10, 0.92);
  border-bottom: 1px solid rgba(244, 234, 216, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav a { text-decoration: none; color: var(--dim); }
.nav a:hover { color: var(--cream); }
.nav .mute {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.nav .mute:hover { color: var(--cream); }
.nav .play {
  color: var(--cream);
  border: 2px solid var(--cream);
  background: var(--red);
  padding: 6px 14px;
  box-shadow: 0 3px 0 #6b0c0c;
}

.sound-tip {
  position: sticky;
  top: 78px;
  z-index: 24;
  margin: 0;
  padding: 6px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 234, 216, 0.55);
  background: rgba(8, 6, 10, 0.55);
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.4s ease;
}
.sound-tip.on {
  color: rgba(244, 234, 216, 0.35);
}

.wrap {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - 36px));
  margin: 0 auto;
  padding-bottom: 88px;
}

.hero {
  position: relative;
  text-align: center;
  padding: 64px 28px 28px;
  margin-top: 28px;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(244, 234, 216, 0.22);
  pointer-events: none;
}

.hero::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.ornament {
  position: absolute;
  top: 78px;
  width: 28px;
  height: 64px;
  background:
    radial-gradient(circle at 50% 28%, #f4ead8 0 5px, transparent 6px),
    radial-gradient(circle at 38% 42%, #140808 0 3px, transparent 4px),
    radial-gradient(circle at 62% 42%, #140808 0 3px, transparent 4px),
    radial-gradient(circle at 50% 56%, #3a1410 0 3px, transparent 4px);
  opacity: 0.75;
}

.ornament.left { left: 8px; }
.ornament.right { right: 8px; transform: scaleX(-1); }

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

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Bungee", sans-serif;
  font-size: clamp(48px, 9vw, 96px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-shadow: 0 6px 0 #3a0505, 0 12px 0 #1a0000, 0 0 40px rgba(227, 27, 27, 0.45);
}

.logo-surge {
  display: inline-flex;
  align-items: flex-end;
  color: var(--red);
  filter: drop-shadow(0 0 18px rgba(227, 27, 27, 0.35));
}

.logo-g {
  display: inline-flex;
  width: 0.78em;
  height: 1.02em;
  margin: 0 0.01em -0.04em;
}

.logo-g img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 0 #3a0505) drop-shadow(0 10px 0 #1a0000);
  animation: gPulse 2.4s ease-in-out infinite;
}

@keyframes gPulse {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 6px 0 #3a0505) drop-shadow(0 10px 0 #1a0000) drop-shadow(0 0 8px rgba(227, 27, 27, 0.25));
  }
  50% {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 0 #3a0505) drop-shadow(0 12px 0 #1a0000) drop-shadow(0 0 16px rgba(227, 27, 27, 0.55));
  }
}

.tagline {
  margin: 18px auto 22px;
  max-width: 460px;
  color: var(--muted);
  font-size: 16px;
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.big-btn, .ghost-btn {
  display: inline-block;
  text-decoration: none;
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.big-btn {
  font-size: 18px;
  padding: 14px 40px;
  border: 3px solid var(--cream);
  background: var(--red);
  color: var(--cream);
  box-shadow: 0 6px 0 #6b0c0c;
  animation: playPulse 1.8s ease-in-out infinite;
}

.big-btn:hover { transform: translateY(-1px); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #6b0c0c; animation: none; }

@keyframes playPulse {
  0%, 100% { box-shadow: 0 6px 0 #6b0c0c, 0 0 0 0 rgba(227, 27, 27, 0.35); }
  50% { box-shadow: 0 6px 0 #6b0c0c, 0 0 0 10px rgba(227, 27, 27, 0); }
}

.ghost-btn {
  font-size: 14px;
  padding: 12px 24px;
  border: 2px solid rgba(244, 234, 216, 0.45);
  background: transparent;
  color: var(--cream);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  list-style: none;
  margin: 26px 0 0;
  color: #e4d5c2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facts li { position: relative; padding-left: 14px; }
.facts li::before {
  content: "☠";
  position: absolute;
  left: 0;
  color: var(--red);
  font-size: 10px;
}

section {
  margin-top: 64px;
  scroll-margin-top: 110px;
}

h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.04em;
  word-spacing: 0.2em;
  line-height: 0.92;
  color: var(--red);
  text-shadow: 0 4px 0 #3a0505, 0 8px 0 #140000;
  margin-bottom: 14px;
}

h2 .sp { width: 0.38em; display: inline-block; }

h2 .glyph {
  display: inline-flex;
  height: 1em;
  width: auto;
  margin: 0 0.02em 0;
}

h2 .glyph.horn { height: 1.14em; }

h2 .glyph img {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 0 #3a0505) drop-shadow(0 6px 0 #140000);
}

.lead {
  color: var(--ink);
  max-width: 62ch;
  font-size: 17px;
  text-shadow: 0 2px 0 #000, 0 0 12px #000;
}

.fine {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  max-width: 68ch;
}

h2, .kicker, .tagline, .facts, footer, .shot figcaption {
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
}

.shot {
  margin: 16px 0 0;
  border: 2px solid rgba(244, 234, 216, 0.18);
  background: #05060a;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: 8px 12px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.row2, .row3 {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.row2 { grid-template-columns: 1fr 1fr; }
.row3 { grid-template-columns: 1fr 1fr 1fr; }
.row2 .shot, .row3 .shot { margin-top: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.split .shot { margin-top: 0; }

.specs, .beats {
  list-style: none;
}

.specs li, .beat {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.12);
}

.specs li > span, .beat b, .defs b, .mark b.lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.specs strong, .beat strong {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.specs em, .beat em {
  grid-column: 2;
  font-style: normal;
  color: var(--ink);
  font-size: 14.5px;
}

.defs p {
  color: var(--ink);
  font-size: 14.5px;
  margin-top: 3px;
}

.keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  margin-top: 18px;
}

.keyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.keyrow span {
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

kbd {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  min-width: 36px;
  padding: 9px 8px 7px;
  text-align: center;
  color: var(--gold);
  background: #140c10;
  border: 2px solid rgba(244, 234, 216, 0.8);
  box-shadow: 0 3px 0 #6b0c0c;
}

kbd.plain {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.bar {
  display: flex;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(244, 234, 216, 0.16);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 2px 0 #000;
}

.bar .brand {
  display: inline-flex;
  align-items: center;
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.bar .brand .logo-g { width: 0.82em; height: 1.05em; margin: 0 1px -0.08em; }
.bar .brand .logo-g img { animation: none; filter: none; }

.bar .dim { color: #9ec4ff; letter-spacing: 0.16em; }
.bar .num { color: var(--red); }
.bar .traps { color: var(--gold); letter-spacing: 0.22em; }
.bar .time { color: var(--dim); font-variant-numeric: tabular-nums; }
.bar .dead { color: #ffb4b4; }
.bar .surge { color: #ffd24a; font-family: "Bungee", sans-serif; font-weight: 400; font-size: 13px; }
.bar .shard { color: #ffe08a; }

.pips { display: inline-flex; gap: 3px; }
.pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 234, 216, 0.22);
  display: block;
}
.pips i.on { background: #e31b1b; }
.pips i.now { background: #ffd24a; box-shadow: 0 0 8px #ffd24a; }

.defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-top: 8px;
}

.defs div {
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.12);
}

.defs p { grid-column: auto; }

.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-top: 8px;
}

.room {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.1);
  background: transparent;
}

.room .num {
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.room strong {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room p {
  grid-column: 2;
  color: var(--muted);
  font-size: 13.5px;
}

.worlds { margin-top: 6px; }

.world {
  display: grid;
  grid-template-columns: 8px 52px minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.1);
  background: transparent;
}

.world i {
  width: 8px;
  height: 8px;
  background: var(--pip, var(--red));
  box-shadow: 0 0 8px var(--pip, var(--red));
}

.world .idx {
  color: var(--red);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.world .who { min-width: 0; }

.world strong {
  display: block;
  letter-spacing: 0.1em;
  font-size: 13px;
}

.world .lore {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
}

.world .meta {
  color: #e4d5c2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.marks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-top: 8px;
}

.mark {
  display: grid;
  grid-template-columns: 32px 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.1);
}

.mark svg { width: 32px; height: 32px; display: block; }
.mark code {
  font-family: "Bungee", sans-serif;
  font-size: 13px;
  color: var(--cream);
}
.mark span { font-size: 13.5px; color: var(--ink); }

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  margin-top: 8px;
}

.cols h3, .band-title {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin: 28px 0 4px;
  text-shadow: 0 3px 0 #000;
}

.band-note {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 10px;
  max-width: 62ch;
}

.band-note code, .beat code {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.trap-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0 0 8px;
}

.trap-grid li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 234, 216, 0.1);
}

.trap-grid b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.trap-grid.sigs b { color: var(--gold); }

.trap-grid em {
  font-style: normal;
  color: var(--ink);
  font-size: 13.5px;
}

.scale-table-wrap {
  overflow-x: auto;
  margin: 18px 0 8px;
  border: 1px solid rgba(244, 234, 216, 0.14);
  background: rgba(0, 0, 0, 0.28);
}

.scale-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 720px;
}

.scale-table th,
.scale-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(244, 234, 216, 0.1);
  white-space: nowrap;
}

.scale-table th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(227, 27, 27, 0.08);
}

.scale-table td:first-child,
.scale-table th:first-child {
  color: var(--gold);
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.scale-table td.sig {
  white-space: normal;
  min-width: 160px;
  color: var(--muted);
  font-size: 12px;
}

footer {
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 234, 216, 0.12);
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
}

footer a { color: var(--gold); }

@media (max-width: 800px) {
  .split, .row3, .keys, .defs, .rooms, .marks, .cols, .trap-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .world { grid-template-columns: 8px 46px minmax(0, 1fr); }
  .world .meta { grid-column: 2 / -1; text-align: left; }
  .ornament { display: none; }
  .trap-grid li { grid-template-columns: 96px minmax(0, 1fr); }
}

.edge-stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.prop { position: absolute; display: block; }

.spikes-l { left: -8px; top: 18%; width: 54px; height: 280px; filter: drop-shadow(4px 8px 0 rgba(0,0,0,0.45)); }
.spikes-r { right: -6px; top: 46%; width: 52px; height: 240px; filter: drop-shadow(-4px 8px 0 rgba(0,0,0,0.45)); }
.saw-l { left: 18px; top: 12%; width: 72px; }
.saw-l .chain {
  display: block;
  width: 3px;
  height: 54px;
  margin: 0 auto;
  background: repeating-linear-gradient(#cbbba6 0 6px, #2a2420 6px 10px);
}
.saw-l .saw {
  width: 64px;
  height: 64px;
  display: block;
  margin: -6px auto 0;
  animation: sawSpin 2.8s linear infinite;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.4));
}
@keyframes sawSpin { to { transform: rotate(360deg); } }
.door-r { right: 8px; top: 22%; width: 78px; height: 100px; filter: drop-shadow(-6px 10px 0 rgba(0,0,0,0.4)); }
.door-fake { left: 6px; bottom: 18%; width: 64px; height: 82px; opacity: 0.85; filter: drop-shadow(4px 8px 0 rgba(0,0,0,0.45)); }
.coin-r {
  right: 28px;
  top: 8%;
  width: 48px;
  height: 48px;
  animation: coinBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.35));
}
@keyframes coinBob {
  50% { translate: 0 10px; }
}
.devil-l { left: 10px; top: 62%; width: 48px; height: 56px; animation: devilLean 3.2s ease-in-out infinite; filter: drop-shadow(3px 6px 0 rgba(0,0,0,0.4)); }
@keyframes devilLean {
  50% { translate: 4px -6px; }
}
.bricks-l { left: -12px; top: 38%; width: 46px; }
.bricks-l i, .crumble-r i {
  display: block;
  height: 18px;
  margin-bottom: 3px;
  background: linear-gradient(#cfc1aa, #cfc1aa 5px, #4a4038 5px);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
}
.bricks-l i:nth-child(odd) { width: 40px; }
.bricks-l i:nth-child(even) { width: 28px; margin-left: 8px; }
.crumble-r { right: -8px; bottom: 28%; width: 42px; }
.crumble-r i { width: 36px; }
.crumble-r .fall { width: 22px; margin-left: 16px; animation: brickFall 2.6s ease-in infinite; opacity: 0.8; }
@keyframes brickFall {
  0% { translate: 0 0; }
  70% { translate: 8px 18px; opacity: 0.2; }
  100% { translate: 0 0; opacity: 0; }
}
.film-l, .film-r {
  top: 0;
  bottom: 0;
  width: 16px;
  background:
    repeating-linear-gradient(#0a0a0c 0 14px, transparent 14px 18px, #0a0a0c 18px 32px),
    #1a1814;
  box-shadow: inset 0 0 0 2px rgba(244,234,216,0.15);
}
.film-l { left: 0; }
.film-r { right: 0; }
.tape-tl, .tape-br {
  padding: 6px 14px;
  background: repeating-linear-gradient(-28deg, #e31b1b 0 10px, #1a0808 10px 20px);
  color: #f4ead8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(0,0,0,0.35);
}
.tape-tl { left: -20px; top: 108px; rotate: -8deg; }
.tape-br { right: -30px; bottom: 72px; rotate: 7deg; }
.teeth-tl { left: 70px; top: 72px; width: 160px; height: 28px; opacity: 0.8; }
.teeth-tr { right: 80px; top: 78px; width: 140px; height: 26px; opacity: 0.75; }
.floor-lip {
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: linear-gradient(#cfc1aa, #cfc1aa 4px, #4a4038 4px);
  box-shadow: 0 -4px 0 rgba(0,0,0,0.35);
}
.skull-bl { left: 22px; bottom: 28px; width: 54px; height: 54px; opacity: 0.9; filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.45)); }
.lantern-r { right: 36px; top: 48%; width: 22px; height: 36px; }
.lantern-r b {
  display: block;
  width: 16px;
  height: 22px;
  margin: 8px auto 0;
  background: #ffd27a;
  border: 2px solid #8a5a18;
  box-shadow: 0 0 18px #ffd27a;
}
.lantern-r .glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255,210,120,0.45), transparent 70%);
}
.sign-l {
  left: -6px;
  top: 78%;
  padding: 8px 12px 8px 18px;
  background: #e31b1b;
  color: #f4ead8;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 12px;
  box-shadow: 4px 4px 0 #1a0808;
}
.scroll-hair {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #e31b1b;
  z-index: 40;
  box-shadow: 0 0 8px rgba(227,27,27,0.6);
}
.nav {
  backdrop-filter: blur(8px);
}
.nav a.on { color: var(--cream); box-shadow: inset 0 -2px 0 #e31b1b; }
::selection { background: #e31b1b; color: #f4ead8; }
html { scrollbar-color: #e31b1b #120c10; }
.world { transition: transform 0.18s ease; }
.world:hover { transform: translateY(-2px); }
a:focus-visible, button:focus-visible {
  outline: 2px solid #ffd27a;
  outline-offset: 3px;
}
footer { border-image: repeating-linear-gradient(90deg, #e31b1b 0 10px, transparent 10px 16px) 1; }

@media (min-width: 1180px) {
  .wrap { width: min(920px, calc(100% - 240px)); }
}
@media (max-width: 900px) {
  .edge-stage { opacity: 0.55; }
  .teeth-tl, .teeth-tr, .tape-tl, .tape-br, .floor-lip { display: none; }
  .film-l, .film-r { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .saw-l .saw, .coin-r, .devil-l, .crumble-r .fall { animation: none; }
  .world { transition: none; }
}