/* =========================================================
 * ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ
 * ======================================================= */
:root {
 --shop-card-media-height:250px;
 --shop-card-media-height-mobile:290px; /* высота для мобильных */
}

body {
 background-color:#121212;
 color:#e0e0e0;
 font-family:'Inter',sans-serif;
 margin:0;
 padding:0;
 line-height:1.6;
}

body.light-mode { /* на будущее,если понадобится светлая тема */
 background-color:#f0f2f5;
 color:#333;
}

a {
 color:#dd8948;
 transition:color 0.2s ease;
 text-decoration:none;
}
a:hover {
 color:#f0a96a;
}

.container {
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
}

/* =========================================================
 * БАЗОВЫЙ СТИЛЬ ДЛЯ КНОПОК (.btn)
 * ======================================================= */
.btn {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:12px 24px;
 border-radius:10px;
 border:none;
 background-color:#333;
 color:#fff;
 font:600 14px/1 'Inter',sans-serif;
 cursor:pointer;
 text-decoration:none;
 transition:background-color 0.2s ease,color 0.2s ease,transform 0.2s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn:focus-visible {
 outline:2px solid #dd8948;
 outline-offset:2px;
}

/* =========================================================
 * ШАПКА И НАВИГАЦИЯ
 * ======================================================= */
header {
 background-color:#1a1a1a;
 padding:15px 0;
 border-bottom:1px solid #333;
 position:relative;
 z-index:50;
}
header .container {
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:15px;
}
header .logo img,
footer .logo img {
 height:20px;
 filter:none;
 opacity:1;
}

.nav-toggle {
 position:absolute;
 opacity:0;
 pointer.events:none;
}

.nav-toggle-label {
 display:none;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 border-radius:8px;
 border:1px solid #2a2a2a;
 cursor:pointer;
 transition:background-color 0.2s ease,border-color 0.2s ease;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
 display:block;
 width:18px;
 height:2px;
 background-color:#e0e0e0;
 border-radius:1px;
 position:relative;
 transition:transform 0.25s ease,opacity 0.25s ease;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
 content:"";
 position:absolute;
 left:0;
}
.nav-toggle-label span::before { top:-6px; }
.nav-toggle-label span::after { top:6px; }
.nav-toggle:checked + .nav-toggle-label span { transform:rotate(45deg); }
.nav-toggle:checked + .nav-toggle-label span::before {
 transform:rotate(90deg);
 top:0;
}
.nav-toggle:checked + .nav-toggle-label span::after { opacity:0; }

header nav { display:flex; align-items:center; }
.nav-list {
 list-style:none;
 display:flex;
 align-items:center;
 gap:15px;
 margin:0;
 padding:0;
}
.nav-list li { display:flex; }
.nav-list .nav-item {
 color:#e0e0e0;
 font-size:14px;
 padding:5px 10px;
 transition:color 0.2s ease;
}
.nav-list .nav-item:hover,
.nav-list .nav-item:focus { color:#dd8948; }

/* =========================================================
 * ГЛАВНАЯ ЧАСТЬ
 * ======================================================= */
main { padding:30px 0; }

/* --- Верхние баннеры --- */
.top-banners {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:20px;
 margin-bottom:30px;
}
.banner {
 position:relative;
 overflow:hidden;
 border-radius:12px;
 min-height:100px; /* базовое значение */
 display:flex;
 align-items:center;
}

.banner-image {
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 z-index:0;
}
.banner-content {
 position:relative;
 z-index:1;
 padding:16px 20px;
 width:60%;
 max-width:60%;
 text-align:left;
}
.banner h2,
.banner h3 {
 font-size:26px;
 line-height:1.3;
 letter-spacing:0.01em;
 font-weight:600;
 margin:0 0 16px;
 color:#121212;
}
.banner p {
 font-size:15px;
 line-height:1.6;
 letter-spacing:0.005em;
 margin:0 0 18px;
 color:#363636;
}

.main-banner {
 background-color:#e0e0e0;
 color:#121212;
}
.small-banner {
 background-color:#2a2a2a;
 color:#f6f6f6;
}
.small-banner h2,
.small-banner h3 { color:#f6f6f6; }
.small-banner p { color:#eaeaea; }

.main-banner-btn {
 background-color:#000;
 color:#e0e0e0;
 padding:12px 30px;
}
.main-banner-btn:hover {
 background-color:#1a1a1a;
 color:#e0e0e0;
}
.small-banner-btn {
 background-color:#f6f6f6;
 color:#000;
 padding:12px 30px;
}
.small-banner-btn:hover {
 background-color:#fff;
 color:#000;
 opacity:0.9;
}

/* =========================================================
 * СЕКЦИЯ ОФИЦИАЛЬНЫХ ЗЕРКАЛ
 * ======================================================= */
.mirror-section {
 background-color:#1a1a1a;
 border-radius:12px;
 border:1px solid #2a2a2a;
 padding:14px 20px;
 margin-bottom:30px;
 display:flex;
 align-items:center;
 gap:16px;
}
.mirror-section .label {
 color:#9e9e9e;
 font-size:14px;
 white-space:nowrap;
}
.mirror-list {
 display:flex;
 gap:12px;
 flex:1;
 align-items:center;
 min-width:0;
 flex-wrap:nowrap;
}
.mirror-link {
 display:block;
 padding:10px 16px;
 border-radius:8px;
 font-size:14px;
 color:#cfcfcf;
 border:1px solid rgba(224,224,224,0.12);
 background-color:transparent;
 flex:1 1 0;
 min-width:0;
 text-align:center;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.mirror-link.visible { display:block; }
.mirror-link.hidden { display:none; }
.mirror-link:hover {
 border-color:#dd8948;
 color:#f0a96a;
}
.mirror-actions {
 display:flex;
 align-items:center;
 gap:12px;
}
.view-all {
 color:#dd8948;
 white-space:nowrap;
 flex-shrink:0;
 transition:color 0.2s ease;
}
.view-all:hover { color:#f0a96a; }
.copy-mirrors-btn {
 display:inline-flex;
 align-items:center;
 gap:6px;
 padding:10px 18px;
 border-radius:8px;
 border:1px solid rgba(221,137,72,0.4);
 background:rgba(221,137,72,0.12);
 color:#dd8948;
 font:600 13px/1 'Inter',sans-serif;
 cursor:pointer;
 transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.copy-mirrors-btn:hover {
 background:rgba(221,137,72,0.2);
 border-color:#dd8948;
}
.copy-mirrors-btn.copied {
 background:#dd8948;
 color:#1d1207;
}
.mirror-section:not(.expanded) .copy-mirrors-btn { display:none; }

/* Первая ссылка полностью */
.mirror-section:not(.expanded) .mirror-link:nth-of-type(1) {
 overflow:visible;
 text-overflow:clip;
 flex:0 0 auto;
}

/* Вторая сокращена */
.mirror-section:not(.expanded) .mirror-link:nth-of-type(2) {
 flex:1 1 0;
 overflow:hidden;
 text-overflow:ellipsis;
}

/* Раскрытие на две строки */
.mirror-section.expanded { align-items:flex-start; }
.mirror-section.expanded .mirror-list {
 flex-wrap:wrap;
 gap:12px;
}
.mirror-section.expanded .mirror-link {
 display:block;
 flex:1 1 calc(50% - 12px);
 white-space:normal;
 text-overflow:clip;
 overflow:visible;
 text-align:left;
}
.mirror-section.expanded .mirror-link.hidden { display:block; }
.mirror-section.expanded .mirror-link:nth-of-type(1),
.mirror-section.expanded .mirror-link:nth-of-type(2) {
 flex:1 1 calc(50% - 12px);
}

/* =========================================================
 * СЕКЦИЯ БЕЗОПАСНОСТИ
 * ======================================================= */
.safety-block { margin-bottom:30px; }
.safety-block h2 {
 text-align:center;
 font-size:28px;
 margin-bottom:25px;
 color:#ffffff;
}
body.light-mode .safety-block h2 { color:#111111; }

.safety-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:20px;
}
.safety-item {
 background-color:#1a1a1a;
 border-radius:12px;
 padding:22px;
 border:1px solid #2a2a2a;
 text-align:center;
}
.safety-item h3 {
 font-size:18px;
 color:#dd8948;
 margin:0 0 12px;
}
.safety-item p {
 font-size:14px;
 color:#cfcfcf;
}

/* =========================================================
 * ИНФО-БАННЕР
 * ======================================================= */
.info-banner {
 background-color:#222b3b;
 border-radius:12px;
 padding:18px 22px;
 margin-bottom:30px;
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:20px;
 color:#e0e0e0;
}
.info-banner-content {
 margin:0;
 font-size:14px;
 line-height:1.7;
 color:#e0e0e0;
}
.info-banner-content ul {
 margin:0;
 padding-left:20px;
}
.info-banner-content li { margin-bottom:8px; }
.info-banner .close-btn {
 background:none;
 border:none;
 font-size:22px;
 line-height:1;
 cursor:pointer;
 color:#e0e0e0;
 transition:opacity 0.2s ease,transform 0.2s ease;
}
.info-banner .close-btn:hover {
 opacity:0.75;
 transform:scale(1.05);
}

/* =========================================================
 * SEO-БЛОК
 * ======================================================= */
.seo-info {
 background-color:#1a1a1a;
 border-radius:14px;
 border:1px solid #2a2a2a;
 padding:26px 28px;
 margin-bottom:30px;
}
.seo-info h2,
.seo-info h3 {
 color:#f5f5f5;
 margin-top:0;
}
.seo-info p {
 font-size:14px;
 color:#d9d9d9;
 margin-bottom:12px;
}

/* =========================================================
 * КНОПКА "ПЕРЕЙТИ НА МАРКЕТ"
 * ======================================================= */
.entry-section {
 display:flex;
 justify-content:center;
 margin:10px 0 35px;
}
.entry-market-btn {
 background-color:#dd8948;
 color:#1d1207;
 padding:20px 90px;
}
.entry-market-btn:hover {
 background-color:#f0a96a;
 color:#1d1207;
}

/* =========================================================
 * СЕКЦИЯ МАГАЗИНОВ (ЗАГОЛОВОК + ОПИСАНИЕ)
 * ======================================================= */
.shops-header {
 text-align:center;
 margin-bottom:24px;
 padding:24px 28px;
 background-color:#1a1a1a;
 border:1px solid #2a2a2a;
 border-radius:14px;
}
.shops-header h2 { margin-bottom:12px; }
.shops-description {
 max-width:680px;
 margin:0 auto;
 color:#cfcfcf;
}

/* =========================================================
 * СЕТКА МАГАЗИНОВ
 * ======================================================= */
.shop-grid {
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:20px;
 margin-bottom:24px;
}

.shop-card {
 background-color:#1a1a1a;
 border-radius:12px;
 padding:18px;
 border:1px solid #2a2a2a;
 display:flex;
 flex-direction:column;
 position:relative;
 transition:border-color 0.25s ease,box-shadow 0.25s ease,transform 0.25s ease;
 cursor:pointer;
}
.shop-card:hover,
.shop-card.active {
 border-color:#dd8948;
 box-shadow:0 0 14px rgba(221,137,72,0.35);
 transform:translateY(-4px);
}
.shop-card .card-header {
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:5px;
}
.shop-card .shop-name {
 font-weight:600;
 font-size:16px;
 color:#e0e0e0;
}
.shop-card .favorite-icon {
 color:#a0a0a0;
 font-size:18px;
}
.shop-card .verified-icon {
 color:#008000;
 font-size:18px;
 margin-left:6px;
}
.shop-card .online-status {
 font-size:12px;
 color:#8e8e8e;
 margin-bottom:12px;
}
.card-media {
 position:relative;
 height:var(--shop-card-media-height);
 border-radius:10px;
 overflow:hidden;
 margin-bottom:16px;
}
.card-media .card-image {
 width:100%;
 height:100%;
 object-fit:cover;
 transition:opacity 0.25s ease;
}
.card-media .card-description {
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:14px;
 text-align:center;
 font-size:13px;
 line-height:1.5;
 color:#f3f3f3;
 background:rgba(0,0,0,0.75);
 backdrop-filter:blur(2px);
 opacity:0;
 pointer-events:none;
 transition:opacity 0.25s ease;
}
.shop-card.active .card-image { opacity:0; }
.shop-card.active .card-description {
 opacity:1;
 pointer-events:auto;
}
.shop-card .card-footer {
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:13px;
 color:#ccc;
}
.shop-card .rating {
 color:#ffc107;
 font-weight:600;
}

/* =========================================================
 * ФУТЕР
 * ======================================================= */
footer {
 background-color:#1a1a1a;
 padding:22px 0;
 border-top:1px solid #333;
 margin-top:0px;
}
footer .container {
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:15px;
 font-size:14px;
}
footer .footer-links {
 margin:0;
 padding:0;
 list-style:none;
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}
footer .footer-links a { color:#dd8948; }
footer .footer-links a:hover { color:#f0a96a; }
.back-to-top {
 font-size:18px;
 font-weight:bold;
}

/* =========================================================
 * СТРАНИЦЫ С ПРАВИЛАМИ И КЭШБЭКОМ
 * ======================================================= */
.rules-content {
 background-color:#1a1a1a;
 border-radius:12px;
 padding:32px;
 margin-top:30px;
 border:1px solid #2a2a2a;
}
.rules-content h1 {
 font-size:28px;
 margin-bottom:20px;
 color:#e0e0e0;
}
.rules-content h2 {
 font-size:22px;
 margin-top:30px;
 margin-bottom:15px;
 color:#dd8948;
}
.rules-content h3 {
 font-size:18px;
 margin-top:20px;
 margin-bottom:10px;
 color:#dd8948;
}
.rules-content p,
.rules-content li {
 font-size:14px;
 color:#ccc;
 line-height:1.8;
 margin-bottom:10px;
}
.rules-content ul {
 list-style-type:decimal;
 padding-left:20px;
 margin-bottom:15px;
}
.rules-content ul ul {
 list-style-type:lower-alpha;
 margin-top:10px;
}

/* =========================================================
 * АДАПТИВНОСТЬ
 * ======================================================= */
@media (max-width:1200px) {
 .banner-content { padding:22px 24px; width:65%; max-width:65%; }
 .banner h2,
 .banner h3 { font-size:24px; }
}
@media (min-width:768px) and (max-width:991px) {
 .rules-sections {
 grid-template-columns:repeat(2,minmax(0,1fr));
 }
}
@media (max-width:991px) {
 .top-banners { grid-template-columns:1fr; }
 header .container { flex-wrap:wrap; }
 .nav-toggle {
 position:static;
 opacity:1;
 pointer-events:auto;
 width:0;
 height:0;
 }
 .nav-toggle-label { display:flex; }
 header nav { width:100%; }
 .nav-list {
 display:none;
 flex-direction:column;
 align-items:flex-start;
 gap:12px;
 padding:18px 0 0;
 }
 .nav-toggle:checked + .nav-toggle-label + nav .nav-list { display:flex; }
 .mirror-section { flex-direction:column; align-items:flex-start; gap:12px; }
 .mirror-list { width:100%; flex-wrap:wrap; }
 .mirror-actions { width:100%; }
 .mirror-section.expanded .mirror-link { flex:1 1 100%; }
 .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
 .shop-grid { grid-template-columns:1fr; }
 .rules-sections { grid-template-columns:1fr; }
}
@media (max-width:575px) {
 .info-banner,
 .seo-info,
 .shops-header,
 .mirror-section,
 .rules-content { padding:20px; }
 .info-banner { flex-direction:column; }
 .entry-market-btn { width:100%; }
 footer .container {
 flex-direction:column;
 align-items:center;
 justify-content:center;
 text-align:center;
 gap:18px;
 }
 footer .logo { width:100%; display:flex; justify-content:center; }
 footer .footer-links {
 flex-direction:column;
 align-items:center;
 justify-content:center;
 width:100%;
 gap:12px;
 }
 footer .footer-links li { width:auto; }
 footer .footer-links a { margin:0; }
 .mirror-actions { width:100%; justify-content:space-between; }
 .copy-mirrors-btn { flex:1 1 auto; justify-content:center; }
 .card-media { height:var(--shop-card-media-height-mobile); }
 .banner-content { width:75%; max-width:75%; padding:20px 22px; }
 .banner h2,
 .banner h3 { font-size:22px; }
 .banner p { font-size:14px; margin-bottom:16px; }
 .main-banner-btn,
 .small-banner-btn { width:100%; justify-content:center; }
 .nav-toggle-label { margin-left:auto; }
 .rules-sections { gap:20px; margin-top:24px; }
}

.mirror-section.expanded .mirror-link {
 font-size:12px;
 line-height:1.35;
 word-break:break-all; /* или можно break-word */
 letter-spacing:0.2px;
}
.mirror-link { padding:8px 12px; }

.platform-editorial {
  margin-top: 0;
  padding: 56px 0 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.02));
  border-top: 1px solid rgba(255,255,255,0.06);
}

.platform-editorial h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 48px;
  font-weight: 600;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.editorial-item {
  padding: 28px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.editorial-item h3 {
  font-size: 17px;
  margin-bottom: 12px;
  font-weight: 600;
}

.editorial-item p {
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.9;
}

.editorial-note {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  text-align: center;
}

.editorial-note p {
  font-size: 13.5px;
  opacity: 0.7;
}

/* Адаптив */
@media (max-width: 1024px) {
  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .platform-editorial h2 {
    font-size: 24px;
  }
}