/* * ===================================
 * Combined Stylesheet for CrazyVerse
 * ===================================
 */

/* Global Styles (from all pages) */
html { 
  scroll-behavior: smooth; 
  -webkit-text-size-adjust: 100%;
}
body { 
  margin: 0; 
  zoom: 1; 
}
img, video { 
  max-width: 100%; 
  height: auto; 
}
.container { 
  max-width: 1280px !important; 
}
header nav { 
  font-size: 1.125rem; 
}
header img { 
  width: 3rem; 
  height: 3rem; 
}

/* Unique style from contact.html */
#discord-button .st0 { 
  fill: currentColor; 
}

/* Unique styles from games.html & panel.html */
.arrow-link {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.arrow-link:hover { 
  transform: translateY(-1px); 
  background: rgba(255,255,255,0.07); 
  border-color: rgba(255,255,255,0.2); 
}
.arrow-link svg { 
  width: 1.1rem; 
  height: 1.1rem; 
}

/* * ===================================
 * NEW: Mobile Menu Styles
 * ===================================
 */

/* This class is added by js/main.js to show the menu */
@media (max-width: 767px) { /* This is Tailwind's 'md' breakpoint */
  #main-menu.is-open {
    display: block;
  }
}

/* Hides the "X" icon by default */
#menu-button .icon-open {
  display: none;
}

/* Shows the "X" icon when the menu is open */
#menu-button[aria-expanded="true"] .icon-open {
  display: block;
}

/* Hides the "Hamburger" icon when the menu is open */
#menu-button[aria-expanded="true"] .icon-closed {
  display: none;
}