:root {
  --purple: #a5121d;
  --teal: #ff3b30;
  --lime: #f2c27b;
}

body {
  background: #050507;
}

.progress {
  background: linear-gradient(90deg, #5b070d, #ff3028, #e2b36f);
  box-shadow: 0 0 18px #e51f25;
}

.nav-shell {
  border-color: rgba(227, 48, 51, 0.26);
  background: rgba(5, 5, 8, 0.84);
}

.brand-mark {
  background: #dc2529;
  color: white;
}

.nav-buy {
  background: #ba171e;
  box-shadow: 6px 6px 0 #7c0c13;
}

.hero-art {
  object-position: center center;
  image-rendering: auto;
}

.hero-shade {
  background:
    linear-gradient(90deg, #050507 0%, rgba(5, 5, 7, .86) 27%, rgba(5, 5, 7, .12) 57%, rgba(5, 5, 7, .28) 100%),
    linear-gradient(0deg, #050507 0%, transparent 32%);
}

.pixel-grid {
  background-image:
    linear-gradient(rgba(231, 39, 42, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 39, 42, .065) 1px, transparent 1px);
}

.kicker,
.live,
.portrait-tag,
.charge-meta b,
.ca-box button b,
.ca-box a,
nav a:hover,
.footer-links a:hover {
  color: #f23a36;
}

.kicker span {
  background: #f23a36;
}

h1 {
  text-shadow: 8px 8px 0 rgba(148, 13, 20, .58);
}

h1 em,
h2 em,
footer em,
.token-card h2 {
  color: #e8bd7c;
}

.btn.primary,
.charge-panel button {
  background: #d32227;
  color: white;
  border-color: #d32227;
  box-shadow: 7px 7px 0 #6f080e;
}

.btn:hover {
  box-shadow: 7px 7px 0 #e8bd7c;
}

.story {
  background: linear-gradient(135deg, #08080b, #100708 70%, #180709);
}

.quote {
  border-color: #c92328;
}

.portrait-card {
  min-height: 620px;
  background: #000;
  border-color: rgba(226, 55, 56, .25);
  box-shadow: 18px 18px 0 rgba(120, 8, 14, .32);
}

.portrait-card img {
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
}

.arena {
  background: radial-gradient(circle at 50% 68%, rgba(153, 14, 20, .3), transparent 48%), #060608;
}

.arena-stage {
  background: linear-gradient(180deg, #09090c, #020203);
  border-color: rgba(216, 43, 45, .28);
}

.arena-stage > img {
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 28px 35px rgba(209, 27, 31, .24));
}

.arena-stage.is-charging > img {
  filter: drop-shadow(0 0 30px rgba(235, 41, 42, .8)) saturate(1.18) contrast(1.08);
}

.crosshair {
  border-color: rgba(239, 53, 49, .38);
}

.crosshair::before,
.crosshair::after {
  background: #e62d30;
}

.meter i {
  background: linear-gradient(90deg, #65080d, #e12429, #e5b46d);
  box-shadow: 0 0 18px #d51e23;
}

.roadmap .kicker {
  color: #9c1016;
}

.roadmap .kicker span {
  background: #9c1016;
}

.road-grid article > b {
  color: #a21519;
}

.token-card {
  background: linear-gradient(135deg, rgba(156, 14, 20, .26), transparent 52%);
  border-color: rgba(218, 47, 49, .25);
}

@media (max-width: 900px) {
  .hero-art { object-position: 57% center; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(5, 5, 7, .95), rgba(5, 5, 7, .28)),
      linear-gradient(0deg, #050507, transparent 65%);
  }
}