/* Mobile responsive overrides — GameFun123.Com */

/* ── Desktop: hide mobile-only elements ── */
.mobile-header { display: none; }
#PopMenuDiv    { display: none; }
#searchDiv     { display: none; }

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

  /* ── Hide desktop header, show mobile header ── */
  .header {
    min-width: 0 !important;
    height: 55px !important;
  }
  .header .top {
    display: none !important;
  }

  /* ── Mobile header bar: [☰ left] [logo center] [🔍 right] ── */
  .mobile-header {
    display: flex !important;
    align-items: center;
    height: 55px;
    overflow: hidden;
  }
  /* 左右图标固定宽度，保证 logo 真正居中 */
  .mobile-header .header_left,
  .mobile-header .header_right {
    flex-shrink: 0;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-header img {
    display: block;
    cursor: pointer;
  }
  .mobile-header .mobile-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    text-decoration: none;
    font-size: 26px;
    font-weight: 900;
    color: #002B50;
    font-family: 'Arial Black', Arial, sans-serif;
    letter-spacing: -0.5px;
    white-space: nowrap;
  }
  .mobile-header .mobile-logo .fun  { color: #0055cc; }
  .mobile-header .mobile-logo .num  { color: #e63000; }
  .mobile-header .mobile-logo .dot  { font-size: 12px; font-weight: 700; color: #370a9b; }

  /* ── Hamburger nav dropdown ── */
  #PopMenuDiv {
    display: none;
    position: fixed;
    top: 55px;
    left: 0;
    right: 0;
    background: #fc0;
    z-index: 999;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  }
  #PopMeneUL {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #PopMeneUL a {
    display: block;
    text-decoration: none;
    color: #370a9b;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  #PopMeneUL li {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 700;
  }
  #PopMeneUL li img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  #PopMeneUL a:hover li {
    background: #FF8635;
  }

  /* ── Search bar dropdown ── */
  #searchDiv {
    display: none;
    position: fixed;
    top: 55px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 999;
    padding: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    box-sizing: border-box;
  }
  #searchDiv form {
    display: flex;
    gap: 8px;
  }
  #keywordsDiv {
    flex: 1;
  }
  #keywordsInput {
    width: 100%;
    height: 40px;
    border: 2px solid #fc0;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 16px;
    box-sizing: border-box;
    outline: none;
  }
  #submitDiv {
    flex-shrink: 0;
  }
  #submitInput {
    height: 40px;
    padding: 0 16px;
    background: #fc0;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #370a9b;
    cursor: pointer;
  }

  /* ── Footer ── */
  .foot {
    position: relative !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 30px !important;
    line-height: 1.8 !important;
    padding: 8px 10px !important;
    word-break: break-word;
  }

  /* ── Game detail containers (1260.css overrides) ── */
  div.container {
    width: 100% !important;
    margin: 5px auto 20px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  div.container_left {
    width: 100% !important;
    float: none !important;
  }
  div.container_right {
    display: none !important;
  }
  div.Walkthrough_Text div.Walkthrough_Title {
    width: calc(100% - 20px) !important;
  }
  div.Walkthrough_withThumb div.Walkthrough_Title {
    width: calc(100% - 90px) !important;
  }
  div.Walkthrough_withThumb div.Walkthrough_Title div.gamename {
    width: 100% !important;
  }
  div.Walkthrough_Content_Data {
    width: 100% !important;
    float: none !important;
    clear: both;
  }
  div.Walkthrough_Content_Data_Rate {
    float: none !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
  div.thumbwithtext div.tags {
    width: calc(100% - 100px) !important;
  }
  div.container_left_box_content div.thumb {
    width: calc((100% - 30px) / 3) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  div.container_left_box_content div.thumb a img {
    width: 100% !important;
    height: 100% !important;
  }
}

@media screen and (min-width: 500px) and (max-width: 899px) {
  div.container_left_box_content div.thumb {
    width: calc((100% - 40px) / 4) !important;
  }
}