/* 880px / 650px: same breakpoints as the rest of the theme. Menu colors stay. */
@media screen and (min-width: 881px) {
  .site-navigation { display: contents; }
  .mobile-menu-toggle { display: none; }
}

@media screen and (min-width: 881px) and (max-width: 1280px) {
  .container { width: 100%; }
  .content { box-sizing: border-box; flex: 1 1 calc(100% - 320px); width: calc(100% - 320px); min-width: 0; }
  .top-content-block { box-sizing: border-box; width: 100%; margin-right: 0; }
  .content-block-info { display: block; }
  .left-content-block-info, .right-content-block-info { box-sizing: border-box; width: 100%; padding: 0; border: 0; }
  .content-block-info .left-content-block-info { margin-bottom: 24px; }
}

@media screen and (max-width: 880px) {
  html, body { min-width: 0; overflow-x: hidden; }
  body {
    background-image: linear-gradient(#270c03 0 72px, transparent 72px),
      url(../ThemeEight/images/headerBG.jpg), url(../ThemeEight/images/footerBG.jpg);
    background-position: center top, center top, center bottom;
    background-repeat: no-repeat;
  }
  .wrapper { width: 100%; }
  .header { height: auto; min-height: 0; padding-bottom: 16px; }
  .menu-top { position: relative; height: auto; min-height: 0; padding-top: 1px; background: none; }
  .site-navigation { display: none; }
  .mobile-menu-toggle {
    position: fixed; z-index: 12001; top: 16px; right: 16px; display: block;
    width: 48px; height: 48px; padding: 0; border: 3px solid #59432e; border-radius: 8px;
    background: #171512; color: #fff; font: 28px/1 Arial, sans-serif; cursor: pointer;
  }
  .mobile-menu-toggle:focus-visible { outline: 3px solid #e7c177; outline-offset: 2px; }
  .mobile-menu-toggle[aria-expanded="true"] span { font-size: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span::after { content: "×"; font-size: 30px; }
  body.mobile-menu-open .site-navigation {
    position: fixed; z-index: 12000; top: 72px; right: 16px; display: flex; flex-direction: column;
    width: calc(100vw - 32px); max-width: 360px; padding: 6px 0; border: 2px solid #59432e;
    border-radius: 8px; background: #171512; box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  }
  body.mobile-menu-open .site-navigation ul {
    box-sizing: border-box !important; float: none; width: 100%; max-width: none; margin: 0; padding: 0; list-style: none;
  }
  body.mobile-menu-open .site-navigation li,
  body.mobile-menu-open .site-navigation .mr-0 { display: block; margin: 0; background: none; }
  body.mobile-menu-open .site-navigation .menu-top-right > li:first-child { display: none; }
  body.mobile-menu-open .site-navigation li a {
    display: block; padding: 14px 20px; border-bottom: 1px solid rgba(231, 193, 119, .2);
    color: #eae39b; font-size: 15px; text-align: left;
  }
  body.mobile-menu-open .site-navigation li:last-child a { border-bottom: 0; }
  body.mobile-menu-open .site-navigation li:hover,
  body.mobile-menu-open .site-navigation .active { background: rgba(231, 193, 119, .12) !important; }
  body.mobile-menu-open { overflow: hidden; }
  .menu-top ul { box-sizing: border-box !important; width: 50%; max-width: 50%; padding-left: 0; }
  .menu-top ul li { margin: 0 4px; }
  .menu-top ul li a { font-size: 12px; padding: 28px 8px; }
  .logoyeni { position: relative; clear: both; margin: 24px auto 0; left: auto; top: auto; width: 100%; height: auto; }
  .site-logo { font-size: 44px; letter-spacing: 3px; }
  .logoyeni img { position: relative !important; width: 220px !important; height: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
  .server-load { height: auto; min-height: 86px; margin-top: 16px; background-size: 100% 100%; }
  .server-load div { padding-top: 22px; }
  .container { box-sizing: border-box; width: 100%; padding-left: 0; padding-right: 0; flex-direction: column; }
  .content, .sidebar { box-sizing: border-box; width: 100%; max-width: 100%; }
  .content { padding: 20px 16px 32px; }
  .top-content-block { width: 100%; max-width: 100%; margin: 0 0 24px; flex-wrap: wrap; }
  .top-content-block .gurur-home-slider { flex: 1 0 100%; width: 100%; max-width: 630px; margin: 0 auto; }
  .content-block-info { box-sizing: border-box; display: block; width: 100%; max-width: 100%; }
  .left-content-block-info, .right-content-block-info { box-sizing: border-box; width: 100%; padding: 0; border: 0; }
  .sidebar:after, .sidebar-title { width: 100%; max-width: 100%; box-sizing: border-box; }
  .sidebar-title { background-repeat: no-repeat; background-size: 100% 100%; }
  .shop-block .shop { box-sizing: border-box; width: 100%; max-width: 320px; margin-right: auto; margin-left: auto; }
  .download-bonus-block { width: 100%; max-width: 321px; margin: 0 auto; }
  .download-bonus-block:before,
  .download-bonus-block:after { display: none; }
  .download-bonus-block .download a { box-sizing: border-box; width: 100%; max-width: 321px; margin: 0 auto; background-size: 100% auto; }
  .bonus-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .bonus-block a { width: auto; min-width: 0; box-sizing: border-box; }
  .slider, .aslider { width: 100%; max-width: 100%; height: auto; }
  .aslider .snrtrslides .fslide img { width: 100%; max-width: 100%; height: auto; }
  .login-block-b { box-sizing: border-box; width: 100%; max-width: 360px; margin: 0 auto 24px; }
  .login-block .block-p { padding: 20px 16px; }
  .login-block .l-input,
  .login-block .login-recovery-links { box-sizing: border-box; width: 260px; max-width: 100%; margin-left: auto; margin-right: auto; }
  .login-block .l-input input,
  .login-block .login-recovery-links .lost-pass { display: block; width: 100%; }
  .login-block .login-form button { margin-left: auto; margin-right: auto; }
  .login-block .form-group.sidebar-turnstile:has(.cf-turnstile) { margin-left: auto; margin-right: auto; }
  .login-block input,
  .login-block .login-form button,
  .login-block .lost-pass,
  .login-block .float-right,
  .login-page { max-width: 100%; }
  .login-page { padding: 22px 16px 12px; }
  .login-page > .form { box-sizing: border-box; width: 100%; margin-inline: auto; }
  .login-page #loginForm { box-sizing: border-box; width: 100%; margin-inline: auto; }
  .login-page #loginForm > .form-group:not(:has(.cf-turnstile)) { display: flex; justify-content: center; box-sizing: border-box; width: 100%; }
  .login-page #loginForm > .form-group:not(:has(.cf-turnstile)) > input,
  .login-page #loginForm > .form-group:not(:has(.cf-turnstile)) > button,
  .login-page #loginForm > .form-group:not(:has(.cf-turnstile)) > a { box-sizing: border-box; width: 260px; max-width: 100%; margin-inline: auto; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select,
  textarea { font-size: 16px; }
  .ranking-table, .ranks-inner-content, .table-siralama { max-width: 100%; }
  .content img, .fb-page, .fb-page span, .fb-page iframe { max-width: 100% !important; height: auto; }
  .footer { height: auto; }
  .footer-logo { float: none; margin: 0 auto 12px; }
  .footer-logo a { width: 100%; max-width: 320px; margin: 0 auto; background-size: contain; background-position: center; }
  .footer-s { justify-content: center; }
  .footer-s span { width: auto; margin: 0 12px 12px; }
  .modal-dialog { width: calc(100% - 24px); max-width: calc(100% - 24px); margin: 12px auto; }
  .languagepicker { top: 8px; }
}

@media screen and (max-width: 650px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .menu-top ul li a { font-size: 11px; padding: 22px 4px; }
  .bonus-block a { padding: 19px 3px 0 48px; }
  .login-page { box-sizing: border-box; width: 100%; }
  .best-players-title,
  .best-guilds-title { height: 48px; padding: 0 72px 0 14px; font-size: 14px; line-height: 48px; white-space: nowrap; }
  .best-players-title span,
  .best-guilds-title span { top: -5px; right: 8px; width: 58px; height: 58px; padding-top: 15px; box-sizing: border-box; background-size: contain; }
  .best-players-title span b,
  .best-guilds-title span b { font-size: 25px; line-height: 26px; }
  .best-players,
  .best-guilds { box-sizing: border-box; padding: 0 8px 4px; }
  .best-players .table-siralama,
  .best-guilds .table-siralama { width: 100%; table-layout: fixed; }
  .best-players .table-siralama td,
  .best-guilds .table-siralama td { padding: 6px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .best-players .table-siralama td:first-child,
  .best-guilds .table-siralama td:first-child { display: none; }
  .best-players .table-siralama td:nth-child(2),
  .best-guilds .table-siralama td:nth-child(2) { width: 32px; text-align: center; }
  .best-players .table-siralama td:nth-child(3) { width: 44px; padding-left: 0; padding-right: 0; text-align: center; }
  .best-players .table-siralama td:nth-child(4),
  .best-guilds .table-siralama td:nth-child(3) { text-align: left; }
  .best-players .table-siralama td:nth-child(5),
  .best-guilds .table-siralama td:nth-child(4) { width: 52px; text-align: right; }
  .best-players .table-siralama img,
  .best-guilds .table-siralama img { display: inline-block; max-width: 34px; height: auto; margin: 0; padding: 0; }
  .best-players .table-siralama .hidden-xs { display: none !important; }
}