/* FREETOPLAY — MOBILE LAYOUT PATCH
   Keeps the existing site and functionality; fixes overflow and improves phone layout. */
html { width:100%; max-width:100%; overflow-x:hidden !important; }
body { width:100%; max-width:100%; min-width:0 !important; overflow-x:hidden !important; margin-left:0 !important; margin-right:0 !important; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe, canvas, svg { max-width:100%; }
@media (max-width: 768px) {
  html, body { overflow-x:hidden !important; overscroll-behavior-x:none; }
  body > *, main > *, .main-content > *, .page-content > * { min-width:0; }
  .navbar { position:sticky !important; top:8px !important; left:auto !important; right:auto !important; transform:none !important; width:calc(100% - 20px) !important; max-width:calc(100% - 20px) !important; margin:8px auto 14px !important; padding:9px 10px !important; gap:8px !important; }
  .logo-box { min-width:0 !important; max-width:calc(100% - 54px) !important; flex:1 1 auto !important; gap:8px !important; }
  .logo-icon { flex:0 0 38px !important; width:38px !important; min-width:38px !important; height:38px !important; font-size:20px !important; }
  .logo-text { min-width:0 !important; max-width:100%; }
  .logo-text strong { font-size:clamp(13px,4vw,17px) !important; letter-spacing:.06em !important; white-space:nowrap !important; }
  .logo-text span { font-size:clamp(8px,2.5vw,10px) !important; white-space:normal !important; }
  .mobile-menu-btn { flex:0 0 42px !important; width:42px !important; min-width:42px !important; height:42px !important; }
  .announcement-bar { position:relative !important; top:auto !important; left:auto !important; right:auto !important; transform:none !important; width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; height:auto !important; min-height:0 !important; margin:12px auto !important; padding:0 !important; overflow:hidden !important; }
  .announcement-content { position:static !important; display:block !important; width:100% !important; max-width:100% !important; height:auto !important; padding:10px 12px !important; font-size:10px !important; line-height:1.5 !important; text-align:center !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; animation:none !important; transform:none !important; }
  .hero { width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:0 0 22px 22px !important; background-position:center center !important; }
  .hero-content { width:calc(100% - 28px) !important; max-width:520px !important; min-width:0 !important; margin:0 auto !important; padding:24px 0 34px !important; }
  .badge { max-width:100% !important; white-space:normal !important; overflow-wrap:anywhere !important; padding:10px 14px !important; font-size:11px !important; line-height:1.5 !important; }
  .hero-logos.hero-logos--compact { width:100% !important; max-width:100% !important; min-width:0 !important; margin:20px auto 24px !important; padding:0 !important; gap:8px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
  .hero-logos--compact .hero-logo { width:clamp(54px,18vw,84px) !important; height:clamp(54px,18vw,84px) !important; min-width:0 !important; max-width:25vw !important; flex:0 1 84px !important; padding:6px !important; border-radius:16px !important; }
  .hero-logos--compact .hero-middle { flex:1 1 0 !important; width:auto !important; max-width:230px !important; min-width:0 !important; padding:11px 8px !important; border-radius:18px !important; overflow:hidden !important; }
  .hero-logos--compact .hero-middle span { font-size:8px !important; letter-spacing:.05em !important; line-height:1.4 !important; }
  .hero-logos--compact .hero-middle strong { font-size:clamp(10px,3.2vw,14px) !important; line-height:1.3 !important; overflow-wrap:anywhere !important; }
  .hero-logos--compact .hero-middle small { font-size:9px !important; line-height:1.35 !important; }
  .hero h1 { width:100% !important; max-width:100% !important; margin:18px auto !important; font-size:clamp(36px,11vw,58px) !important; line-height:.98 !important; letter-spacing:-.045em !important; text-align:center !important; overflow-wrap:normal !important; word-break:normal !important; }
  .hero-content > p { max-width:100% !important; margin:0 auto 20px !important; font-size:clamp(14px,4vw,17px) !important; line-height:1.65 !important; text-align:center !important; overflow-wrap:anywhere !important; }
  .buttons { width:100% !important; max-width:100% !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  .buttons .btn { display:flex !important; width:100% !important; max-width:100% !important; min-width:0 !important; justify-content:center !important; text-align:center !important; white-space:normal !important; }
  .hero-proof { max-width:100% !important; text-align:center !important; overflow-wrap:anywhere !important; font-size:10px !important; letter-spacing:.12em !important; }
  .visitor-counter { width:fit-content !important; max-width:100% !important; margin:12px auto 0 !important; gap:8px !important; }
  .section, section, .panel, .card, .ft26-quickstart, .ft26-hub-grid { min-width:0 !important; max-width:100% !important; }
  .section { padding-left:14px !important; padding-right:14px !important; }
  .ft26-hub-grid, .cards, .features-grid, .status-grid { grid-template-columns:minmax(0,1fr) !important; }
  h1,h2,h3,p,a,button,span,strong,small { overflow-wrap:break-word; }
  table { max-width:100% !important; }
  .quick-menu, #quickMenu, .quick-menu-button, .floating-menu, .back-to-top, #backToTop, .scroll-top { right:10px !important; max-width:calc(100vw - 20px) !important; }
}
@media (max-width: 380px) {
  .logo-text strong { font-size:12px !important; }
  .logo-text span { font-size:8px !important; }
  .hero-logos--compact .hero-logo { width:54px !important; height:54px !important; flex-basis:54px !important; }
  .hero-logos--compact .hero-middle { padding:9px 5px !important; }
  .hero-logos--compact .hero-middle strong { font-size:10px !important; }
}