/* FREETOPLAY logo polish: fixes clipped text and makes the two project marks legible */
.logo-box { flex: 0 0 auto !important; min-width: max-content !important; gap: 12px !important; }
.logo-icon {
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  flex: 0 0 44px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; line-height: 1 !important; white-space: nowrap !important;
  overflow: hidden !important; font-family: Arial, sans-serif !important; font-size: 23px !important;
  font-weight: 500 !important; padding: 0 !important; aspect-ratio: 1 / 1 !important;
}
.logo-text { min-width: 0 !important; flex: 0 0 auto !important; }
.logo-text strong { white-space: nowrap !important; overflow: visible !important; line-height: 1.1 !important; }
.logo-text span { display: block !important; white-space: nowrap !important; line-height: 1.35 !important; }

.hero-logos.hero-logos--compact {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: clamp(14px, 2vw, 30px) !important; width: 100% !important; max-width: 820px !important;
  margin: 22px auto 28px !important; padding: 0 16px !important; flex-wrap: nowrap !important;
}
.hero-logos--compact .hero-logo {
  display: block !important; width: clamp(92px, 10vw, 142px) !important;
  height: clamp(92px, 10vw, 142px) !important; max-width: none !important; max-height: none !important;
  min-width: 0 !important; flex: 0 1 142px !important; object-fit: contain !important;
  object-position: center !important; padding: 10px !important; border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(9,20,25,.95), rgba(17,29,34,.88)) !important;
  border: 1px solid rgba(74,222,128,.25) !important;
}
.hero-logos--compact .hero-middle {
  min-width: 0 !important; width: auto !important; max-width: 360px !important;
  flex: 0 1 340px !important; padding: 19px 22px !important; border-radius: 999px !important;
  text-align: center !important; overflow-wrap: anywhere !important;
}
.hero-logos--compact .hero-middle span {
  display: block !important; font-size: 10px !important; letter-spacing: .12em !important;
  line-height: 1.5 !important; white-space: normal !important; margin-bottom: 8px !important;
}
.hero-logos--compact .hero-middle strong {
  display: block !important; font-size: clamp(14px, 1.25vw, 18px) !important;
  line-height: 1.35 !important; white-space: normal !important; overflow-wrap: anywhere !important;
}
.hero-logos--compact .hero-middle small {
  display: block !important; font-size: 11px !important; line-height: 1.5 !important;
  white-space: normal !important; margin-top: 7px !important;
}
@media (max-width: 600px) {
  .logo-box { gap: 8px !important; }
  .logo-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; flex-basis: 38px !important; font-size: 20px !important; }
  .logo-text strong { font-size: 15px !important; }
  .logo-text span { font-size: 9px !important; }
  .hero-logos.hero-logos--compact { gap: 8px !important; padding: 0 8px !important; margin: 18px auto 22px !important; }
  .hero-logos--compact .hero-logo { width: clamp(66px, 19vw, 92px) !important; height: clamp(66px, 19vw, 92px) !important; flex: 0 0 clamp(66px, 19vw, 92px) !important; padding: 7px !important; border-radius: 17px !important; }
  .hero-logos--compact .hero-middle { flex: 1 1 auto !important; min-width: 0 !important; padding: 12px 9px !important; border-radius: 20px !important; }
  .hero-logos--compact .hero-middle span { font-size: 8px !important; letter-spacing: .06em !important; margin-bottom: 5px !important; }
  .hero-logos--compact .hero-middle strong { font-size: clamp(11px, 3.2vw, 14px) !important; }
  .hero-logos--compact .hero-middle small { font-size: 9px !important; margin-top: 4px !important; }
}
@media (max-width: 360px) {
  .hero-logos--compact .hero-logo { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
  .hero-logos--compact .hero-middle { padding: 10px 6px !important; }
  .hero-logos--compact .hero-middle strong { font-size: 10px !important; }
}

/* MOBILE WIDTH FIX — prevent the document from scrolling sideways */
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  scroll-padding-top: 90px;
}
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, canvas, svg { max-width: 100%; }

@media (max-width: 768px) {
  body { font-size: 15px; }
  main, header, footer, section, article, .container, .content, .page,
  .main-content, .page-content, .hero, .hero-section, .hero-content,
  .hero-inner, .section-inner, .section-wrap, .wrap, .wrapper {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  main, .container, .content, .page, .main-content, .page-content,
  .hero-content, .hero-inner, .section-inner, .section-wrap, .wrap, .wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero, .hero-section, .hero-content, .hero-inner,
  .hero-logos, .hero-logos--compact, .hero-title, .hero h1,
  .cards, .card-grid, .features-grid, .stats-grid, .status-grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .hero h1, h1 { font-size: clamp(2.1rem, 10vw, 4rem) !important; overflow-wrap: anywhere; }
  .hero p, p, h2, h3, .card, .panel, .status-card { overflow-wrap: anywhere; }
  .hero-logos.hero-logos--compact { gap: 7px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .hero-logos--compact .hero-logo { max-width: 25vw !important; }
  .hero-logos--compact .hero-middle { overflow-wrap: anywhere !important; }
  .nav, nav, .navbar, .top-nav, .site-header, .header-inner { max-width: 100vw !important; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code { max-width: 100%; overflow-wrap: anywhere; }
  input, select, textarea, button { max-width: 100%; }
  /* Fixed floating controls stay inside the viewport */
  .back-to-top, #backToTop, .back-top, .quick-menu, #quickMenu,
  .quick-menu-button, .floating-menu, .scroll-top {
    max-width: calc(100vw - 20px) !important;
  }
}