/* /games — pixel look borrowed from the visual novels (Eritreya palette,
   Press Start 2P, notched frames). */

@font-face {
  font-family: "PressStart";
  src: url(/assets/fonts/pressstart-cyr.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}
@font-face {
  font-family: "PressStart";
  src: url(/assets/fonts/pressstart-lat.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

:root {
  --ink: #140c1c;
  --night: #241527;
  --plum: #442434;
  --sand: #f4cca1;
  --ochre: #d27d2c;
  --sun: #f4b41b;
  --rust: #be4a2f;
  --cream: #fff4d6;
  --teal: #2ce8f5;
  --dim: #8b6d9c;
  --px: 4px;
}

* { box-sizing: border-box; }

html { background: #07040a; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-family: "PressStart", "Courier New", monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- backdrop ---------- */
.stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
  pointer-events: none;
}

.crt {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}

/* ---------- pixel frame: square corners cut out, like the novels' dialog box ---------- */
.px-btn,
.cart {
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--frame, var(--cream)),
    0 var(--px) 0 0 var(--frame, var(--cream)),
    calc(var(--px) * -1) 0 0 0 var(--frame, var(--cream)),
    var(--px) 0 0 0 var(--frame, var(--cream)),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--px) rgba(0, 0, 0, 0.55);
}

/* ---------- buttons ---------- */
.px-btn {
  --frame: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  border: 0;
  cursor: pointer;
  transition: transform 0.12s steps(2), background-color 0.12s steps(2);
}
.px-btn:hover,
.px-btn:focus-visible {
  background: var(--cream);
  transform: translate(-2px, -2px);
  outline: none;
}
.px-btn:active { transform: translate(2px, 2px); }

.px-btn--small {
  font-size: 10px;
  padding: 10px 12px;
  color: var(--cream);
  background: var(--night);
}
.px-btn--small:hover,
.px-btn--small:focus-visible {
  color: var(--ink);
  background: var(--sun);
}
.px-btn[aria-pressed="false"] { color: var(--dim); }

.arrow-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid currentColor;
}

/* ---------- layout ---------- */
.bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px max(20px, calc((100vw - 1120px) / 2)) 0;
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 20px 96px;
}

.title {
  margin: 0;
  font-size: clamp(36px, 9vw, 72px);
  font-weight: normal;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--sun);
  text-shadow:
    4px 4px 0 var(--rust),
    8px 8px 0 var(--plum);
}

.intro {
  max-width: 640px;
  margin: 32px auto 0;
  font-size: 12px;
  line-height: 2.2;
  text-align: center;
  color: var(--sand);
}

.empty {
  margin: 72px 0 0;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: var(--dim);
}

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- cartridges ---------- */
/* Flex, not a grid: a short row — even the last one — sits in the middle
   instead of leaving empty columns on the right. */
.grid {
  --card-w: 328px; /* three per row in the 1120px column, margins included */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
  margin-top: 64px;
}

.cart {
  --frame: var(--plum);
  display: flex;
  flex-direction: column;
  flex: 0 1 var(--card-w);
  min-width: 0;
  max-width: calc(100% - var(--px) * 2);
  margin: var(--px);
  background: var(--night);
  transition: transform 0.12s steps(2);
}
.cart:hover,
.cart:focus-visible {
  --frame: var(--sun);
  transform: translate(-4px, -4px);
  outline: none;
}

.cart__shot {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border-bottom: var(--px) solid var(--plum);
}
.cart:hover .cart__shot,
.cart:focus-visible .cart__shot { border-bottom-color: var(--sun); }
.cart__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart__noshot {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--plum) 0 8px, transparent 8px 16px),
    var(--ink);
  opacity: 0.5;
}

.cart__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  padding: 20px 20px 24px;
}

.cart__kind {
  padding: 6px 8px;
  font-size: 8px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--teal);
}
.cart__kind--novel { background: var(--ochre); }
.cart__kind--3d { background: var(--sun); }

.cart__needs {
  font-size: 8px;
  line-height: 1.8;
  color: var(--teal);
}

.cart__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream);
}

/* the ▶ menu cursor from old consoles, shown on the selected cartridge */
.cart__cursor {
  flex: none;
  width: 0;
  height: 0;
  margin-left: -16px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--sun);
  opacity: 0;
  transition: margin-left 0.12s steps(2);
}
.cart:hover .cart__cursor,
.cart:focus-visible .cart__cursor {
  margin-left: 0;
  opacity: 1;
  animation: blink 0.8s steps(1) infinite;
}

