@font-face {
  font-family: "Cinderbite Text";
  src: url("fonts/CinderbiteText-Regular.woff2") format("woff2");
  font-display: block;
}

:root {
  --bg: #0a0812;
  --panel: #120e1d;
  --line: #2a2338;
  --line-hi: #a8761a;
  --cream: #ffe8b0;
  --cream-hi: #fff4d6;
  --gold: #ffcb3d;
  --dim: #8d84a8;
  --pix: "Cinderbite Text", ui-monospace, Consolas, monospace;
  --col: 832px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--dim);
  font-family: var(--pix);
  font-size: 10px;
  line-height: 13px;
  background:
    radial-gradient(60% 38% at 50% 0%, rgba(255, 122, 24, 0.09), transparent 72%),
    radial-gradient(70% 36% at 50% 100%, rgba(96, 78, 190, 0.10), transparent 72%),
    var(--bg);
}

.cb-px { filter: url(#cb-px); will-change: transform; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 10vh, 112px) 20px 28px;
}

.brand { margin: 0; line-height: 0; }
.brand a { display: block; }
.brand img {
  display: block;
  width: 706px;
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
}

.page > main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  display: flex;
  font-size: inherit;
  font-weight: normal;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--col);
  margin: 56px 0 24px;
  text-transform: uppercase;
}
.label::before,
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.label span { display: inline-block; }

.games {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--col);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 40px 32px;
}
.games > li { min-width: 0; }

.tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.art {
  display: block;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.2s ease;
}
.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.tile:hover .art,
a.tile:focus-visible .art { box-shadow: 0 0 0 1px var(--line-hi); }
a.tile:hover .art img,
a.tile:focus-visible .art img { transform: scale(1.035); }

.art.px img { image-rendering: pixelated; }
a.tile:hover .art.px img,
a.tile:focus-visible .art.px img { transform: none; }

@media (max-resolution: 1dppx) {
  @container (width < 400px) {
    .art.px img { image-rendering: auto; }
  }
}

.cap { display: block; padding: 14px 0 0; }
.name {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: var(--cream);
  transition: color 0.2s ease;
}
a.tile:hover .name,
a.tile:focus-visible .name { color: var(--cream-hi); }

.state {
  display: inline-block;
  margin-top: 8px;
  text-transform: uppercase;
  color: var(--dim);
}
.state::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  vertical-align: 1px;
  background: currentColor;
}
.state.live { color: var(--gold); }

