/* === Responsive Fix Pack (non-breaking, no class renames) === */

/* 1) Media defaults: prevent squashed images, make embeds fluid */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* Restore intended small header/logo images without affecting content */
header .logo img, .header .logo img {
  height: 40px;
  width: auto;
}

/* 2) Kill horizontal scroll on narrow screens without hiding legit content */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Safer container behavior on tiny screens */
.container {
  width: 100%;
  max-width: 1200px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 4) Navigation: wrap items instead of overflowing on mobile */
@media (max-width: 768px) {
  .header-content { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    align-items: center; 
  }
  .nav .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .register-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* 5) Games grid: reduce columns progressively */
@media (max-width: 991px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 6) Tables: enable horizontal scroll within table block on small screens */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 7) Heading and text scale for readability on very small devices */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.25; }
  h2 { font-size: clamp(1.25rem, 5.2vw, 1.5rem); line-height: 1.3; }
  p, li { font-size: 1rem; line-height: 1.6; }
}

/* 8) Buttons/links: improve tap targets globally */
button, .btn, .register-btn, .cta, a.button, .link-btn {
  min-height: 44px;
}

/* 9) Media inside flexible cards */
.banner-grid img, .games-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 10) Prevent overly rigid fixed heights breaking layouts on mobile */
@media (max-width: 480px) {
  [style*="height:"] { height: auto !important; }
}

/* === Mobile menu (simple burger) === */
.burger {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
}
.burger span { 
  display: block; 
  width: 22px; 
  height: 2px; 
  margin: 5px 0; 
  background: var(--text-primary, #fff); 
}

@media (max-width: 768px) {
  .burger { display: inline-block; }
  .nav { 
    display: none; 
    width: 100%; 
    margin-top: 8px;
  }
  .nav.is-open { display: block; }
  .nav .nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .nav .nav-list a {
    display: block;
    width: 100%;
    padding: 12px 16px;
  }
  .header-content { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 8px;
  }
}