/* Shared layout tweaks for game pages */
/* Keep content inset 50px from viewport edges on desktop. Mobile not affected. */
@media (min-width: 1024px) {
  body {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Reset for narrower screens */
@media (max-width: 900px) {
  body {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Prevent off-screen sidebar/overlay from intercepting clicks when hidden.
   Use pointer-events to ensure only visible/active overlays receive pointer input. */
.sidebar, .game-sidebar {
  pointer-events: none;
}
.sidebar.open, .game-sidebar.open {
  pointer-events: auto;
}
.sidebar-overlay, #sidebarOverlay {
  pointer-events: none;
}
.sidebar-overlay.active, #sidebarOverlay.open {
  pointer-events: auto;
}

/* Unified header + sidebar styles for all game pages */
.game-header-rect,
.header.game-header-rect {
  background: rgba(255,255,255,0.98) !important;
  border-radius: 14px !important;
  padding: 25px 36px !important;
  min-height: 72px !important;
  max-width: none;
  width: 100%;
  margin: 2rem 0 0 0;
  transform: translateY(-20px) !important;
  z-index: 110 !important;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.game-header-rect .hamburger-btn,
.game-header-rect .burger-btn,
.hamburger-btn.burger-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.game-header-rect .hamburger-btn span,
.game-header-rect .burger-btn span,
.hamburger-btn span {
  width: 25px;
  height: 3px;
  background: #333;
  transition: all 0.2s ease;
  border-radius: 2px;
  display: block;
}

.game-header-rect .title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  flex: 1 1 auto;
  margin: 0 12px;
  color: #333 !important;
}

/* Shift the title 40px to the left on small screens to match design request */
@media (max-width: 480px) {
  body.games-page .game-header-rect .title {
    transform: translateX(-40px);
  }
  /* Increase logo size by 20% on phones */
  body.games-page .game-header-rect .logo img {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
  }
}

.game-header-rect .logo img,
.logo img {
  height: 44px !important;
  display: block;
  object-fit: contain;
  /* Render the logo directly on the header background (no tile) to visually match topics.html */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Extremely specific override to beat page-local rules: */
/* Make the canonical game header visually consistent across all game pages.
  These highly-specific rules are intentional to override older per-page styles
  and ensure the rounded card, shadow and logo size appear the same everywhere. */
html body .game-header-rect { background: rgba(255,255,255,0.98) !important; }
html body .game-header-rect { padding: 18px 36px !important; min-height:72px !important; max-width:1200px !important; margin: 0 auto 24px !important; }
html body .game-header-rect { box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important; transform: translateY(-8px) !important; border-radius: 14px !important; }
/* Increase the default logo size slightly so it reads well on desktop; pages can reduce via media queries. */
html body .game-header-rect .logo img { height: 51px !important; }

/* Extremely specific overrides to ensure the hamburger bars are visible
   even when a page includes its own header CSS. We force flex layout on
   the button and explicit bar dimensions/colors with !important. */
html body .game-header-rect .hamburger-btn,
html body .game-header-rect .burger-btn,
html body .hamburger-btn {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .game-header-rect .hamburger-btn span,
html body .hamburger-btn span,
.game-header-rect .hamburger-btn span {
  width: 25px !important;
  height: 3px !important;
  background: #333 !important;
  display: block !important;
  border-radius: 2px !important;
  margin: 3px 0 !important;
}

/* Fallback: use an inline SVG icon inside the button when present. Keep it visible
   even if page-level CSS tries to hide the span-bars. */
html body .hamburger-btn svg {
  width: 24px !important;
  height: 18px !important;
  display: block !important;
}
html body .hamburger-btn svg rect,
html body .hamburger-btn svg path {
  fill: #333 !important;
}

/* Option A: Unified header flow (no negative translateY) ---------------------------------
   Keep the header inside the normal document flow so it is never clipped by content.
   We apply highly-specific selectors to override previous translateY / !important rules
   while keeping the rounded top look (only the top corners rounded).
-------------------------------------------------------------------------------------------*/
:root {
  /* Match topics .header-inner height: logo 72px + vertical padding 24.5px * 2 = 121px */
  --game-header-height: 121px; /* match topics header visual height */
  --game-header-gap: 18px;    /* vertical gap above header */
}

html body .game-header-rect {
  /* match topics header-inner: slightly raised, full-width white box with rounded top */
  transform: translateY(-6px) !important;
  margin: 12px auto !important;
  width: calc(100% - 16px) !important;
  max-width: none !important;
  border-radius: 15px !important;
  padding: 24.5px 0 !important; /* vertical padding like topics.header-inner */
  min-height: var(--game-header-height) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.10) !important;
  position: relative !important;
  z-index: 60 !important;
  /* use same almost-white background as topics (.header-inner) for pixel match */
  background: rgba(255,255,255,0.98) !important;
}

/* Mobile-only header sizing: make the games page header card ≈90px total height */
@media (max-width: 480px) {
  body.games-page .game-header-rect {
    min-height: 66px !important;
    padding: 12px 0 !important;
  }
}

/* Reserve space under the header so page content doesn't overlap it */
html body .container {
  /* keep a bit less top padding so header visually sits closer to cards like topics */
  padding-top: calc(var(--game-header-height) + 8px) !important;
}

/* Reduce the large blue gap above the header on the games listing page.
   Compute container margin so the visible space between the viewport top and
   the header card is ~50px (accounts for .game-header-rect margin and translateY). */
/* Move the games page container up by ~200px compared to previous spacing.
   We use a negative top margin so the visible gap above the header is reduced. */
body.games-page .container {
  /* move header down by adding 100px extra top padding while keeping the
     previous negative margin to maintain earlier adjustment (tweak as needed) */
  /* reduce the extra offset by 50px (was +100px) to move header up a bit */
  padding-top: calc(var(--game-header-height) + 8px + 50px) !important;
  margin-top: -156px !important; /* previous adjustment retained */
}


/* Fallback text when logo image is missing */
.game-header-rect .logo, .logo { display: inline-flex; align-items: center; gap: 8px; }
.game-header-rect .logo .logo-text, .logo .logo-text, .logo-text { display: none !important; font-weight:700; color:#333; font-size:1rem; }
.game-header-rect .title { color: #333 !important; }
.game-header-rect .logo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

/* Sidebar (left sliding) & overlay */
.sidebar, .game-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 85%;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 20px rgba(0,0,0,0.2);
  /* hide off-screen using transform for reliable cross-browser behavior */
  transform: translateX(-110%) !important;
  transition: transform 260ms ease, opacity 200ms ease;
  opacity: 0;
  z-index: 1200;
  padding: 20px;
  overflow-y: auto;
}
.sidebar.open, .game-sidebar.open { transform: translateX(0) !important; opacity: 1 !important; }

.sidebar-header { padding: 16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background: linear-gradient(45deg,#667eea,#764ba2); color:white; }
.close-btn, .sidebar-close-btn { background:none; border:none; color:white; font-size:20px; cursor:pointer; padding:6px; border-radius:50%; }
.sidebar-content { padding: 10px 0; }
.sidebar-item { display:block; width:100%; padding:12px 18px; text-decoration:none; color:#333; font-weight:500; text-align:right; font-size:16px; border-bottom:1px solid #f0f0f0; }
.sidebar-item:hover { background: linear-gradient(45deg, rgba(102,126,234,0.06), rgba(118,75,162,0.06)); padding-right:30px; }

.sidebar-overlay, #sidebarOverlay, .game-sidebar + .sidebar-overlay { position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(0,0,0,0.4); z-index:999; opacity:0; visibility:hidden; transition: all 0.3s ease; }
/* Accept both .active (used by newer JS) and .open (legacy) */
.sidebar-overlay.active, #sidebarOverlay.active, #sidebarOverlay.open { opacity:1; visibility:visible; }

/* Sidebar content layout improvements: vertical column layout, readable spacing and RTL alignment */
.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 4px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: #333 !important;
  background: transparent;
  border-bottom: 1px solid #f3f4f6;
  font-size: 15px;
}
.sidebar-item .icon { width:20px; height:20px; display:inline-block; margin-left:6px; }
.sidebar-item:hover { background: rgba(102,126,234,0.04); padding-right: 22px; }

/* Make close button clearer and ensure it's positioned inside the header */
.sidebar-header { position: relative; }
.sidebar-header .close-btn { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; }

/* Ensure sidebar content is scrollable below header and doesn't overlap header */
.sidebar { padding-top: 0; }
.sidebar .sidebar-content { margin-top: 8px; }

/* Improve readability on small screens */
@media (max-width: 480px) {
  .sidebar { width: 85%; }
  .sidebar-item { font-size: 16px; padding: 14px 16px; }
}

/* accessibility / focus styles */
.hamburger-btn:focus, .game-header-rect .hamburger-btn:focus { outline: 3px solid rgba(102,126,234,0.35); outline-offset: 2px; }