/* Палитра и шрифт — те же, что в медиаматериалах (tools/covergen/style.css). */
@font-face {
  font-family: "Nunito";
  src: url("/static/nunito-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --acc: #F2C13B;
  --plate-top: #2B3470;
  --plate-bot: #161C43;
  --ink: #14152B;
  --paper: #F4F5F8;
  --muted: #5B5D65;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  line-height: 1.55;
}
/* Nunito — витринный шрифт: в файле есть только начертание 700,
   поэтому применяем его только там, где текст жирный. */
.top, .about h1, .related h2, .shots h2, .play-out, .card-title {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
}
.top, .bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; background: var(--plate-bot); color: #fff;
}
.top a { color: #fff; text-decoration: none; font-weight: 700; }
.top nav { display: flex; gap: 1rem; }
.brand { font-size: 1.15rem; }
main { max-width: 960px; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* Игра занимает первый экран целиком и на телефоне тоже. */
.stage { margin: 0 -1rem 1.25rem; background: #000; }
.frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.play-out {
  display: block; text-align: center; padding: 1.2rem; background: var(--acc);
  color: var(--ink); font-size: 1.15rem; text-decoration: none;
}
.about h1 { margin: 0 0 .2rem; font-size: 1.6rem; }
.tagline { margin: 0 0 .8rem; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.tags a {
  display: inline-block; padding: .25rem .7rem; border-radius: 99em;
  background: #fff; color: var(--ink); text-decoration: none; font-size: .9rem;
}
.related h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; }
.cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; list-style: none; }
/* Без картинки нужен верхний отступ, чтобы заголовок не липнул к краю; с картинкой
   отступ сверху убирается — она сама идёт от края (card-art ниже). */
.cards a {
  display: flex; flex-direction: column; gap: .2rem; padding: .9rem 0 .9rem;
  background: #fff; border-radius: 10px; text-decoration: none; color: var(--ink);
  overflow: hidden;
}
.card-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 470;
  object-fit: cover;
  margin-top: -.9rem;
  margin-bottom: .6rem;
  background: var(--plate-bot);
}
.card-title, .card-note { padding: 0 1rem; }
.card-title { font-weight: 700; }
.card-note { color: var(--muted); font-size: .9rem; }

.shots h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; }
.shot-list {
  display: grid; gap: .75rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.shot-list li { display: flex; flex-direction: column; gap: .4rem; }
.shot-list img {
  width: 100%; height: auto; border-radius: 8px; background: var(--plate-bot);
}

.themes { display: grid; gap: .6rem; padding: 0; list-style: none; }
.themes li { display: flex; flex-direction: column; gap: .2rem; background: #fff;
  border-radius: 10px; padding: .9rem 1rem; }
.themes a { display: flex; justify-content: space-between; gap: 1rem;
  text-decoration: none; color: var(--ink); }
.theme-title { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; }
.theme-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.theme-intro { color: var(--muted); font-size: .9rem; }

.facts, .contacts { display: grid; gap: .6rem; padding: 0; list-style: none; margin: 0 0 1rem; }
.facts li { display: flex; align-items: baseline; gap: .6rem; }
.fact-value { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem; }
.fact-label, .contact-label { color: var(--muted); }
.contacts li { display: flex; gap: .6rem; flex-wrap: wrap; }