/* Games showcase. One dark floor, three game stages, chess kept apart.
   The page stays a night floor in both themes so the toggle does not
   turn it back into a paper catalog. Light mode only lifts the floor. */

body.games-index {
  --bg: #07080c;
  --bar: #07080c;
  --ink: #f4f1ea;
  --muted: #c9c2b6;
  --rule: #2c313b;
  --accent: #f4f1ea;
  --on-accent: #111318;
  --link: #f4f1ea;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display: "Newsreader", Georgia, serif;
  background:
    radial-gradient(70% 32% at 70% 0%, rgba(255, 45, 170, 0.16), transparent 55%),
    radial-gradient(40% 28% at 8% 80%, rgba(60, 110, 184, 0.14), transparent 60%),
    var(--bg);
}

[data-theme="light"] body.games-index {
  --bg: #141820;
  --bar: #141820;
  --ink: #f7f4ee;
  --muted: #d5d0c6;
  --rule: #343a46;
}

.showcase {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.billboard {
  background: #100818;
  border: 1px solid #3a2458;
  box-shadow: 0 14px 0 #05030a;
}
.billboard-art { display: block; background: #07061a; line-height: 0; }
.billboard-art img {
  width: 100%;
  height: auto;
  display: block;
}
.billboard-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 18px;
  background: linear-gradient(90deg, #14061f 0%, #071821 100%);
  color: #f4efe8;
}
.coming {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.billboard h2,
.tile h2,
.play h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.billboard h2 a,
.tile h2 a { color: inherit; text-decoration: none; }
.billboard h2 a:hover,
.tile h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blurb { margin: 0; max-width: 38rem; }
.meta { margin: 6px 0 0; font-size: 0.92rem; opacity: 0.85; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.billboard .actions { justify-content: flex-end; }

.aeon .coming { color: #ff9adf; }
.aeon .btn-solid { background: #ff7ad6; color: #1a0620; }
.aeon .btn-solid:hover { background: #f4efe8; color: #1a0620; }
.aeon .btn-line { color: #f4efe8; border-color: #c3b8d4; }
.aeon .btn-line:hover { border-color: #f4efe8; background: transparent; color: #f4efe8; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 12px 0 #05060a;
}
.tile-face {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.tile-bar { padding: 16px 16px 18px; }
.tile .actions { margin-top: 14px; }

.fickle { background: #071018; color: #e7f6f8; border: 1px solid #1c4e58; }
.fickle-art { display: block; line-height: 0; background: #071018; }
.fickle-art img { width: 100%; height: auto; display: block; }
.fickle .coming { color: #8ee7f2; font-family: "Source Sans 3", sans-serif; letter-spacing: 0.14em; }
.fickle h2 { font-family: "Source Sans 3", sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none; }
.fickle .btn-solid { background: #1aa3b0; color: #041316; }
.fickle .btn-solid:hover { background: #d7fbff; color: #041316; }
.fickle .btn-line { color: #e7f6f8; border-color: #7ec9d2; }
.fickle .btn-line:hover { border-color: #e7f6f8; color: #e7f6f8; background: transparent; }

.city { background: #1a140f; color: #f3eadc; border: 1px solid #5a4636; }
.city .tile-face {
  background: linear-gradient(180deg, #0c0a08 0%, #2a2118 55%, #8a5a32 78%, #1a140f 78.6%);
}
.city-name {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 0.92;
  text-align: center;
  color: #f3eadc;
}
.city-name span {
  display: block;
  font-size: 0.48em;
  font-style: italic;
}
.city .coming {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #d7a15a;
  letter-spacing: 0.16em;
}
.city .btn-solid { background: #d7a15a; color: #1c1208; }
.city .btn-solid:hover { background: #f3eadc; color: #1c1208; }

.play {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #161410;
  border: 1px solid #3a342c;
  color: #f6f1e7;
}
.play h2 { font-size: 1.6rem; margin: 0 0 4px; }
.play p { color: #d2c9bb; max-width: 36rem; }
.play .btn-solid { background: #f3e6c8; color: #1a120c; }
.play .btn-solid:hover { background: #fff6df; color: #1a120c; }

.games-index :focus-visible {
  outline: 3px solid #fff6d8;
  outline-offset: 3px;
}
.aeon :focus-visible { outline-color: #ff7ad6; }
.fickle :focus-visible { outline-color: #8ee7f2; }
.city :focus-visible { outline-color: #f0c27a; }

@media (max-width: 800px) {
  .showcase { width: min(100% - 24px, 1120px); padding-top: 20px; }
  .billboard-bar,
  .play { flex-direction: column; align-items: stretch; }
  .billboard .actions,
  .play .btn { justify-content: flex-start; }
  .duo { grid-template-columns: 1fr; }
  .tile-face { min-height: 168px; }
  .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .games-index *, .games-index *::before, .games-index *::after {
    animation: none !important;
    transition: none !important;
  }
}