/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #2d3447;
  color: #e8e8e8;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: #96a5d1;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #eaae16;
}

img {
  max-width: 100%;
  height: auto;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-size: 16px;
}

.c4n7p-btn-login {
  background: #96a5d1;
  color: #1d2158;
}

.c4n7p-btn-login:hover {
  background: #7a8bc0;
  transform: translateY(-2px);
}

.j9x2w-btn-signup {
  background: #eaae16;
  color: #1d2158;
}

.j9x2w-btn-signup:hover {
  background: #d19a0f;
  transform: translateY(-2px);
}

/* Header */
.l4n8p-header {
  background: #1d2158;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.q4w7n-header-inner {
  display: grid;
  grid-template-columns: 200px 1fr auto auto auto;
  align-items: center;
  gap: 20px;
}

.z2v6t-logo-img {
  display: block;
}

.p7n4k-nav-menu {
  justify-self: start;
}

.d9m2x-menu-list {
  display: flex;
  list-style: none;
  gap: 25px;
}

.d9m2x-menu-list a {
  color: #e8e8e8;
  font-weight: 500;
  font-size: 15px;
}

.d9m2x-menu-list a:hover {
  color: #eaae16;
}

.w6t3l-online-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
}

.counter-icon {
  font-size: 18px;
}

.r5k8m-header-actions {
  display: flex;
  gap: 12px;
}

.l3q8v-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.l3q8v-burger span {
  width: 28px;
  height: 3px;
  background: #eaae16;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.h6m9k-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: #1d2158;
  z-index: 2000;
  transition: right 0.3s ease;
  padding: 20px;
}

.h6m9k-mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.close-menu {
  background: transparent;
  border: none;
  color: #eaae16;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav ul {
  list-style: none;
}

.mobile-nav li {
  margin-bottom: 20px;
}

.mobile-nav a {
  color: #e8e8e8;
  font-size: 18px;
  font-weight: 500;
}

/* Hero Section */
.y8n3m-hero-section {
  position: relative;
  margin-bottom: 40px;
}

.t4k7p-hero-slider {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.v6l2x-slide {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v6l2x-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  text-align: center;
  z-index: 10;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.slide-title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 15px;
  animation: fadeInUp 0.8s ease;
}

.slide-text {
  font-size: 24px;
  margin-bottom: 25px;
  animation: fadeInUp 1s ease;
}

.w9q4n-hero-btn {
  background: #eaae16;
  color: #1d2158;
  font-size: 20px;
  padding: 15px 40px;
  animation: fadeInUp 1.2s ease;
}

.w9q4n-hero-btn:hover {
  background: #d19a0f;
  transform: scale(1.05);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(29, 33, 88, 0.7);
  color: #eaae16;
  border: none;
  font-size: 48px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.slider-arrow:hover {
  background: rgba(29, 33, 88, 0.9);
}

.slider-arrow-prev {
  left: 20px;
}

.slider-arrow-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #eaae16;
  width: 40px;
  border-radius: 7px;
}

/* Breadcrumbs */
.v9x3q-breadcrumbs {
  padding: 20px 0;
  font-size: 14px;
  color: #96a5d1;
}

.v9x3q-breadcrumbs .separator {
  margin: 0 8px;
  color: #666;
}

.v9x3q-breadcrumbs .current {
  color: #e8e8e8;
}

/* Main Content */
.t5w8r-main {
  padding: 40px 0;
}

.j6p4l-main-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #eaae16;
  text-align: center;
}

.k2m7n-content-wrapper h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 40px 0 20px;
  color: #96a5d1;
}

.k2m7n-content-wrapper h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 30px 0 15px;
  color: #e8e8e8;
}

.k2m7n-content-wrapper p {
  margin-bottom: 15px;
  line-height: 1.8;
}

.k2m7n-content-wrapper ul,
.k2m7n-content-wrapper ol {
  margin: 15px 0 15px 30px;
}

