@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700&family=Pirata+One&display=swap');

:root {
  --paper: #070707;
  --ink: #eee8db;
  --muted: #918c84;
  --line: #333032;
  --accent: #d20b22;
  --blood: #d20b22;
  --bone: #eee8db;
  --graphite: #171719;
  --teal: #8fd0c8;
}

* { border-color: var(--line); }

html { background: #050505; }

body.hellbound-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, #49040e 0, transparent 31rem),
    radial-gradient(circle at 80% 55%, #260309 0, transparent 28rem),
    linear-gradient(125deg, #050505 0%, #0c0b0c 56%, #050505 100%);
  color: var(--bone);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: .015em;
}

body.hellbound-page::before,
body.hellbound-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.campaign-overlay-source {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: .001;
  pointer-events: none;
}

body.hellbound-page::before {
  opacity: .13;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px),
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1.5px);
  background-size: auto, 17px 19px, 23px 29px;
  mix-blend-mode: overlay;
}

body.hellbound-page::after {
  opacity: .38;
  box-shadow: inset 0 0 180px #000;
}

.top-stripe {
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--blood) 0 62px, #780615 62px 88px, #050505 88px 96px);
  box-shadow: 0 0 24px #d20b2277;
}

.hellbound-page header {
  position: relative;
  z-index: 2;
  height: 112px;
  border-bottom: 1px solid #393436;
}

.campaign-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--bone);
  text-decoration: none;
}

.hellbound-mark {
  font: 400 43px/.8 'Pirata One', Georgia, serif;
  letter-spacing: -1px;
  text-shadow: 2px 0 0 #7f0716, 0 0 22px #d20b2255;
  transform: skewX(-3deg);
}

.brand-divider {
  color: var(--blood);
  font: 700 21px/1 monospace;
}

.frame-drop-mark {
  font: 800 15px/.9 'Barlow Condensed', sans-serif;
  letter-spacing: .14em;
}

.frame-drop-mark small {
  color: var(--muted);
  font: 500 8px/1.5 monospace;
  letter-spacing: .1em;
}

