@font-face {
  font-family: "Ring Pixel";
  src: url("../assets/fonts/ring-pixel-solid.ttf") format("truetype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #f8ebcf;
  --red: #e21813;
  --steel: #171820;
  --pixel: "Ring Pixel", "Courier New", monospace;
  --dark-metal: url("../assets/ui/dark-texture.webp");
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse min(820px, 85vw) 380px at 50% -55px, #fa1824, #ac0a40 34%, #24153d 67%, transparent 100%),
    linear-gradient(180deg, transparent 56%, #05060a 100%),
    var(--dark-metal) #090d13;
  background-repeat: no-repeat, no-repeat, repeat;
  font: 1rem/1.4 Arial, Helvetica, sans-serif;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  padding: 12px;
  background: #111;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.shell { width: min(100% - 2rem, 960px); margin-inline: auto; }
.header {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding-block: clamp(1.1rem, 4vw, 2.25rem) .85rem;
  z-index: 2;
}
.brand { width: min(68%, 600px); }
.brand img { width: 100%; height: auto; filter: drop-shadow(0 8px 5px #0009); }
.footer a:hover { text-decoration: underline; }
.framed { position: relative; isolation: isolate; }
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: var(--rim, 20px) solid transparent;
  border-image: var(--frame) var(--slice) stretch;
  filter: drop-shadow(0 4px 4px #000c);
}
.trailer {
  --frame: url("../assets/ui/trailer-frame.webp");
  --slice: 28;
  --rim: clamp(12px, 2vw, 23px);
  width: 94%;
  margin-inline: auto;
  padding: clamp(6px, 1.3vw, 13px);
}
.trailer-screen {
  position: relative;
  display: grid;
  aspect-ratio: 16/9;
  background: #05070b;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.trailer-screen > img, .trailer-screen video { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.trailer-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: .3rem .6rem;
  background: #05060bd9;
  text-align: center;
  font-size: clamp(.75rem, 2vw, 1rem);
}
.intro {
  --frame: url("../assets/ui/intro-frame.webp");
  --slice: 36;
  --rim: clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  margin-block: clamp(1.15rem, 3vw, 2rem) 0;
  padding: clamp(1.35rem, 4vw, 2.6rem) clamp(1rem, 5vw, 4rem);
  background: var(--dark-metal) #0a1018;
  clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px);
}
.intro-heading { text-align: center; padding-right: clamp(.75rem, 2vw, 2rem); }
h1, h2, .red-plate { font-family: var(--pixel); text-transform: uppercase; }
.intro h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.65rem); line-height: .98; font-weight: 400; }
.intro-heading img { width: min(88%, 265px); height: auto; margin: .65rem auto 0; }
.intro p {
  margin: 0;
  border-left: 2px solid var(--ink);
  padding-left: clamp(1rem, 3vw, 2.5rem);
  font-size: clamp(1rem, 2.3vw, 1.38rem);
}
.arenas, .features { margin-top: .75rem; scroll-margin-top: 1rem; }
.section-title {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto .65rem;
}
.arena-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.3rem); padding-inline: 2.5%; }
.arena {
  --frame: url("../assets/ui/arena-frame.webp");
  --slice: 24;
  --rim: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 9px;
  margin: 0;
  background: #11131a;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.arena img { width: 100%; height: auto; border-radius: 7px; }
.red-plate img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 3px #000b);
}
.arena figcaption {
  margin: -.25rem .35rem .25rem;
  position: relative;
}
.arena figcaption img { width: 100%; }
.features { margin-top: 1.05rem; }
.feature-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem 0;
  padding: 0 2.5%;
  margin: .85rem auto 0;
}
.feature-grid li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .5rem;
  padding: 0 .5rem;
  text-align: center;
  font-size: clamp(.9rem, 2.1vw, 1.35rem);
  line-height: 1.22;
}
.feature-grid li + li { border-left: 1px solid var(--ink); }
.feature-grid img { width: clamp(39px, 7vw, 68px); height: 50px; object-fit: contain; }
.play { text-align: center; margin: clamp(1.9rem, 5vw, 3.25rem) auto; scroll-margin-top: 1rem; }
.play-cta {
  display: inline-grid;
  place-items: center;
  width: min(100%, 360px);
  min-height: 44px;
  vertical-align: middle;
}
.play-cta:hover img { filter: brightness(1.16) drop-shadow(0 4px 3px #000b); }
.play-cta:active img { filter: brightness(.86) drop-shadow(0 2px 2px #000b); }
.footer { border-top: 3px solid var(--red); margin-bottom: 1rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: .15rem; }
.footer a { display: inline-grid; min-height: 44px; place-items: center; text-decoration: none; }
.footer-inner > * { padding-inline: clamp(.35rem, 2.25vw, 1.5rem); }
.footer-inner > :nth-child(2) { border-left: 1px solid #eee5d0; }
.privacy-link { font-size: .85rem; }
.privacy-page { min-height: 100vh; padding-block: 2rem; }
.privacy-copy {
  --frame: url("../assets/ui/intro-frame.webp");
  --slice: 36;
  --rim: 28px;
  background: var(--dark-metal) #0a1018;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
}
.privacy-copy h1 { margin-top: 0; font-weight: 400; }
@media (max-width: 767px) {
  .header { padding-bottom: 1.1rem; }
  .brand { width: min(72%, 450px); }
  .trailer { width: 100%; }
  .intro { padding-inline: 1.15rem; }
}
@media (max-width: 540px) {
  .intro { grid-template-columns: 1fr; gap: .8rem; text-align: center; padding-inline: 1.45rem; }
  .intro-heading { padding: 0; }
  .intro-heading img { width: min(63%, 225px); }
  .intro p { border-left: 0; padding: 0; }
  .arena-grid { grid-template-columns: 1fr; padding-inline: 0; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .95rem; }
  .feature-grid li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 370px) {
  .shell { width: calc(100% - 1.35rem); }
  .brand { width: 67%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.intro h1 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.intro h1 span { display: block; white-space: nowrap; }

/* Static scanlines keep links and form controls usable. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0002 0 1px, transparent 1px 4px);
}
@media (forced-colors: active) {
  body::after { display: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.access {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vh, 5rem) 1rem 2rem;
  background: radial-gradient(ellipse at 50% 0, #750b27 0, transparent 69%), #090b13;
}
.access-logo {
  width: min(62%, 390px);
  height: auto;
  margin-bottom: clamp(1rem, 3vh, 1.65rem);
}
.access-form {
  position: relative;
  width: min(100%, 600px);
}
.access-form img { width: 100%; height: auto; }
.access-form input:not([type="hidden"]), .access-submit { position: absolute; }
.access-form input {
  left: 10.3%;
  width: 79.2%;
  height: 9.4%;
  padding: 0 clamp(.4rem, 1.2vw, .8rem);
  border: 0;
  background: transparent;
  color: #18120f;
  font: 600 max(16px, 1rem)/1 Arial, sans-serif;
  border-radius: 3px;
}
#access-name { top: 37.5%; }
#access-email { top: 60.7%; }
.access-submit {
  left: 8%;
  top: 75.5%;
  width: 84%;
  height: 16%;
  min-height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.access-submit:hover { background: #fff1; }
.access-submit:disabled { cursor: wait; background: #0004; }
.access-footer {
  margin-top: clamp(1rem, 4vh, 2.25rem);
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-align: center;
}
.access-footer a:last-child { text-decoration: none; }
.access-footer a:last-child:hover { text-decoration: underline; }
.access-error { margin: .5rem 0 0; text-align: center; }
@media (max-width: 640px) {
  .access { padding-top: clamp(3.75rem, 11vh, 6rem); }
  .access-logo { width: min(68%, 320px); margin-bottom: clamp(1.6rem, 4vh, 2.5rem); }
  .access-form { width: min(100%, 480px); }
  .access-form input { left: 10%; width: 80%; height: 9.1%; }
  .access-submit { left: 7.5%; top: 78.5%; width: 85%; height: 13.5%; }
}

.visit-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .2rem .75rem;
  width: fit-content;
  max-width: 100%;
  margin: .45rem auto 1rem;
  padding: .55rem 1rem;
  border: solid transparent;
  border-width: 12px 19px;
  border-image: url("../assets/ui/reference-red-plate.webp") 29 44 fill stretch;
  color: var(--ink);
  font: 1rem/1.2 var(--pixel);
  text-transform: uppercase;
  text-shadow: 2px 2px #160503;
}
.visit-counter span { font-size: 1.2em; }