.k2m7n-content-wrapper li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Info Table */
.xj8k2-info-table {
  background: #1d2158;
  padding: 30px;
  border-radius: 15px;
  margin: 30px 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.q9w3r-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.q9w3r-table td {
  padding: 15px;
  border: 1px solid #2d3447;
  text-align: left;
}

.q9w3r-table td:first-child {
  font-weight: 600;
  color: #96a5d1;
  width: 35%;
}

.q9w3r-table tr:hover {
  background: rgba(150, 165, 209, 0.1);
}

/* Screenshots */
.m7n4p-screenshots {
  margin: 40px 0;
}

.k5l8q-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.v2b9x-screenshot-item {
  background: #1d2158;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.v2b9x-screenshot-item:hover {
  transform: translateY(-5px);
}

.v2b9x-screenshot-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.v2b9x-screenshot-item p {
  padding: 15px;
  text-align: center;
  font-weight: 500;
}

/* Tournaments */
.t6y3w-tournaments {
  margin: 40px 0;
}

.r8d5n-tournament-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 20px;
}

.p4k7m-tournament-card {
  background: linear-gradient(135deg, #1d2158 0%, #2d3447 100%);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.p4k7m-tournament-card:hover {
  transform: translateY(-5px);
  border-color: #eaae16;
}

.p4k7m-tournament-card h3 {
  color: #eaae16;
  margin-bottom: 15px;
  font-size: 20px;
}

.p4k7m-tournament-card p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.z9x2c-timer {
  background: rgba(234, 174, 22, 0.2);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
}

.timer-label {
  display: block;
  font-size: 12px;
  color: #96a5d1;
  margin-bottom: 5px;
}

.timer-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #eaae16;
}

.w5q8l-prize {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.w5q8l-prize strong {
  color: #eaae16;
  font-size: 22px;
}

.h3n6r-btn-tournament {
  width: 100%;
  background: #eaae16;
  color: #1d2158;
  font-weight: 600;
}

.h3n6r-btn-tournament:hover {
  background: #d19a0f;
}

/* App Section */
.b8m5t-app-section {
  background: #1d2158;
  padding: 40px;
  border-radius: 15px;
  margin: 40px 0;
}

.j4l9p-app-table {
  margin: 25px 0;
}

.n7q2x-app-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

.c5w8k-app-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #2d3447;
  padding: 15px 25px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.c5w8k-app-btn:hover {
  border-color: #eaae16;
  transform: translateY(-3px);
}

.app-icon {
  font-size: 36px;
}

.app-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.app-text small {
  font-size: 12px;
  color: #96a5d1;
}

.app-text strong {
  font-size: 16px;
  color: #e8e8e8;
}

/* Wheel of Fortune */
.y6t3m-wheel-section {
  background: linear-gradient(135deg, #1d2158 0%, #2d3447 100%);
  padding: 40px;
  border-radius: 15px;
  margin: 40px 0;
  text-align: center;
}

.f9k4l-wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}

#wheelCanvas {
  max-width: 100%;
  height: auto;
}

.x2v7n-spin-btn {
  background: #eaae16;
  color: #1d2158;
  font-size: 20px;
  font-weight: 700;
  padding: 15px 50px;
}

.x2v7n-spin-btn:hover {
  background: #d19a0f;
}

.x2v7n-spin-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.d8p5q-wheel-result {
  background: rgba(234, 174, 22, 0.95);
  padding: 40px;
  border-radius: 15px;
  margin-top: 30px;
  animation: fadeIn 0.5s ease;
}

.result-content h3 {
  color: #1d2158;
  font-size: 28px;
  margin-bottom: 15px;
}

.result-content p {
  color: #1d2158;
  font-size: 18px;
  margin-bottom: 25px;
}

.s4m9w-claim-btn {
  background: #1d2158;
  color: #eaae16;
  font-size: 18px;
  font-weight: 700;
}