.hz-ktmf  { --hz-a: #f3c52a; --hz-b: #0d0b0c; --hz-edge: #3d3738; --hz-text: #f3c52a; --hz-t1: #fcf4dc; --hz-t2: #f42c2c; }
.hz-purry { --hz-a: #c71c36; --hz-b: #060908; --hz-edge: #555d57; --hz-text: #ded9cc; --hz-t1: #ded9cc; --hz-t2: #c71c36; }

.state.hz::before {
  width: 18px;
  background: linear-gradient(135deg, var(--hz-a) 29.1667%, var(--hz-b) 0 54.1667%, var(--hz-a) 0 79.1667%, var(--hz-b) 0) 0 0 / 6px 6px;
}

.label.tape::before,
.label.tape::after {
  align-self: stretch;
  height: auto;
  border-block: 1px solid var(--hz-edge);
  background: linear-gradient(135deg, var(--hz-a) 26.5625%, var(--hz-b) 0 51.5625%, var(--hz-a) 0 76.5625%, var(--hz-b) 0) 0 0 / 16px 16px;
}
.label.tape span { color: var(--hz-text); }

.page.slim { padding-top: 40px; --col: 960px; }
.brand.small img { width: 353px; }

.teaser {
  max-width: var(--col);
  margin-top: 20px;
}
.page > main.teaser { align-items: stretch; }
.teaser > .back:first-child { margin: 0 0 15px; }
.teaser .label { margin: 0 0 32px; }

.title {
  margin: 0;
  font-size: 40px;
  line-height: 52px;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--hz-t1);
}
.title span { display: block; }
.title span + span { color: var(--hz-t2); }

.pitch {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 26px;
  color: var(--cream);
}
.teaser .state { margin-top: 12px; }
.teaser > .state { align-self: flex-start; }

.shots {
  display: grid;
  gap: 28px;
  margin: 40px 0 0;
}
.shot {
  margin: 0;
  container-type: inline-size;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}
.shot figcaption {
  margin: 8px 0 0;
  text-transform: uppercase;
  color: var(--dim);
}

@media (min-resolution: 1dppx) { @container (width >= 960px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 1.25dppx) { @container (width >= 768px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 1.5dppx) { @container (width >= 640px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 1.75dppx) { @container (width >= 549px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 2dppx) { @container (width >= 480px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 2.25dppx) { @container (width >= 427px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 2.5dppx) { @container (width >= 384px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 2.625dppx) { @container (width >= 366px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 2.75dppx) { @container (width >= 350px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 3dppx) { @container (width >= 320px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 3.5dppx) { @container (width >= 275px) { .shot img { image-rendering: pixelated; } } }
@media (min-resolution: 4dppx) { @container (width >= 240px) { .shot img { image-rendering: pixelated; } } }

.hint {
  margin: 36px 0 0;
  text-transform: uppercase;
  align-self: flex-start;
}

.hint .key {
  display: inline-block;
  margin-right: 5px;
  padding: 3px 5px 2px;
  border: 1px solid currentColor;
  color: var(--hz-text);
}
@media (hover: hover) {
  .hint + .shots { margin-top: 12px; }
  .swap { gap: 0; }
  .swap > .shot { grid-area: 1 / 1; }
  .swap > .paper { opacity: 0; }
  .swap:hover > .paper,
  .swap:focus-visible > .paper { opacity: 1; }
  .swap:hover > .shot:not(.paper) figcaption,
  .swap:focus-visible > .shot:not(.paper) figcaption { visibility: hidden; }
  .swap:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
}
@media (hover: none) {
  .hint { display: none; }
}

.back { margin: 40px 0 0; align-self: flex-start; }

@media (min-width: 1000px) {
  .title span { display: inline-block; }
}

footer {
  margin-top: auto;
  padding-top: 72px;
  width: 100%;
  max-width: var(--col);
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer::before {
  content: "";
  align-self: stretch;
  height: 1px;
  margin-bottom: 28px;
  background: var(--line);
}
footer a {
  display: inline-block;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
footer a:hover,
footer a:focus-visible { color: var(--gold); }

footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
footer svg { display: inline-block; vertical-align: top; }

footer .social {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
}
footer .social a { padding: 6px; }
footer .social svg { margin-right: 7px; color: var(--cream); transition: color 0.2s ease; }
footer .social a:hover svg,
footer .social a:focus-visible svg { color: var(--gold); }

footer .stores {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 14px;
}
footer .titles { display: flex; gap: 14px; }
footer .via { text-transform: uppercase; }
footer .stores a {
  --rule: var(--line);
  padding: 6px 4px;
  margin: -6px -4px;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat 4px 19px / calc(100% - 9px) 1px;
}
footer .stores a:hover,
footer .stores a:focus-visible { --rule: var(--line-hi); }

footer .copy { margin: 22px 0 0; }

.lost { margin-top: 56px; text-align: center; }
.lost .name { margin: 0 0 18px; }
.lost a,
.back a {
  --rule: var(--line);
  display: inline-block;
  padding: 6px 4px;
  margin: -6px -4px;
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat 4px 19px / calc(100% - 9px) 1px;
}
.lost a:hover,
.lost a:focus-visible,
.back a:hover,
.back a:focus-visible { color: var(--gold); --rule: var(--line-hi); }
.lost a:focus-visible,
.back a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 759px) {
  .brand img { width: 353px; }
  .label { margin-top: 44px; }
  .games { grid-template-columns: minmax(0, 400px); }
}

@media (max-width: 392px) and (max-resolution: 1dppx) {
  .brand img { image-rendering: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .art, .art img, .name, footer a, footer .social svg { transition: none; }
  a.tile:hover .art img,
  a.tile:focus-visible .art img { transform: none; }
}