/*
 * Arcade launcher: a wall of game boxes standing on shelves, filling the window.
 *
 * Adding a game: copy one <li> in index.html, point its href and the <img> src at
 * games/<id>/ and games/<id>/cover.svg (an original ~3:4 cover, subject in the centre),
 * give the link the class game-card--<id>, and add one rule below the existing ones:
 *   .game-card--<id> { --accent: <colour>; }   (optional: --cover-y: <percent> to aim tall/wide crops)
 * The layout adapts to the number of cards on its own.
 */

:root {
  --wall: #0a0c13;
  --wall-light: #161a26;
  --text: #f1ede0;
  --text-dim: #d3cfc2;
  --title: #f4e58a;
  --focus: #ffe79a;
  --gap: clamp(0.75rem, 1.6vw, 1.5rem);
  --shelf: 0.6rem;
  --box-min-height: 16rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(255, 214, 150, 0.13), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9rem),
    linear-gradient(var(--wall-light), var(--wall) 60%);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.launcher {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0.75rem, 1.8vw, 1.5rem) clamp(1rem, 2.4vw, 2.25rem) calc(clamp(0.75rem, 1.8vw, 1.5rem) + var(--shelf));
}

.launcher-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 1rem;
  text-align: center;
}

.launcher-header h1 {
  margin: 0;
  color: var(--title);
  font: italic 400 clamp(1.9rem, 3.4vw, 2.7rem)/1 Georgia, "Times New Roman", serif;
  text-shadow: 0 0 22px rgba(244, 229, 138, 0.4);
}

.launcher-tagline { margin: 0; color: var(--text-dim); opacity: 0.8; }

/* --- The shelves: one flex row per shelf; boxes stretch to fill width and height. --- */

.game-list {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: calc(var(--gap) + var(--shelf)) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Columns per row, by card count, window width and window shape: one row of tall boxes
 * while every box stays wide enough (no taller than about 1:2.2), otherwise balanced
 * rows. All rules share one specificity, so the later one wins; a short last row
 * stretches its boxes.
 */
.game-list { --cols: 1; }

@media (min-width: 560px) {
  .game-list:has(> li:nth-child(1)) { --cols: 2; }
}
@media (min-width: 900px) {
  .game-list:has(> li:nth-child(5)) { --cols: 3; }
  .game-list:has(> li:nth-child(7)) { --cols: 4; }
}
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  .game-list:has(> li:nth-child(1)) { --cols: 3; }
  .game-list:has(> li:nth-child(4)) { --cols: 2; }
  .game-list:has(> li:nth-child(5)) { --cols: 3; }
  .game-list:has(> li:nth-child(7)) { --cols: 4; }
}
@media (min-width: 1080px) and (min-aspect-ratio: 3/2) {
  .game-list:has(> li:nth-child(4)) { --cols: 4; }
  .game-list:has(> li:nth-child(5)) { --cols: 3; }
  .game-list:has(> li:nth-child(7)) { --cols: 4; }
}
@media (min-width: 1340px) and (min-aspect-ratio: 2/1) {
  .game-list:has(> li:nth-child(5)) { --cols: 5; }
  .game-list:has(> li:nth-child(6)) { --cols: 3; }
  .game-list:has(> li:nth-child(7)) { --cols: 4; }
}
@media (min-width: 1600px) and (min-aspect-ratio: 5/2) {
  .game-list:has(> li:nth-child(6)) { --cols: 6; }
  .game-list:has(> li:nth-child(7)) { --cols: 4; }
}
@media (max-width: 559px) {
  :root { --box-min-height: 17rem; }
}

.game-list > li {
  position: relative;
  display: flex;
  flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.5px);
  min-height: var(--box-min-height);
}

/* A plank under every box; side by side they join into one shelf per row. */
.game-list > li::after {
  content: "";
  position: absolute;
  left: calc(var(--gap) / -2 - 0.5px);
  right: calc(var(--gap) / -2 - 0.5px);
  bottom: calc(var(--shelf) * -1 - 2px);
  height: calc(var(--shelf) + 2px);
  background: linear-gradient(#3a2a20, #1a120d 70%, #0d0907);
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 220, 170, 0.18);
  pointer-events: none;
}

/* --- A game box --- */

.game-card {
  --accent: var(--title);
  --cover-y: 40%;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius);
  background: #10121a;
  box-shadow: 0 0.9rem 1.6rem -0.6rem rgba(0, 0, 0, 0.75);
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s, box-shadow 0.22s;
}

.game-card-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--cover-y);
  transition: transform 0.4s ease;
}

/* Box sheen: a faint highlight down the left edge, like light on a printed box. */
.game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.1), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.game-card-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(2.5rem, 9vh, 5rem) clamp(0.9rem, 1.6vw, 1.4rem) clamp(0.9rem, 1.6vw, 1.3rem);
  background: linear-gradient(to top, rgba(4, 5, 10, 0.94), rgba(4, 5, 10, 0.82) 45%, rgba(4, 5, 10, 0));
}

.game-card-name {
  color: var(--accent);
  font: italic 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.05 Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}

.game-card-text {
  max-width: 34rem;
  color: var(--text-dim);
  font-size: clamp(0.85rem, 0.95vw, 0.98rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 2.2rem -0.2rem color-mix(in srgb, var(--accent) 45%, transparent),
    0 1.2rem 2rem -0.6rem rgba(0, 0, 0, 0.8);
}

.game-card:hover .game-card-cover,
.game-card:focus-visible .game-card-cover { transform: scale(1.045); }

.game-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* --- Per-game accents --- */
.game-card--dewlight { --accent: #e2f27a; --cover-y: 70%; }
.game-card--cogfall { --accent: #f3c377; --cover-y: 25%; }
.game-card--lanternfall { --accent: #ff9d7e; }
.game-card--foldaway { --accent: #ff7a52; }

@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-card-cover { transition: none; }
  .game-card:hover,
  .game-card:focus-visible,
  .game-card:hover .game-card-cover,
  .game-card:focus-visible .game-card-cover { transform: none; }
}