/* ===============================
   SKILL — базовые стили и ресеты
   =============================== */

@font-face {
  font-family: "Montserrat";
  src: local("Montserrat");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important; /* без width:100vw, чтобы не ловить горизонтальный скролл */
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0f1012;
  color: #fff;
  cursor: default;
  transform: none !important; 
}

/* Глобальные переменные */
:root{
  --container-px: 20px;
  --consent-h: 80px;
  --consent-gap: 16px;
}

.section {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 var(--container-px);
  position: relative;
  z-index: 1;
}

.card {
  background: rgba(35,34,39,0.92);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,.4);
  padding: 20px;
}
.card h2 { font-weight: 900; font-size: 1.45rem; margin-bottom: 10px; color:#f72d59; }

a, button, .nav-btn, .consent-btn, .consent-dismiss, .booking-btn { min-height: 44px; }

/* Фон: только шум + тонкая сетка */
body.club-body {
  background-image: url("img/noise.png");
  background-repeat: repeat;
  background-attachment: fixed;
  padding-bottom: 0;
}

body.club-body::before{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}

/* HEADER — капсула */
header.site-header { position: relative; z-index: 10; }
.header-shell {
  max-width: 1200px; margin: 14px auto 6px; padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,26,29,0.80), rgba(24,26,29,0.72));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
}
.header-nav a { padding: 8px 8px; border-radius: 8px; }
.header-nav a:hover { background: rgba(255,255,255,0.06); }

/* HERO */
.hero-split { display:flex; gap:20px; align-items:stretch; }
.hero-left { flex: 1 1 50%; display:flex; flex-direction:column; justify-content:center; }
.hero-right { flex: 1 1 50%; display:flex; align-items:center; justify-content:center; }
.hero-img {
  width:100%; height:100%;
  max-height: clamp(200px, 35vh, 300px);
  object-fit:cover; border-radius:16px;
  clip-path: inset(0 round 16px);
}
@media (max-width: 900px){ .hero-split { flex-direction:column; } }

.hero-booking {
  font-size: 1.05rem; font-weight: 600; color: #fff;
  background: rgba(247, 45, 89, 0.18);
  border-left: 4px solid #f72d59;
  padding: 10px 14px; border-radius: 8px; margin-top: 14px; line-height: 1.5;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
}
@media (max-width: 500px){ .hero-booking { font-size: .95rem; } }