.back-link {
  color: var(--bone);
  font: 600 11px/1 monospace;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link span { color: var(--blood); }
.back-link:hover { color: #fff; }

.hellbound-page main {
  position: relative;
  z-index: 1;
  max-width: 1580px;
  grid-template-columns: minmax(280px, 1fr) 390px 355px;
  gap: clamp(35px, 4vw, 70px);
  padding-top: 64px;
}

.hellbound-page .eyebrow,
.hellbound-page .previewtop,
.hellbound-page .stagefoot,
.hellbound-page .fieldlabel {
  text-transform: uppercase;
  letter-spacing: .16em;
}

.hellbound-page .dot {
  border-radius: 0;
  background: var(--blood);
  box-shadow: 0 0 12px #d20b22;
  transform: rotate(45deg);
}

.hellbound-page h1 {
  max-width: 620px;
  margin: 38px 0 28px;
  color: var(--bone);
  font: 400 clamp(65px, 6.7vw, 112px)/.75 'Pirata One', Georgia, serif;
  letter-spacing: -3px;
  text-transform: none;
  text-shadow: 3px 3px 0 #260207;
}

.hellbound-page h1 em {
  display: inline-block;
  margin-top: .25em;
  color: var(--blood);
  font: italic 800 .56em/.9 'Barlow Condensed', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}

.hellbound-page .intro > p {
  color: #aaa39b;
  font-size: 17px;
  line-height: 1.55;
  text-transform: uppercase;
}

.event-stamp {
  position: relative;
  width: min(100%, 340px);
  margin-top: 45px;
  padding: 17px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 20px;
  border: 1px solid #49363a;
  border-left: 5px solid var(--blood);
  background: #0e0d0ecc;
  box-shadow: 10px 10px 0 #1d0207;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.event-stamp::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 14px 14px 0;
  border-style: solid;
  border-color: transparent #403b3d transparent transparent;
}

.event-stamp span {
  align-self: end;
  color: var(--blood);
  font: 800 14px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .12em;
}

.event-stamp strong {
  grid-row: span 2;
  color: var(--bone);
  font: 900 28px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .03em;
}

.event-stamp small {
  color: var(--muted);
  font: 500 9px/1.45 monospace;
  letter-spacing: .08em;
}

.hellbound-page .steps {
  margin-top: 62px;
  gap: 17px;
  color: #656164;
  font: 600 11px/1 monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hellbound-page .steps .active {
  color: var(--bone);
  text-shadow: 12px 0 17px #d20b2288;
}

.hellbound-page .steps .active::before {
  content: '◆';
  color: var(--blood);
  margin-right: 8px;
}

.hellbound-page .privacy {
  color: #898389;
  font: 500 9px/1.8 monospace;
  letter-spacing: .04em;
}

.hellbound-page .privacy span { color: #5f5a5d; }

.hellbound-page .workspace { max-width: 390px; }

.hellbound-page .previewtop,
.hellbound-page .stagefoot { color: #8b8589; }

.hellbound-page .previewtop i {
  border-radius: 0;
  background: var(--blood);
  box-shadow: 0 0 9px var(--blood);
  animation: live-pulse 1.5s steps(2, end) infinite;
}

@keyframes live-pulse { 50% { opacity: .25; } }

.hellbound-page .stage {
  border: 1px solid #443a3d;
  border-radius: 0;
  background: #0a0a0b;
  box-shadow: 0 25px 80px #000, 0 0 0 1px #000, 0 0 35px #8a071422;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

.hellbound-page .stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff0d;
  pointer-events: none;
}

.hellbound-page canvas { background: #111; }

.hellbound-page #emptyLabel {
  top: 35%;
  color: #f5eee3;
  text-transform: uppercase;
  text-shadow: 0 2px 10px #000;
}

.hellbound-page #emptyLabel .cross {
  color: var(--blood);
  font-size: 42px;
  text-shadow: 0 0 16px #d20b2288;
}

.hellbound-page #emptyLabel b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .05em;
}

.hellbound-page #demo {
  border: 1px solid #a60a1d;
  border-radius: 0;
  background: #17090cbb;
  color: var(--bone);
  font: 700 10px/1 monospace;
  letter-spacing: .04em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.hellbound-page #demo:hover { background: var(--blood); }

.hellbound-page .previewchip {
  bottom: 24px;
  border: 1px solid #6b111d;
  border-radius: 0;
  background: #080808d9;
  color: #d9d2c7;
  font-weight: 700;
  backdrop-filter: blur(5px);
}

.hellbound-page .controls {
  padding: 26px;
  border: 1px solid #2e2b2c;
  background: linear-gradient(145deg, #111112e8, #0a0a0be8);
  box-shadow: 16px 16px 0 #030303aa;
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
}

.hellbound-page .controltitle { margin-bottom: 17px; }

.hellbound-page .num {
  border-color: #4d4548;
  border-radius: 0;
  color: var(--blood);
  font-weight: 700;
  transform: skewX(-6deg);
}

.hellbound-page h2 {
  color: var(--bone);
  font: 800 20px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hellbound-page .primary,
.hellbound-page .secondary {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.hellbound-page .primary {
  background: var(--blood);
  color: #fff9ef;
  box-shadow: inset 0 -3px 0 #760511;
}

.hellbound-page .primary:hover { background: #f0142c; }

.hellbound-page .secondary {
  border-color: #454043;
  background: #151416;
  color: var(--bone);
}

.hellbound-page .secondary:hover { background: #242023; }
.hellbound-page .hint { color: #777276; }
.hellbound-page .divider { background: linear-gradient(90deg, var(--blood), #342e31 30%, transparent); }

.hellbound-page .fieldlabel {
  color: #b6afa7;
  font-weight: 700;
}

.hellbound-page .fieldlabel span { color: #625e61; }

.hellbound-page .segments {
  border: 1px solid #292629;
  border-radius: 0;
  background: #09090a;
}

.hellbound-page .segments button {
  border-radius: 0;
  color: #554f53;
}

.hellbound-page .segments button.selected {
  background: #211c1e;
  color: var(--bone);
  box-shadow: inset 0 -2px 0 var(--blood);
}

.hellbound-page .segments button:disabled { cursor: not-allowed; opacity: .42; }

.hellbound-border-card {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  padding: 10px;
  border: 1px solid #8c0b1a;
  background: linear-gradient(110deg, #29050b, #101011 58%);
  box-shadow: inset 0 0 30px #d20b2218;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

.hellbound-border-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  background: repeating-linear-gradient(-54deg, transparent 0 8px, #d20b22 9px, transparent 10px 18px);
  pointer-events: none;
}

.border-card-art {
  z-index: 1;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid #6c101c;
  background: radial-gradient(circle, #960b1c, #110305 70%);
  color: var(--bone);
  font: 400 39px/1 'Pirata One', serif;
  transform: rotate(-3deg);
}

.border-card-copy { z-index: 1; display: flex; flex-direction: column; gap: 5px; }
.border-card-copy strong { font-size: 14px; letter-spacing: .08em; }
.border-card-copy small { color: #9d9590; font: 500 8px/1 monospace; letter-spacing: .05em; }

.selected-mark {
  position: absolute;
  top: 7px;
  right: -21px;
  z-index: 2;
  width: 85px;
  padding: 3px;
  background: var(--blood);
  color: white;
  font: 700 7px/1 monospace;
  letter-spacing: .06em;
  text-align: center;
  transform: rotate(34deg);
}

.asset-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: #777174;
  font: 600 8px/1 monospace;
  letter-spacing: .06em;
}

#borderSignal {
  width: 6px;
  height: 6px;
  background: #806f72;
  box-shadow: 0 0 8px #806f72;
}

#borderSignal.ready {
  background: var(--blood);
  box-shadow: 0 0 9px var(--blood);
}

#borderSignal.fallback { background: #c89433; box-shadow: 0 0 9px #c89433; }

.hellbound-page .adjust label { text-transform: uppercase; letter-spacing: .04em; }
.hellbound-page input[type=range] { accent-color: var(--blood); }
.hellbound-page details { border-top: 1px solid #2b282a; padding-top: 15px; }
.hellbound-page summary { color: #aaa3a7; text-transform: uppercase; letter-spacing: .04em; }
.restore-border { width: 100%; margin-top: 7px; color: var(--blood); text-transform: uppercase; }

.hellbound-page select {
  border-color: #423d40;
  border-radius: 0;
  background: #0b0b0c;
  color: var(--bone);
}

.hellbound-page #status { color: #b9b1ad; }

.share-panel {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #3b3336;
}

.share-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: var(--bone);
  font: 800 11px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .11em;
}

.share-heading small {
  color: #746d70;
  font: 600 7px/1 monospace;
  letter-spacing: .06em;
}

.share-native { margin-top: 8px; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 8px;
}

.social-grid button {
  min-height: 48px;
  padding: 7px 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid #3b3638;
  background: #0d0c0d;
  color: #bdb5b1;
  font: 700 9px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.social-grid button:hover {
  border-color: var(--blood);
  background: #23070c;
  color: #fff;
}

.social-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border: 1px solid #5e4a4f;
  color: var(--blood);
  font: 800 8px/1 monospace;
}

.share-note {
  margin: 9px 0 0;
  color: #716b6e;
  font: 500 8px/1.45 monospace;
}

.prototype-note {
  position: relative;
  z-index: 1;
  margin: 0 5%;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #5c0712;
  border-bottom: 1px solid #5c0712;
  background: #150407;
  color: #9e9393;
  font: 600 8px/1.4 monospace;
  letter-spacing: .08em;
}

.prototype-note span:first-child,
.prototype-note span:last-child { color: var(--blood); }

.hellbound-page footer {
  position: relative;
  z-index: 1;
  border-color: #282527;
  color: #6f696c;
  text-transform: uppercase;
}

.hellbound-page footer b {
  color: var(--bone);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .09em;
}

.hellbound-page dialog {
  border: 1px solid #5e111b;
  border-radius: 0;
  background: #0c0b0c;
  color: var(--bone);
}

.hellbound-page dialog::backdrop { background: #000c; }
.hellbound-page button:focus-visible,
.hellbound-page a:focus-visible,
.hellbound-page summary:focus-visible { outline-color: var(--blood); }

@media (max-width: 1150px) {
  .hellbound-page main { max-width: 900px; grid-template-columns: 1fr 350px; }
  .hellbound-page .intro { display: none; }
}

@media (max-width: 700px) {
  .hellbound-page header { height: 78px; }
  .hellbound-mark { font-size: 30px; }
  .frame-drop-mark { font-size: 11px; }
  .back-link { font-size: 8px; }
  .hellbound-page main { padding-top: 26px; }
  .hellbound-page .intro { display: block; }
  .hellbound-page h1 { margin: 20px 0 12px; font-size: 54px; letter-spacing: -1px; }
  .hellbound-page h1 br { display: block; }
  .hellbound-page .intro > p { font-size: 12px; }
  .event-stamp { display: none; }
  .hellbound-page .workspace { max-width: 310px; }
  .hellbound-page .stage { max-height: 500px; }
  .hellbound-page .stage canvas { max-height: 500px; }
  .hellbound-page .controls { padding: 21px; }
  .prototype-note { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hellbound-page .previewtop i { animation: none; }
}