/* ============================================================================
   responsive.css — bolt-on mobile layer for the legacy desktop layout.
   Everything is scoped to small screens (max-width: 820px), so the regular
   desktop site (> 820px) is completely untouched. The legacy pages use fixed
   pixel widths, floats and absolute positioning; here we force the big
   containers fluid and stack the columns so the site is usable on a phone.
   ============================================================================ */

/* Let media shrink to fit on every screen size. */
img, iframe, embed, object { max-width: 100%; }

@media screen and (max-width: 820px) {

  html { -webkit-text-size-adjust: 100%; }

  html, body {
    min-width: 0 !important;
    width: auto !important;
    overflow-x: hidden !important;
  }

  /* --- Make the big fixed-width wrappers fluid --- */
  #content, #container, #content-container, #wrapper, #page,
  #header, #header-container, #fp-container, #site-header, #site-header-content,
  .rounded-container, #wide-personal-info, #promo-box,
  #playground, #playground-outer {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    box-sizing: border-box;
  }

  /* --- Stack every column vertically --- */
  .column, #column1, #column2, #column3, .habblet-container {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box;
  }

  /* --- Inner fixed-width blocks become fluid --- */
  .cbb, .box-content, .rounded, .rounded-red, .habblet, .habblet-container > div,
  [style*="width: 759px"], [style*="width:759px"],
  [style*="width: 890px"], [style*="width:890px"],
  [style*="width: 430px"], [style*="width:430px"],
  [style*="width: 33.33%"] {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Radio / Discord / Facebook / news iframes full width */
  iframe { width: 100% !important; }

  /* --- Top navigation: let the tab menus wrap instead of overflowing --- */
  #navi, #navi2, #navi2 ul, #navi2-container, ul#green {
    width: auto !important;
    height: auto !important;
    white-space: normal !important;
    text-align: center !important;
  }
  #navi > li, #navi2 li, ul#green > li {
    float: none !important;
    display: inline-block !important;
  }

  /* --- Header logo + login/sub-nav: drop out of absolute positioning --- */
  #header h1 { position: static !important; }
  #subnavi, #subnavi-login, #subnavi-search, #subnavi-user, #to-hotel {
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 4px auto !important;
  }
  #habbos-online { position: static !important; float: none !important; margin: 4px auto !important; }

  /* --- Frontpage login + landing image --- */
  #login-form, #login-form-email, #login-form-password, #login-form-submit {
    float: none !important;
    width: auto !important;
    position: static !important;
  }
  #login-form .login-field { width: 90% !important; max-width: 300px; }
  #habbo-logo { position: static !important; margin: 0 auto !important; }
  #frontpage-image-container, #frontpage-image, #join-now-button-container {
    width: auto !important;
    max-width: 100% !important;
    position: static !important;
  }
  #frontpage-image { height: auto !important; min-height: 220px; background-size: contain !important; background-repeat: no-repeat; background-position: center; }
  #tagline { width: auto !important; }

  /* --- me.php avatar plate / hotel button --- */
  #habbo-plate { position: static !important; }
  .enter-hotel-btn { width: auto !important; }

  /* --- Help-tool pages (Zendesk markup) ---
     This theme is a heavily-floated grid; we only widen the main wrappers and
     deliberately DON'T touch the box-graphics or the (hidden) search-results
     panel, otherwise content gets hidden or revealed in the wrong place. */
  #page, #top, #header_container, #container, #contentwrapper, #contentcolumn,
  #sidebar, #content_entries, .content, .frame, .columns, .column {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
  }
  #suggestions_query { width: 65% !important; }
  #table_header, #table_header td { display: block !important; text-align: center !important; }

  /* Layout tables shouldn't force horizontal scroll */
  table { max-width: 100% !important; }

  /* Footer AdSense block is a fixed 728px wide — clamp it so it doesn't
     push the whole page wider than the screen. */
  #footer { width: auto !important; max-width: 100% !important; }
  #footer ins, .adsbygoogle, ins.adsbygoogle { width: 100% !important; max-width: 100% !important; }

  /* Comfortable tap padding on the main buttons/links */
  .new-button, .submit, .login-top-button { display: inline-block; }
}