/* === GOLDEN PANDA SKIN =================================================== */
:root{
  --gp-bg:#0f1013;            /* общий фон (графит) */
  --gp-surface:#13161b;       /* тёмные панели */
  --gp-elev:#191c22;          /* приподнятые блоки */
  --gp-border:#262a33;        /* границы */
  --gp-text:#e9eef6;          /* основной текст (светлый) */
  --gp-muted:#9aa3b2;         /* вторичный текст */
  --gp-gold1:#f7d58b;         /* золото (свет) */
  --gp-gold2:#e8b64e;         /* золото (середина) */
  --gp-gold3:#915f24;         /* золото (тень) */
  --gp-black:#0b0f14;
  --radius-xl:18px; --radius-lg:14px; --radius:12px; --radius-pill:9999px;
  --shadow-1:0 10px 28px rgba(0,0,0,.28);
  --shadow-2:0 16px 44px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--gp-bg);color:var(--gp-text);
  font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
img{display:block;max-width:100%;height:auto}
.container{max-width:1320px;margin:0 auto;padding:0 16px}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;border-radius:var(--radius);
  border:1px solid var(--gp-border);background:var(--gp-elev);
  color:var(--gp-text);font-weight:800;letter-spacing:.2px;text-decoration:none;
  box-shadow:var(--shadow-1);cursor:pointer
}
.btn:hover{filter:brightness(1.06)}
.btn.pill{border-radius:var(--radius-pill)}
.btn--gold{
  background:linear-gradient(180deg,var(--gp-gold1),var(--gp-gold2));
  color:#1a1208;border-color:#7a511d; box-shadow:0 10px 26px rgba(232,182,78,.25), inset 0 1px 0 #ffffffaa
}
.btn--dark{background:#0e1116;color:#fff;border-color:#000}

/* ---------- Шапка ---------- */
.site-header{position:sticky;top:0;z-index:1000;padding:10px 0 0;background:linear-gradient(#0f1116,#0f111600)}
.topbar{
  display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--gp-border);
  border-radius:var(--radius-xl);background:var(--gp-surface);box-shadow:var(--shadow-1)
}
.burger{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--gp-border);
  background:var(--gp-elev);color:#d2d8e1}
.burger:hover{color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:168px;height:auto}

.gp-search{position:relative;flex:1}
.gp-search input{
  width:100%;height:40px;border:1px solid var(--gp-border);border-radius:var(--radius-pill);
  padding:0 14px 0 42px;background:#0e1116;color:#e9eef6;outline:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-1)
}
.gp-search input::placeholder{color:#a9b3c1}
.gp-search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9aa3b2}

/* Топ‑навигация (Casino / Sports) */
.topnav{display:flex;gap:10px;margin-left:8px}
.topnav .chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  background:var(--gp-elev);border:1px solid var(--gp-border);color:#dfe6f2;font-weight:800
}
.topnav .chip svg{color:var(--gp-gold2)}
.topnav .chip.is-active{background:#0e1116}

/* ---------- Дроуер ---------- */
.drawer{position:fixed;inset:0;z-index:1400;pointer-events:none}
.drawer[aria-hidden="true"]{visibility:hidden}
.drawer[aria-hidden="false"]{visibility:visible;pointer-events:auto}
.drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.drawer__panel{
  position:absolute;top:0;left:0;height:100%;width:min(90vw,360px);
  transform:translateX(-100%);transition:transform .28s ease;
  background:#0e1116;border-right:1px solid var(--gp-border);box-shadow:20px 0 40px rgba(0,0,0,.5)
}
.drawer[aria-hidden="false"] .drawer__overlay{opacity:1}
.drawer[aria-hidden="false"] .drawer__panel{transform:translateX(0)}
.drawer__nav{height:100%;overflow:auto;padding:12px}
.drawer__list{list-style:none;margin:0;padding:0}
.drawer__list a{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;text-decoration:none;
  color:#e9eef6;border:1px solid transparent
}
.drawer__list a:hover{background:#0b0f14;border-color:var(--gp-border)}

/* ---------- HERO (фон без видео) ---------- */
.hero.gp-hero{
  position:relative;border-radius:var(--radius-xl);margin:12px 0 16px;overflow:hidden;
  background:#000 url('/wp-content/uploads/2025/09/gp-hero.webp') center/cover no-repeat;
  box-shadow:var(--shadow-2)
}
.hero.gp-hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.15) 100%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px;min-height:420px;padding:20px 0}
.hero-card{max-width:640px}
.hero-title{margin:0 0 8px;font-weight:900;font-size:clamp(28px,4.6vw,46px);line-height:1.05;color:#fff}
.hero-subtitle{margin:0 0 14px;color:#ccd5e3;font-weight:700}
.hero-cta{height:46px;padding:0 22px;border-radius:22px}

/* ---------- Блоки/ряды ---------- */
.section{margin:18px 0 36px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.section-title{margin:0;font-size:clamp(18px,2.4vw,22px);font-weight:900;color:#fff}
.tray{background:var(--gp-surface);border:1px solid var(--gp-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-1);padding:clamp(12px,2vw,18px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.promo-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#0b0f14;box-shadow:var(--shadow-1)}
.card-overlay{position:absolute;inset:auto 0 0 0;padding:14px 16px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
.card-overlay p{margin:0;font-weight:700}

/* Рельсы/игры */
.scroll-mask{position:relative;overflow:hidden}
.scroll-row{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll-row::-webkit-scrollbar{display:none}
.scroll-row > *{scroll-snap-align:start}
.scroll-row.games{--w:230px}
@media (max-width:1240px){.scroll-row.games{--w:210px}}
@media (max-width:980px){.scroll-row.games{--w:188px}}
@media (max-width:740px){.scroll-row.games{--w:160px}}
.game-card{width:var(--w);text-decoration:none;color:inherit}
.game-card .thumb{width:100%;aspect-ratio:1/1;border-radius:16px;background:#05070a;overflow:hidden;box-shadow:var(--shadow-2);border:1px solid var(--gp-border)}
.game-card img{width:100%;height:100%;object-fit:cover}
.game-title{margin:8px 2px 0;font-weight:800;font-size:14px;color:#fff;text-align:center}
.arrow-btn,.arrow{width:38px;height:38px;border-radius:12px;border:1px solid var(--gp-border);background:var(--gp-elev);color:#e9eef6;display:inline-grid;place-items:center;box-shadow:var(--shadow-1)}
.arrow-btn:hover,.arrow:hover{filter:brightness(1.1)}

/* Providers (тёмные плитки) */
.providers .provider-card{width:260px;height:120px;border-radius:16px;background:#1a1e25;border:1px solid var(--gp-border);box-shadow:var(--shadow-1); display: flex;
    justify-content: center;}
.providers .provider-card img{filter:brightness(.96)}

/* ---------- Футер ---------- */
.site-footer{background:#0b0f14;color:#dfe6f2;margin-top:18px;padding-top:24px;border-top:1px solid var(--gp-border)}
.footer-top{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-col h4,.foot-col p{margin:0 0 8px;font-weight:900;color:#fff}
.foot-col a{display:block;color:#cfd7e6;opacity:.9;text-decoration:none;margin:6px 0}
.foot-col a:hover{opacity:1}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-actions{display:flex;gap:10px;margin:10px 0}
.footer-actions .btn{height:38px;padding:0 14px;border-radius:14px}
.legal{border-top:1px solid var(--gp-border);margin-top:20px;padding:14px 0;color:#9aa3b2;font-size:14px}

/* ---------- Адаптив ---------- */
@media (max-width:900px){ .brand img{width:148px} }
@media (max-width:720px){
  .topbar{flex-wrap:wrap;gap:8px}
  .gp-search{order:3;flex-basis:100%}
  .hb-right{order:2;margin-left:auto}
}
@media (max-width:520px){
  .btn{height:38px;padding:0 12px}
  .hero-inner{grid-template-columns:1fr;min-height:unset;padding:16px 0}
}

/* На всякий случай убираем “капсы” старой темы */
img.cap.cap-top, img.cap.cap-bottom{display:none !important}

/* === RAIL / .rail-track — Golden Panda ================================== */
/* Каркас секции (опционально, если уже есть — можно пропустить) */
.rail{
  background: var(--gp-surface, #13161b);
  border: 1px solid var(--gp-border, #262a33);
  border-radius: var(--radius-xl, 18px);
  padding: 12px;
  box-shadow: var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
  margin: 18px 0;
}
.rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 2px 4px 10px; margin:0 0 6px;
  border-bottom: 1px solid var(--gp-border, #262a33);
}
.rail-head .section-title{ margin:0; font-weight:900; color:#fff }

/* Сам трек: горизонтальная сетка с снапом и «приглушёнными» краями */
.rail-track{
  --gap: 16px;          /* расстояние между плитками */
  --tile: 230px;        /* базовая ширина плитки */
  display: grid;
  grid-auto-flow: column;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  /* маска краёв (фейд по 28px с обеих сторон) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.rail-track::-webkit-scrollbar{ display:none }  /* WebKit */

.rail-track > *{ scroll-snap-align: start }

/* Карточка игры внутри rail */
.rail .game-card{
  width: var(--tile);
  text-decoration: none;
  color: inherit;
  user-select: none;
}
.rail .game-card .poster{
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  background: #05070a;
  object-fit: cover;
  border: 1px solid var(--gp-border, #262a33);
  box-shadow: var(--shadow-2, 0 16px 44px rgba(0,0,0,.38));
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.rail .game-card:hover .poster{
  transform: translateY(-2px);
  filter: brightness(1.04) saturate(1.03);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}
.rail .game-card .title{
  margin: 8px 2px 0;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  color: #fff;
}

/* Стрелки управления */
.rail-controls{ display:flex; gap:10px }
.rail .arrow{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--gp-border, #262a33);
  background: var(--gp-elev, #191c22);
  color: #e9eef6;
  display: inline-grid; place-items: center;
  box-shadow: var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
  transition: filter .15s ease, transform .05s ease;
}
.rail .prev img{ transform: rotate(180deg) }
.rail .arrow:hover{ filter: brightness(1.1) }
.rail .arrow:active{ transform: translateY(1px) }
.rail .arrow[disabled]{ opacity:.5; pointer-events:none }

/* Бэйдж «NEW»/«HOT», если используете */
.rail .badge{
  position:absolute; top:8px; left:8px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:22px; padding:0 8px; border-radius:999px;
  background: linear-gradient(180deg, var(--gp-gold1,#f7d58b), var(--gp-gold2,#e8b64e));
  color:#1a1208; font-weight:900; font-size:12px;
  box-shadow: 0 6px 14px rgba(232,182,78,.25), inset 0 1px 0 #ffffffaa;
}

/* Компактный модификатор (меньше зазоры/плитки) */
.rail--compact .rail-track{ --gap: 12px; --tile: 188px }

/* Адаптив ширины плиток */
@media (max-width: 1100px){ .rail-track{ --tile: 210px } }
@media (max-width: 820px){  .rail-track{ --tile: 188px } }
@media (max-width: 640px){  .rail-track{ --tile: 160px } }

/* Доступность: видимая фокус‑рамка на карточке */
.rail .game-card:focus-visible .poster{
  outline: 2px solid var(--gp-gold2, #e8b64e);
  outline-offset: 2px;
}

/* === BRANDS ROW (providers) ============================================== */
.scroll-mask.brands{ position:relative; overflow:hidden }

.scroll-row.brands{
  --gap: 14px;
  --tile-w: 200px;   /* ширина плитки */
  --tile-h: 96px;    /* высота плитки */
  display:grid;
  grid-auto-flow:column;
  gap:var(--gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding: 8px 2px 12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* мягкий fade по краям */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.scroll-row.brands::-webkit-scrollbar{ display:none }
.scroll-row.brands > *{ scroll-snap-align:start }

/* Плитка бренда */
.brand-card{
  width:var(--tile-w);
  height:var(--tile-h);
  border-radius:16px;
  background:#1a1e25;
  border:1px solid var(--gp-border, #262a33);
  box-shadow:var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
  display:grid; place-items:center;
  text-decoration:none; color:#e9eef6;
  user-select:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.brand-card:hover{
  transform:translateY(-2px);
  border-color:#3a2a12;
  box-shadow:0 16px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(232,182,78,.22) inset;
  filter:brightness(1.03);
}
.brand-card img{
  max-width:72%;
  max-height:60%;
  object-fit:contain;
  filter:brightness(.98) contrast(1.02);
}

/* Стрелки (если используете .brands-controls .arrow) */
.brands-controls{ display:flex; gap:10px }
.brands-controls .arrow{
  width:38px; height:38px; border-radius:12px;
  border:1px solid var(--gp-border, #262a33);
  background:var(--gp-elev, #191c22); color:#e9eef6;
  display:inline-grid; place-items:center;
  box-shadow:var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
}
.brands-controls .arrow:hover{ filter:brightness(1.1) }
.brands-controls .arrow[disabled]{ opacity:.5; pointer-events:none }

/* Компактные и адаптивные размеры */
.brands--compact .scroll-row.brands{ --tile-w: 168px; --tile-h: 88px }
@media (max-width:1100px){ .scroll-row.brands{ --tile-w: 184px } }
@media (max-width:820px){  .scroll-row.brands{ --tile-w: 168px; --tile-h: 88px } }
@media (max-width:640px){  .scroll-row.brands{ --tile-w: 148px; --tile-h: 80px } }

/* === HOW IT WORKS — GOLDEN PANDA ========================================= */
.how{
  background: var(--gp-surface, #13161b);
  border: 1px solid var(--gp-border, #262a33);
  border-radius: var(--radius-xl, 18px);
  box-shadow: var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
  padding: clamp(18px,3vw,28px) 0;
  margin-top: 18px;
}
.how h2,
.how > .container > p:first-child{
  margin:0 0 12px;
  font-size: clamp(18px,2.6vw,24px);
  font-weight:900;
  color:#fff;
}

/* Сетка карточек */
.how-list{
  counter-reset: step;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap: clamp(12px,2vw,18px);
  list-style:none;
  padding:0; margin:14px 0 0;
}
@media (max-width:980px){ .how-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .how-list{ grid-template-columns:1fr; } }

/* Карточка шага */
.how-list li{
  position:relative;
  background: var(--gp-elev, #191c22);
  border:1px solid var(--gp-border, #262a33);
  border-radius: var(--radius-lg, 14px);
  padding: clamp(14px,2vw,18px);
  box-shadow: var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.how-list li:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  border-color: #3a2a12;
}

/* Номер шага — золотой бейдж */
.how-list li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; top:10px; left:10px;
  width:28px; height:28px; border-radius:50%;
  display:inline-grid; place-items:center;
  background: linear-gradient(180deg, var(--gp-gold1,#f7d58b), var(--gp-gold2,#e8b64e));
  color:#1a1208; font-weight:900; font-size:13px;
  box-shadow: 0 8px 20px rgba(232,182,78,.28), inset 0 1px 0 #ffffffaa;
}

/* Иконка шага */
.how-list img{
  width:72px; height:72px; object-fit:contain; display:block; margin:6px auto 10px;
  background:#0e1116; border:1px solid var(--gp-border, #262a33); border-radius:50%; padding:10px;
  box-shadow: var(--shadow-1, 0 10px 28px rgba(0,0,0,.28));
}

/* Текст */
.how-list .how-title,
.how-list li > p:first-of-type{
  margin:8px 0 4px; text-align:center; font-weight:900; color:#fff; font-size:16px;
}
.how-list .how-desc,
.how-list li > p:nth-of-type(2){
  margin:0; text-align:center; color:#b9c3d2; font-weight:600; font-size:14px;
}

/* Компакт на мобиле */
@media (max-width:520px){
  .how-list img{ width:64px; height:64px; padding:8px }
  .how-list li::before{ width:26px; height:26px; font-size:12px; top:8px; left:8px }
}


/* Палитра и базовая типографика */
.main-content{
  --tbl-surface: #fff;
  --tbl-border:  #e5e7eb;
  --tbl-header-bg: #f8fafc;
  --tbl-header-color:#111827;
  --tbl-row-alt: #fafafa;
  --tbl-row-hover:#f1f5f9;
  --tbl-caption:  #6b7280;
  --tbl-text:     #111827;
}

/* Тёмная тема */
@media (prefers-color-scheme: dark){
  .main-content{
    --tbl-surface:#0b0f14;
    --tbl-border: #243142;
    --tbl-header-bg:#0f1620;
    --tbl-header-color:#e5e7eb;
    --tbl-row-alt:#0d131b;
    --tbl-row-hover:#121b27;
    --tbl-caption:#9aa7b5;
    --tbl-text:#e5e7eb;
  }
}

/* Обёртка для скруглений и прокрутки на мобилках */
.main-content .table-wrap{
  overflow-x:auto;
  border:1px solid var(--tbl-border);
  border-radius:12px;
  background:var(--tbl-surface);
  box-shadow:0 6px 20px rgba(17,24,39,.06);
  margin:1rem 0 1.25rem;
}

/* Базовая таблица (поддержка WP .wp-block-table тоже) */
.main-content table,
.main-content .wp-block-table > table{
  width:100%;
  border-collapse:collapse;
  color:var(--tbl-text);
  min-width:620px; /* чтобы на узких экранах была горизонтальная прокрутка */
  table-layout:auto;
  background:transparent;
}

/* Ячейки */
.main-content th,
.main-content td{
  padding:14px 16px;
  border-bottom:1px solid var(--tbl-border);
  vertical-align:top;
}

/* Заголовок */
.main-content thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--tbl-header-bg);
  color:var(--tbl-header-color);
  font-weight:600;
  text-align:left;
  white-space:nowrap;
}

/* Полосатые строки и ховер */
.main-content tbody tr:nth-child(even){ background:var(--tbl-row-alt); }
.main-content tbody tr:hover{ background:var(--tbl-row-hover); }

/* Подпись таблицы */
.main-content caption{
  caption-side:top;
  text-align:left;
  padding:10px 4px 6px;
  color:var(--tbl-caption);
  font-size:.95rem;
  font-weight:600;
}

/* Числовые колонки (добавьте класс или data-type) */
.main-content th.is-numeric,
.main-content td.is-numeric,
.main-content th[data-type="num"],
.main-content td[data-type="num"]{ text-align:right; }

/* Визуальный фокус для интерактивов внутри ячеек */
.main-content td :where(a,button,input,select,textarea){ outline:none; }
.main-content td :where(a,button,input,select,textarea):focus-visible{
  outline:2px solid #3b82f6; outline-offset:2px; border-radius:6px;
}

/* Индикатор сортировки по ARIA */
.main-content th[aria-sort="ascending"]::after{
  content:"▲"; margin-left:.5ch; font-size:.75em; opacity:.8;
}
.main-content th[aria-sort="descending"]::after{
  content:"▼"; margin-left:.5ch; font-size:.75em; opacity:.8;
}
.main-content th[aria-sort="none"]::after{
  content:"⇵"; margin-left:.5ch; font-size:.75em; opacity:.45;
}

/* Компактная версия: добавьте класс .table--compact на table */
.main-content table.table--compact th,
.main-content table.table--compact td{ padding:10px 12px; }

/* При узких экранах — чуть меньше отступы */
@media (max-width:600px){
  .main-content th, .main-content td{ padding:12px 12px; }
  .main-content caption{ padding:8px 2px 4px; }
}
.main-content td {
    background: #ffffff;
}

.main-content table, .main-content .wp-block-table > table {
	min-width: 100%;
}