:root {
  --black: #050505;
  --red: #d20f1d;
  --red-bright: #f12a32;
  --paper: #eee8df;
  --line: rgba(242, 236, 226, 0.7);
  --scene-ratio: 1.773585;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  overflow: hidden;
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
}

button, a { font: inherit; }

.viewport {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--black);
}

.scene {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(100vw, calc(100svh * var(--scene-ratio)));
  aspect-ratio: 1974 / 1113;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--black) url("assets/background-void.jpg") center / 100% 100% no-repeat;
  isolation: isolate;
}

.layer {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.layer-corner { left: 0; top: 0; width: 19.25%; z-index: 2; }
.layer-top-tear { left: 71.9%; top: 0; width: 27.4%; z-index: 2; }
.layer-left-tear { left: 0; bottom: 0; width: 22.3%; z-index: 2; }
.layer-right-tear { right: 0; bottom: 0; width: 24.3%; z-index: 2; }
.layer-title { left: 2.5%; top: 14.4%; width: 54.2%; z-index: 5; }
.layer-character { right: 0; top: 3.6%; width: 50.9%; z-index: 6; }
.layer-ribbon { left: 16.7%; top: 54.8%; width: 36%; z-index: 8; }
.layer-sigil { left: 0; bottom: 0; width: 17.7%; z-index: 7; }

.ticker {
  position: absolute;
  overflow: hidden;
  z-index: 9;
  pointer-events: none;
}

.ticker-top { left: 24.8%; top: 1.6%; width: 75.2%; height: 8.1%; }
.ticker-bottom { left: 18.2%; bottom: 1.7%; width: 81.8%; height: 8%; }

.ticker-track {
  display: flex;
  width: 200%;
  height: 100%;
  animation: ticker-left 26s linear infinite;
  will-change: transform;
}

.ticker-bottom .ticker-track {
  animation-name: ticker-right;
  animation-duration: 31s;
}

.ticker-track img {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

@keyframes ticker-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ticker-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.enter-hotspot {
  position: absolute;
  z-index: 12;
  left: 19.7%;
  top: 70.2%;
  width: 28.9%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.enter-hotspot img { display: block; width: 100%; height: auto; }

.enter-hotspot:hover,
.enter-hotspot:focus-visible {
  transform: rotate(-1deg) scale(1.035);
  filter: drop-shadow(0 0 12px rgba(210, 15, 29, 0.6));
  outline: none;
}

.enter-hotspot:active { transform: rotate(-1deg) scale(0.99); }

.scene-noise,
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-noise {
  z-index: 20;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.scene-vignette {
  z-index: 21;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.42) 100%);
}

.riot-modal[hidden] { display: none; }

.riot-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(3, 3, 3, .84);
  backdrop-filter: blur(7px) contrast(1.12);
  animation: modal-in 220ms ease-out both;
}

@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  position: relative;
  width: min(880px, 92vw);
  aspect-ratio: 1400 / 900;
  overflow: hidden;
  background: #050505 url("assets/background-void.jpg") center / cover no-repeat;
  clip-path: polygon(1.4% 2%, 22% 1%, 42% 2.2%, 63% 1%, 98.7% 2.8%, 99.3% 21%, 98% 43%, 99.4% 67%, 98.2% 98%, 75% 97%, 48% 98.8%, 27% 97.2%, 1.8% 98.5%, 2.4% 72%, 1% 46%, 2.2% 22%);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.8));
  animation: panel-in 240ms cubic-bezier(.18,.8,.26,1.15) both;
}

@keyframes panel-in { from { transform: translateY(20px) rotate(.8deg) scale(.97); } to { transform: none; } }

.modal-card-art { display: none; }
.modal-sigil { position: absolute; right: 1%; bottom: -12%; width: 29%; opacity: .2; mix-blend-mode: screen; }

.modal-ink {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(210,15,29,.2), transparent 22%, transparent 78%, rgba(210,15,29,.12)),
    url("assets/source-poster.jpg") center / cover no-repeat;
  opacity: .2;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.8);
}

.modal-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.modal-panel::before {
  inset: 4.6% 3.6%;
  border: 4px solid var(--red);
  box-shadow: inset 0 0 0 2px rgba(238,232,223,.8);
  clip-path: polygon(0 1%, 20% 0, 42% 1%, 68% 0, 100% 1%, 99% 20%, 100% 50%, 99% 100%, 70% 99%, 40% 100%, 0 99%, 1% 65%, 0 35%);
}

.modal-copy {
  position: absolute;
  z-index: 3;
  inset: 18% 11% 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--red-bright);
  font-size: clamp(.52rem, 1.15vw, .78rem);
  letter-spacing: .18em;
}

.modal-copy h1 {
  margin: 0;
  max-width: 80%;
  color: var(--paper);
  font-family: "DejaVu Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 4.8rem);
  line-height: .88;
  letter-spacing: -.075em;
  text-wrap: balance;
  text-shadow: 3px 3px 0 rgba(0,0,0,.85);
}

.modal-intro {
  margin: 1rem 0 1.2rem;
  max-width: 420px;
  color: rgba(238,232,223,.72);
  font-size: clamp(.62rem, 1.3vw, .84rem);
  line-height: 1.6;
}

.ca-block { width: min(490px, 100%); }
.ca-label { display: block; margin-bottom: .35rem; color: var(--red-bright); font-size: .58rem; letter-spacing: .15em; }

.ca-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .78rem .9rem .78rem 1rem;
  color: var(--paper);
  border: 2px solid var(--paper);
  background: rgba(5,5,5,.86);
  box-shadow: 6px 6px 0 var(--red);
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease;
}

.ca-value span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.55rem, 1.3vw, .76rem); }
.ca-value b { flex: 0 0 auto; color: var(--red-bright); font-size: .58rem; letter-spacing: .1em; }
.ca-value:hover, .ca-value:focus-visible { border-color: var(--red-bright); background: rgba(210,15,29,.16); outline: none; }
.copy-status { display: block; min-height: 1rem; margin-top: .35rem; color: var(--red-bright); font-size: .58rem; letter-spacing: .08em; }

.modal-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .55rem; }

.signal-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 178px;
  justify-content: space-between;
  padding: .82rem 1rem;
  color: var(--paper);
  background: var(--red);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--paper);
  font-weight: 800;
  font-size: .65rem;
  text-decoration: none;
  letter-spacing: .08em;
  transition: transform 150ms ease, background 150ms ease;
}

.signal-link:hover, .signal-link:focus-visible { transform: translate(-2px, -2px) rotate(-1deg); background: var(--red-bright); outline: none; }
.signal-link span { font-size: 1rem; }
.buy-link { background: var(--paper); color: var(--black); }
.buy-link:hover, .buy-link:focus-visible { background: var(--red-bright); color: var(--black); }

.modal-close {
  position: fixed;
  top: 3vh;
  right: 3vw;
  z-index: 2;
  width: 48px;
  height: 48px;
  color: var(--paper);
  border: 1px solid var(--red-bright);
  background: var(--black);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.modal-close:hover, .modal-close:focus-visible { color: var(--black); background: var(--red-bright); outline: none; }

@media (max-width: 720px) {
  .viewport { min-height: 0; }
  .scene { width: max(100vw, calc(100svh * var(--scene-ratio))); }
  .modal-copy { inset: 20% 9% 8%; }
  .modal-intro { margin: .65rem 0 .75rem; max-width: 70%; }
  .ca-value { padding: .58rem .7rem; }
  .modal-links { gap: .45rem; }
  .signal-link { min-width: 130px; padding: .6rem .7rem; font-size: .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}