.cart__desc {
  margin: 0;
  font-size: 10px;
  line-height: 2;
  color: var(--sand);
  white-space: pre-line;
}

.px-btn--play {
  margin-top: auto;
  pointer-events: none;
}
.cart:hover .px-btn--play,
.cart:focus-visible .px-btn--play { background: var(--cream); }

.cart.is-launching { animation: launch 0.3s steps(1) infinite; }
@keyframes launch { 50% { --frame: var(--cream); filter: brightness(1.6); } }

/* ---------- "rotate your phone" ---------- */
.rotate { display: none; }

/* Touch phones held upright. Tablets are wide enough for the page as is. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) and (max-width: 767px) {
  .bar,
  .wrap { display: none; }
  body { overflow: hidden; }

  .rotate {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 24px;
    text-align: center;
  }
}

.phone {
  width: 72px;
  height: 120px;
  animation: turn 2.6s infinite;
}
.phone__frame { fill: var(--cream); }
.phone__screen { fill: var(--plum); }
.phone__dim { fill: var(--dim); }
.phone__sun { fill: var(--sun); }
.phone__hill { fill: var(--rust); }

/* chunky quarter-turn there and back, like a sprite animation */
@keyframes turn {
  0%, 30% { transform: rotate(0deg); animation-timing-function: steps(3); }
  50%, 85% { transform: rotate(-90deg); animation-timing-function: steps(3); }
  100% { transform: rotate(0deg); }
}

.rotate__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--sun);
}

@media (max-width: 560px) {
  .bar { padding-top: 16px; }
  .wrap { padding-top: 40px; }
  .intro { font-size: 10px; }
  .cart__title { font-size: 13px; }
}

/* ---------- compact: phones in landscape (and any short window) ----------
   ~330–390px of height must fit the header and a whole row of cartridges,
   buttons included, so: title moves into the button bar, the kind badge sits
   on the screenshot, descriptions clamp to two lines, 3–4 cards per row. More
   rows scroll, and the scroll settles on the start of a row. */
@media (max-height: 540px) {
  :root { --px: 3px; }
  html { scroll-snap-type: y proximity; }

  /* The buttons float over the title's row instead of taking one of their own. */
  .bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    padding: 14px 16px 0;
    align-items: flex-start;
    scroll-snap-align: start; /* the top of the page is a resting point too */
  }
  .px-btn--small { font-size: 8px; padding: 8px 10px; gap: 8px; }

  .title {
    font-size: 22px;
    line-height: 30px;
    text-shadow: 2px 2px 0 var(--rust), 4px 4px 0 var(--plum);
  }

  .wrap { max-width: 1280px; padding: 13px 16px 32px; }
  .intro { max-width: 560px; margin: 10px auto 0; font-size: 8px; line-height: 1.9; }
  .empty { margin-top: 40px; font-size: 10px; }

  .grid {
    /* Phones: 3 per row on an iPhone SE, 4 on wider ones. Wide but short
       windows: up to 290px, as long as a whole row still fits the height
       (~220px of header and card text + a 16:9 screenshot). */
    --card-w: min(290px, (100vh - 220px) * 1.77, max(184px, (100vw - 96px) / 4 - 8px));
    gap: 18px 14px;
    margin-top: 14px;
  }

  .cart { scroll-snap-align: start; scroll-margin-top: 12px; }
  .cart:hover,
  .cart:focus-visible { transform: translate(-2px, -2px); }

  /* a label on the seam between screenshot and body, so it hides no logo */
  .cart__kind {
    position: absolute;
    top: -9px;
    left: 10px;
    padding: 4px 5px;
    font-size: 6px;
  }

  .cart__body { position: relative; gap: 8px; padding: 14px 10px 12px; }
  .cart__title {
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cart__cursor { display: none; }
  .cart__needs { font-size: 6px; }
  .cart__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 7px;
    line-height: 1.8;
    white-space: normal;
  }
  .px-btn--play { font-size: 8px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .blink,
  .phone,
  .cart.is-launching,
  .cart:hover .cart__cursor { animation: none; }
  .px-btn,
  .cart { transition: none; }
}