.booking-btn {
  display: inline-flex; align-items:center; justify-content:center;
  margin-top: 14px; background: linear-gradient(90deg, #cd002c 0%, #f72d59 100%);
  color:#fff; font-weight:700; font-size:1rem; padding:12px 22px; border-radius:10px; text-decoration:none;
  box-shadow: 0 0 15px rgba(247,45,89,0.35); transition: background .2s, transform .15s;
  min-width: 160px; text-align:center;
}
.booking-btn:hover{ background: linear-gradient(90deg, #f72d59 0%, #ff517e 100%); transform: translateY(-1px); }
@media (max-width: 500px){ .booking-btn{ width:100%; } }

/* ====== ПРАЙС ====== */
/* Общая большая таблица (десктоп/планшет) */
.price-table { width:100%; border-collapse: separate; border-spacing:0; overflow:hidden; border-radius:12px; }
.price-table th, .price-table td {
  padding: 11px 12px; border-bottom: 1px solid #2e2d33; text-align: center; vertical-align: middle;
}
.price-table th {
  background:#1f1e23; text-align:center; font-weight:800; border-bottom: 1.5px solid #3a3941;
  position: sticky; top: 0; z-index: 1;
}
.price-table tbody tr:nth-child(even) td { background: #222126; }
.price-table tbody tr:hover td { background:#26252b; }
.price-table th:not(:last-child), .price-table td:not(:last-child) { border-right: 1px solid #3a3941; }

/* Контейнер для мобильных таблиц (по-умолчанию скрыт) */
.price-tables--mobile { display: none; }

/* На узких экранах: прячем большую таблицу, показываем две компактных */
@media (max-width: 560px){
  .price-table--full { display: none; }

  .price-tables--mobile {
    display: grid;
    gap: 12px;
  }

  .price-tables--mobile .price-table th,
  .price-tables--mobile .price-table td {
    padding: 10px 10px;
  }
}

/* ====== ЖЕЛЕЗО ====== */
.specs-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.specs-grid .spec-card { background:#1f1e23; border-radius:12px; padding:12px 14px; }
.specs-grid .spec-card h3 { font-weight:800; margin-bottom:8px; color:#fff; }
.specs-grid .spec-card ul { margin-left: 16px; list-style: disc; }
.specs-grid .spec-card li { margin:6px 0; }
@media (max-width: 1200px){ .specs-grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 720px){ .specs-grid{grid-template-columns:1fr;} }

/* ====== Установленные игры ====== */
.games-card { border:1px solid rgba(247,45,89,0.22); box-shadow: inset 0 0 0 1px rgba(205,0,44,0.15); }
.games-grid { columns: 2; column-gap: 24px; }
.games-grid ul { break-inside: avoid; padding-left: 18px; list-style: disc; }
.games-grid li { font-size:1.05rem; line-height:1.5; margin:4px 0; }
@media (max-width: 900px){ .games-grid{columns:1;} }

/* ====== Настольные игры ====== */
.boards-wrap { display:grid; grid-template-columns: 1fr 1.1fr 0.9fr; gap: 14px; align-items: stretch; }
.board-col { min-height: 320px; }

@media (max-width: 430px){
  .boards-wrap { grid-template-columns: 1fr; }
  .board-col { min-height: 0; }
}

.photo-viewport {
  height: clamp(220px, 38vh, 340px);
  overflow: hidden; border-radius: 12px; border: 1px solid #3b3a41; background:#1f1e23;
  cursor: pointer; display:flex; align-items:center; justify-content:center;
}
.photo-viewport img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; user-select: none; -webkit-user-drag: none; }

.board-list { max-height: 340px; overflow: auto; padding-right: 6px; scrollbar-width: none; border: 1px solid #3b3a41; border-radius: 12px; background:#1f1e23; cursor: grab; }
.board-list::-webkit-scrollbar { display: none; }
.board-list:active { cursor: grabbing; }
.board-list ul { padding:10px; list-style:none; margin:0; }
.board-list li { background:#242329; border:1px solid #3b3a41; border-radius:10px; padding:8px 10px; margin:6px 0; font-weight:600; line-height:1.4; }
@media (max-width: 430px){ .board-list { max-height: none; } }

/* ====== Галерея ====== */
.club-swiper { border-radius: 16px; overflow: hidden; }
.swiper-slide img { display:block; width:100%; height: clamp(200px, 40vh, 380px); object-fit:cover; user-select:none; }
.swiper-nav { position:relative; display:flex; justify-content:space-between; margin-top:8px; }
.nav-btn { background:#cd002c; color:#fff; border:0; border-radius:10px; padding:8px 12px; cursor:pointer; }
.nav-btn:hover{ background:#f72d59; }

/* ====== Футер ====== */
.footer-main {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 28px auto 36px;
  padding: 18px 20px;
  background: rgba(24, 26, 29, 0.82);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  text-align: center;
}
.section:last-of-type { margin-bottom: 28px; }

/* ====== Кнопка "Наверх" — поверх всего ====== */
#scrollTopBtn { z-index: 100000; }

/* Адаптивная типографика */
h1 { font-size: clamp(1.4rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.45rem); }

/* Меньше анимаций для тех, кому это важно */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===============================
   NEW: Главная — верхние кнопки и центр логотипа
   =============================== */

.hero-logo-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.hero-logo-wrap img{ max-width:min(700px,98vw); width:100%; height:auto; display:block; }

.hero-actions{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 16px;
}
.hero-actions .booking-btn{ width:100%; margin-top:0; }
@media (max-width: 980px){ .hero-actions{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .hero-actions{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px){ .hero-actions{ grid-template-columns: 1fr; } }

/* ===============================
   NEW: Лайтбокс с кликами по краям
   =============================== */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,16,18,0.94); z-index:10000; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:88vh; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.6); user-select:none; }
.lightbox .ctrl{ position:absolute; background:rgba(0,0,0,0.35); color:#fff; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; }
.lightbox .close{ top:16px; right:16px; font-size:22px; }
.lightbox .prev{ left:16px; }
.lightbox .next{ right:16px; }
/* зоны клика слева/справа для листания */
.lightbox .edge {
  position:absolute; top:0; bottom:0; width:40%; cursor: pointer;
}
.lightbox .edge.left { left:0; }
.lightbox .edge.right{ right:0; }

/* ===============================
   NEW: Адаптация header-меню на мобилках
   =============================== */
@media (max-width: 560px){
  .header-shell{ flex-wrap: wrap; gap: 8px; }
  .header-nav{ width:100%; display:flex; gap:8px; }
  .header-nav a{
    flex:1 1 auto; text-align:center; border:1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
  }
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.hero-actions-row {
  display: grid;
  gap: 12px;
}

.hero-actions-row--wide {
  grid-template-columns: 1fr 1fr;
}

.hero-actions-row--three {
  grid-template-columns: repeat(3, 1fr);
}

.hero-actions-row .booking-btn {
  width: 100%;
  margin-top: 0;
}

/* мобильная версия: все кнопки — столбиком */
@media (max-width: 720px) {
  .hero-actions-row--wide,
  .hero-actions-row--three {
    grid-template-columns: 1fr;
  }
}

.legal-title {
  text-align: center;
  color: #f72d59;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 6px;
}

.legal-updated {
  text-align: center;
  font-size: 1rem;
  color: #aaa;
  margin-bottom: 20px;
}