.s4m9w-claim-btn:hover {
  background: #2d3447;
}

/* Footer */
.b3n9x-footer {
  padding: 50px 0 30px;
  margin-top: 60px;
}

.n5k8w-footer-content {
  color: #e8e8e8;
}

.footer-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h4 {
  color: #eaae16;
  margin-bottom: 20px;
  font-size: 18px;
}

.footer-menu {
  list-style: none;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #96a5d1;
  font-size: 14px;
}

.footer-contacts {
  list-style: none;
}

.footer-contacts li {
  margin-bottom: 12px;
  font-size: 14px;
}

.footer-description {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: #96a5d1;
}

.x7m4q-payment-methods,
.p9l6k-game-providers {
  margin-bottom: 30px;
}

.x7m4q-payment-methods h4,
.p9l6k-game-providers h4 {
  color: #eaae16;
  margin-bottom: 20px;
  font-size: 18px;
}

.payment-logos,
.provider-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.payment-logos img,
.provider-logos img {
  height: 40px;
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.payment-logos img:hover,
.provider-logos img:hover {
  opacity: 1;
}

.t2w8n-footer-legal {
  border-top: 1px solid rgba(150, 165, 209, 0.2);
  padding-top: 30px;
  text-align: center;
}

.copyright {
  font-weight: 600;
  margin-bottom: 15px;
  color: #eaae16;
}

.legal-text {
  font-size: 13px;
  color: #96a5d1;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Sticky Widget */
.k9m3x-sticky-widget {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #1d2158 0%, #2d3447 100%);
  padding: 15px 20px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: slideUp 0.5s ease;
}

.widget-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-bonus {
  display: flex;
  align-items: center;
  gap: 15px;
}

.bonus-icon {
  font-size: 36px;
}

.bonus-text {
  display: flex;
  flex-direction: column;
}

.bonus-text strong {
  font-size: 18px;
  color: #eaae16;
}

.bonus-text span {
  font-size: 14px;
  color: #96a5d1;
}

.l6q9p-widget-btn {
  background: #eaae16;
  color: #1d2158;
  font-weight: 700;
  padding: 12px 35px;
  text-decoration: none !important;
}

.l6q9p-widget-btn:hover {
  background: #d19a0f;
  color: #1d2158;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Unused styles for obfuscation */
.wp-block-columns {
  display: none;
}
.elementor-section {
  position: relative;
}
.yoast-schema-wrapper {
  display: none;
}
.wp-block-image {
  margin: 0;
}
.has-text-align-center {
  text-align: center;
}
/* INFO block (scoped) */
.container.info {
  background: #1d2158;
  border: 1px solid rgba(150,165,209,.15);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  color: #e8e8e8;
}

/* Typography */
.container.info h2 {
  margin: 22px 0 14px;
  font-size: 28px;
  line-height: 1.25;
  color: #eaae16;
  letter-spacing: .2px;
}
.container.info h3 {
  margin: 18px 0 10px;
  font-size: 20px;
  line-height: 1.35;
  color: #96a5d1;
}
.container.info p {
  margin: 0 0 14px;
  line-height: 1.8;
}
.container.info ul,
.container.info ol {
  margin: 12px 0 16px 22px;
}
.container.info li { margin: 6px 0; }

/* Links */
.container.info a {
  color: #96a5d1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-underline-offset .2s ease;
}
.container.info a:hover {
  color: #eaae16;
  text-underline-offset: 5px;
}

/* Table */
.container.info table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  background: #2d3447;
  border-radius: 12px;
  overflow: hidden; /* скруглення по краях */
}
.container.info table th,
.container.info table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(150,165,209,.12);
  vertical-align: top;
  text-align: left;
}
.container.info table tr:last-child th,
.container.info table tr:last-child td { border-bottom: 0; }
.container.info table th {
  font-weight: 700;
  color: #eaae16;
  background: rgba(234,174,22,.06);
  white-space: nowrap;
}
.container.info table td:first-child {
  width: 32%;
  color: #cfd7ff;
}
.container.info table tr:hover {
  background: rgba(150,165,209,.06);
}

/* Callouts / HR */
.container.info hr {
  border: 0;
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(150,165,209,.35), transparent);
}
.container.info strong { color: #ffffff; }

/* “Author” mini-card */
.container.info h3 + p strong {
  color: #eaae16;
}
.container.info h3 + p a {
  font-weight: 600;
}

/* Spacing helpers for first/last elements */
.container.info > :first-child { margin-top: 0; }
.container.info > :last-child  { margin-bottom: 0; }

/* Responsive */
@media (max-width: 992px) {
  .container.info { padding: 22px; }
  .container.info h2 { font-size: 24px; }
}
@media (max-width: 640px) {
  .container.info { padding: 16px; border-radius: 12px; }
  .container.info table th,
  .container.info table td { padding: 12px; }
  /* Стекова таблиця для мобіли */
  .container.info table,
  .container.info thead,
  .container.info tbody,
  .container.info tr,
  .container.info th,
  .container.info td { display: block; }
  .container.info table th { position: sticky; top: 0; z-index: 1; }
  .container.info table tr { border-bottom: 1px solid rgba(150,165,209,.12); }
  .container.info table td:first-child { width: auto; color: #96a5d1; font-weight: 600; }
}
/* ===== Page side gutters (no sticking to the left) ===== */
:root {
  /* можна підкрутити під свій смак */
  --gutter-desktop: clamp(24px, 3vw, 48px);
  --gutter-tablet: 24px;
  --gutter-mobile: 16px;
}

.g7k2m-wrapper {
  padding-inline: var(--gutter-desktop);
}

/* адаптивні значення */
@media (max-width: 1279.98px) {
  .g7k2m-wrapper { padding-inline: var(--gutter-tablet); }
}
@media (max-width: 767.98px) {
  .g7k2m-wrapper { padding-inline: var(--gutter-mobile); }
}

/* iOS safe-area (notch) підтримка */
@supports (padding: max(0px)) {
  .g7k2m-wrapper {
    padding-left: max(var(--gutter-desktop), env(safe-area-inset-left));
    padding-right: max(var(--gutter-desktop), env(safe-area-inset-right));
  }
}

/* на випадок фул-ширинних секцій без .container — центруємо їх теж */
.g7k2m-wrapper > .xj8k2-info-table,
.g7k2m-wrapper > .m7n4p-screenshots,
.g7k2m-wrapper > .t6y3w-tournaments,
.g7k2m-wrapper > .b8m5t-app-section,
.g7k2m-wrapper > .y6t3m-wheel-section,
.g7k2m-wrapper > .t5w8r-main,
.g7k2m-wrapper > .b3n9x-footer {
  margin-left: auto;
  margin-right: auto;
}

/* якщо десь є гріди, що "прилипають" — додаємо внутрішні поля */
.k5l8q-screenshot-grid,
.r8d5n-tournament-grid {
  padding-inline: 0; /* залишаємо як є; змінюй на 16–24px за потреби */
}
/* ===== Full-width header, hero, footer ===== */
.l4n8p-header,
.y8n3m-hero-section,
.b3n9x-footer {
  width: 100vw;                 /* розтягує на всю ширину вікна */
  margin-left: calc(50% - 50vw); /* компенсує внутрішній gutter обгортки */
  margin-right: calc(50% - 50vw);
  position: relative;
  left: 0;
  right: 0;
}

/* при бажанні забрати внутрішній контейнер */
.l4n8p-header > .container,
.b3n9x-footer > .container {
  max-width: none;
  padding-inline: 40px; /* трохи поля всередині для контенту */
}

/* Hero зображення або слайдери */
.y8n3m-hero-section .t4k7p-hero-slider {
  border-radius: 0; /* щоб не було обрізання по краях */
}