/* =====================================================================
   Responsive / mobile layer for gryna2.com.pl  (added 2026)
   Override-only: does not modify the original fixed-width style.css.
   Breakpoints: <=1040px (tablet/stack), <=640px (phone).
   ===================================================================== */

img { max-width: 100%; height: auto; }

/* ---------- tablet & below: collapse the fixed 1028px layout ---------- */
@media (max-width: 1040px) {
  html, body {
    overflow-x: hidden !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  *, *::before, *::after { box-sizing: border-box; }

  /* main wrappers become fluid */
  nav, header, footer, #content, .body, #wrapper, .wrapper {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #content { padding-left: 8px !important; padding-right: 8px !important; }

  /* two columns -> stacked */
  #content .left, #content .right {
    float: none !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
  }
  #content .right { margin-top: 18px !important; }

  /* game grid: centered inline cards that wrap */
  section.games, .games { text-align: center !important; width: auto !important; }
  .games .game {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
    width: 336px !important;
    max-width: 100% !important;
    margin: 8px !important;
    text-align: left;
  }
  .games .game a img, .game_image img { max-width: 100% !important; height: auto !important; }

  /* game detail page + inner blocks fluid */
  .game_page, .game_page .header, .game_page .gameplay, .game_page .header .loader,
  .game_page .header .text_loader, .game_description, .game_description .game_popis,
  .similar_games, .similar_games .similar_header, .game_reklama, .ohre, .ohre_content .top,
  .game_lista2, .controls, .cotrols_nadpis, .game_buttons1, .top_hry_box, .games2,
  .category2_container, .category1_game, .best_mmorpg_block, .best_mmorpg_block .bottom_mmorpg,
  #disqus_thread, .banner, .banner a img, .ads, .game_hover, .category_hover, h2 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }
  /* embedded game / flash / ruffle player scales down */
  .game_page .gameplay iframe, .game_page .gameplay embed, .game_page .gameplay object,
  #game iframe, embed, object, iframe { max-width: 100% !important; }

  /* ads must never be wider than the screen (inline width:970px etc.) */
  ins.adsbygoogle, .adsbygoogle { width: 100% !important; max-width: 100% !important; }
  figure.banner, .banner { width: auto !important; max-width: 100% !important; overflow: hidden !important; }

  /* TOP GRY featured block: just keep it inside the screen; leave its internal
     (absolute-positioned) layout as designed to avoid breaking the carousel */
  .top_hry, .top_hry_box, .top_hry_datum, .top_hry_buttons {
    max-width: 100% !important; box-sizing: border-box; overflow: hidden;
  }

  /* header search stays usable */
  #search { width: auto !important; float: none !important; max-width: 100% !important; }
  #search_input { max-width: 60% !important; }

  /* decorative desktop-only chrome that breaks on small screens */
  .fb_slider, .fb_plugin_layer, .fb_overlayer { display: none !important; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  /* one game card per row */
  .games .game { width: 92% !important; max-width: 360px !important; margin: 8px auto !important; }

  /* category icon bar scrolls sideways instead of overflowing */
  nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
  }
  nav ul, nav > div { white-space: nowrap !important; }

  /* footer columns stack */
  footer .left, footer .right, footer .footer_left, footer .footer_right {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  /* pagination / player tables don't overflow */
  table { max-width: 100% !important; }
  .top_gracze, .anketa { width: auto !important; max-width: 100% !important; }

  /* headings scale */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }

  /* cookie / consent popups from 3rd parties: keep on-screen */
  [class*="cookie"], [id*="cookie"], [class*="consent"] { max-width: 100vw !important; }
}