/**
 * v2 — /ru/play/{slug} posадочные страницы (SEO landing pages).
 *
 * Общий CSS для всех 6 страниц: browser-space-strategy / online-space-strategy /
 * free-space-mmo / mobile-space-strategy / ogame-alternative / alliance-war-strategy.
 *
 * Layout: hero → quick-stats → benefits-grid → comparison-table → universes-grid → faq → cta
 *
 * @since 2026-05-16 (Sprint 1 Phase D)
 */

/* ===== Quick stats row (under hero) ===== */
.xh-play-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 0 0 40px;
}
.xh-play-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(12, 19, 34, .6);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
}
.xh-play-stat__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 204, 0, .14);
  display: flex; align-items: center; justify-content: center;
  color: #FFCC00;
  flex-shrink: 0;
}
.xh-play-stat__icon svg { width: 18px; height: 18px; }
.xh-play-stat__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--xh-text, #e8ecf2);
  line-height: 1.3;
}

/* ===== Section титул (для блоков ниже hero) ===== */
.xh-play-section {
  margin: 56px 0 32px;
}
.xh-play-section__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  color: var(--xh-text, #e8ecf2);
  text-align: center;
}
.xh-play-section__lead {
  margin: 0 auto 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--xh-text-secondary, #a4b3c8);
  max-width: 720px;
  text-align: center;
}

/* ===== Benefits — 6-icon grid ===== */
.xh-play-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.xh-play-benefit {
  padding: 22px 22px 20px;
  background: rgba(12, 19, 34, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.xh-play-benefit:hover {
  border-color: rgba(255, 204, 0, .3);
  transform: translateY(-1px);
}
.xh-play-benefit__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255, 204, 0, .14);
  display: flex; align-items: center; justify-content: center;
  color: #FFCC00;
  margin: 0 0 14px;
}
.xh-play-benefit__icon svg { width: 22px; height: 22px; }
.xh-play-benefit__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--xh-text, #e8ecf2);
}
.xh-play-benefit__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--xh-text-secondary, #a4b3c8);
}

/* ===== Comparison table ===== */
.xh-play-compare {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(12, 19, 34, .5);
  -webkit-overflow-scrolling: touch;
}
.xh-play-compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}
.xh-play-compare th,
.xh-play-compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 14px;
  line-height: 1.45;
  color: var(--xh-text-secondary, #a4b3c8);
  vertical-align: top;
}
.xh-play-compare thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--xh-text, #e8ecf2);
  background: rgba(255, 255, 255, .03);
}
.xh-play-compare thead th:nth-child(2) {
  color: #FFCC00;
}
.xh-play-compare tbody th[scope="row"] {
  font-weight: 600;
  color: var(--xh-text, #e8ecf2);
  white-space: nowrap;
}
.xh-play-compare tbody tr:last-child th,
.xh-play-compare tbody tr:last-child td { border-bottom: 0; }
.xh-play-compare__check { color: #78ffb4; font-weight: 700; }
.xh-play-compare__cross { color: #ff8888; }

/* ===== Universe cards grid (4 modes на ogame-alternative, 3 на others) ===== */
.xh-play-universes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.xh-play-universe-card {
  display: block;
  padding: 22px 20px;
  background: rgba(12, 19, 34, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.xh-play-universe-card:hover {
  border-color: rgba(255, 204, 0, .4);
  transform: translateY(-2px);
}
.xh-play-universe-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255, 204, 0, .14);
  display: flex; align-items: center; justify-content: center;
  color: #FFCC00;
  margin: 0 0 12px;
}
.xh-play-universe-card__icon svg { width: 20px; height: 20px; }
.xh-play-universe-card__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--xh-text, #e8ecf2);
}
.xh-play-universe-card__desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--xh-text-secondary, #a4b3c8);
}
.xh-play-universe-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #FFCC00;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.xh-play-universe-card__cta svg { width: 12px; height: 12px; }

/* ===== FAQ ===== */
.xh-play-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}
.xh-play-faq__item {
  background: rgba(12, 19, 34, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.xh-play-faq__item[open] { border-color: rgba(255, 204, 0, .3); }
.xh-play-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--xh-text, #e8ecf2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.xh-play-faq__q::-webkit-details-marker { display: none; }
.xh-play-faq__q::after {
  content: '+';
  font-size: 22px;
  color: #FFCC00;
  line-height: 1;
  flex-shrink: 0;
}
.xh-play-faq__item[open] .xh-play-faq__q::after { content: '−'; }
.xh-play-faq__a {
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--xh-text-secondary, #a4b3c8);
}
.xh-play-faq__a a {
  color: #FFCC00;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .xh-play-section__title { font-size: 22px; }
  .xh-play-section { margin: 40px 0 24px; }
}

/* Wave F 2026-05-18: /vs/{competitor} when-list selector. */
.xh-play-when-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xh-play-when-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--xh-bg-card, #0c1322);
  border: 1px solid var(--xh-border, #162035);
  border-radius: 10px;
  color: var(--xh-text, #e8ecf2);
  line-height: 1.55;
}
.xh-play-when-list li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--xh-orange, #e88420);
}

/* Wave F 2026-05-18: listicle (TOP-10 best free MMO). */
.xh-listicle {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  counter-reset: rank;
}
.xh-listicle__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--xh-bg-card, #0c1322);
  border: 1px solid var(--xh-border, #162035);
  border-radius: 12px;
}
.xh-listicle__item--featured {
  border-color: var(--xh-orange, #e88420);
  box-shadow: 0 0 32px rgba(232, 132, 30, 0.12);
}
.xh-listicle__rank {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-size: 48px;
  line-height: 1;
  color: var(--xh-orange, #e88420);
  text-align: center;
}
.xh-listicle__item--featured .xh-listicle__rank {
  font-size: 56px;
}
.xh-listicle__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--xh-text, #e8ecf2);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.xh-listicle__badge {
  background: var(--xh-orange, #e88420);
  color: var(--xh-orange-text, #1a0f00);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.xh-listicle__meta {
  font-size: 13px;
  color: var(--xh-text-muted, #9aa6bd);
  margin: 0 0 12px;
}
.xh-listicle__highlight {
  font-size: 15px;
  color: var(--xh-text, #e8ecf2);
  margin: 0 0 16px;
  line-height: 1.55;
}
.xh-listicle__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 16px 0;
}
.xh-listicle__col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--xh-text-muted, #9aa6bd);
  margin: 0 0 8px;
}
.xh-listicle__col ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--xh-text-secondary, #a4b3c8);
}
.xh-listicle__col li {
  margin-bottom: 4px;
}
.xh-listicle__bestfor {
  font-size: 14px;
  color: var(--xh-text-secondary, #a4b3c8);
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--xh-orange, #e88420);
  border-radius: 4px;
}
.xh-listicle__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--xh-orange, #e88420);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.xh-listicle__cta:hover {
  color: var(--xh-orange-hover, #f59a3e);
}
.xh-listicle__cta svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 720px) {
  .xh-listicle__item { grid-template-columns: 1fr; }
  .xh-listicle__rank { text-align: left; font-size: 36px; }
  .xh-listicle__columns { grid-template-columns: 1fr; }
}