.mobile-homepage { display:none; }

@media (max-width:900px) {
  .home-page {
    background:#191a1b;
  }

  .home-page .site-shell {
    position:relative;
    color:#f4f4ef;
    background-color:#252627;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
      url("assets/web_bg.png");
    background-position:center top,center top,center top;
    background-size:38px 38px,38px 38px,auto 1000px;
  }

  .home-page .topbar {
    z-index:2;
    height:118px !important;
    grid-template-columns:1fr !important;
    grid-template-rows:62px 56px !important;
    background:rgba(18,14,15,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .home-page .brand {
    grid-column:1 !important;
    grid-row:1 !important;
    width:max-content;
    padding-left:12px !important;
  }

  .home-page .brand img {
    width:116px !important;
    height:50px !important;
  }

  .home-page .download {
    display:none;
  }

  .home-page .topbar > nav {
    grid-column:1 !important;
    grid-row:2 !important;
    padding:0 4px;
  }

  .home-page .topbar > nav > a {
    min-height:56px;
    font-size:18px !important;
    letter-spacing:2px !important;
  }

  .home-page .topbar > nav > a.is-active::after {
    width:58% !important;
    height:3px !important;
    background:#ff8a13;
    box-shadow:0 -2px 8px rgba(255,138,19,.8);
  }

  .home-page .home-account-bar.is-guest {
    position:absolute !important;
    z-index:4;
    top:0 !important;
    right:0;
    width:auto !important;
    min-width:74px;
    min-height:62px;
    height:62px !important;
    margin:0 !important;
    padding:0 13px 0 6px !important;
    display:flex;
    align-items:center;
    background:transparent;
  }

  .home-page .home-account-bar.is-guest .account {
    width:auto;
    height:62px;
    padding:0 !important;
    color:#2cff4e;
    font-size:15px !important;
    white-space:nowrap;
  }

  .home-page .home-account-bar.is-guest .qldy-auth-account {
    gap:7px;
    font-size:14px !important;
  }

  .home-page .home-account-bar.is-guest .message-indicator,
  .home-page .home-account-bar.is-guest .qldy-auth-message-link b,
  .home-page .home-account-bar.is-guest .qldy-auth-message-link span:last-child,
  .home-page .home-account-bar.is-guest .qldy-auth-account > i,
  .home-page .home-account-bar.is-guest .qldy-auth-account > a:not(.qldy-auth-message-link) {
    display:none;
  }

  .home-page .home-account-bar.is-guest .qldy-auth-logout {
    margin-left:7px !important;
  }

  .home-page .home-account-bar:not(.is-guest) {
    position:relative !important;
    z-index:1;
    flex:0 0 auto;
    top:auto !important;
    right:auto;
    width:100% !important;
    min-height:52px;
    height:auto !important;
    margin:0 !important;
    padding:7px 8px !important;
    display:flex;
    align-items:center;
    background:rgba(0,0,0,.3);
  }

  .home-page .home-account-bar:not(.is-guest) .account {
    width:100%;
    height:auto;
    padding:0 !important;
    flex-wrap:nowrap;
    justify-content:flex-start;
    color:#f4f4f4;
    font-size:clamp(11px,3.2vw,13px) !important;
    white-space:nowrap;
  }

  .home-page .home-account-bar:not(.is-guest) .qldy-auth-account {
    width:100%;
    max-width:none;
    margin-left:0;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:5px;
    font-size:inherit !important;
    white-space:nowrap;
  }

  .home-page .home-account-bar:not(.is-guest) .qldy-auth-message-link {
    min-width:0;
    gap:5px;
    white-space:nowrap;
  }

  .home-page .home-account-bar:not(.is-guest) .message-indicator,
  .home-page .home-account-bar:not(.is-guest) .message-indicator img {
    width:22px;
    height:26px;
  }

  .home-page .home-account-bar:not(.is-guest) .message-indicator {
    flex-basis:22px;
  }

  .home-page .home-account-bar:not(.is-guest) .qldy-auth-account b {
    min-width:44px;
    padding:1px 6px;
    font-size:clamp(10px,2.9vw,12px);
  }

  .home-page .home-account-bar:not(.is-guest) .qldy-auth-account i {
    height:26px;
    margin:0 2px;
  }

  .home-page .home-account-bar:not(.is-guest) .qldy-auth-logout {
    margin-left:auto !important;
  }

  .home-page .page-main {
    min-height:0;
    padding:9px 8px 28px !important;
  }

  .desktop-homepage {
    display:none !important;
  }

  .mobile-homepage {
    display:flex;
    flex-direction:column;
    gap:9px;
    width:100%;
  }

  .mobile-signin-hero {
    position:relative;
    display:block;
    width:100%;
    background:transparent;
  }

  .mobile-signin-hero img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1019/552;
    object-fit:contain;
  }

  .mobile-signin-action {
    position:absolute;
    z-index:1;
    right:12px;
    bottom:9px;
    min-width:88px;
    height:29px;
    display:grid;
    place-items:center;
    padding:0 13px;
    color:#693c00;
    border:1px solid #fff2a0;
    background:linear-gradient(#ffe96e,#ffbd21);
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-shadow:0 1px rgba(255,255,255,.55);
  }

  .mobile-activity-list {
    display:flex;
    flex-direction:column;
  }

  .mobile-activity-item {
    min-height:83px;
    padding:8px 1px 8px 8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 108px;
    gap:9px;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.24);
  }

  .mobile-activity-item.is-text-only {
    grid-template-columns:minmax(0,1fr);
  }

  .mobile-activity-copy {
    min-width:0;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:7px;
  }

  .mobile-activity-title {
    min-width:0;
    color:#f5f5f2;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
  }

  .mobile-activity-tag {
    display:inline-grid;
    place-items:center;
    min-width:38px;
    height:20px;
    margin-right:7px;
    padding:0 7px;
    border-radius:4px;
    color:#fff;
    background:#cb3153;
    font-size:11px;
    font-weight:700;
    vertical-align:1px;
  }

  .mobile-activity-tag.is-new {
    color:#201500;
    background:#f1b91f;
  }

  .mobile-activity-copy small {
    color:#c9c9c5;
    font-size:11px;
    line-height:1.3;
  }

  .mobile-activity-image {
    width:108px;
    height:auto;
    aspect-ratio:1019/552;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.72);
    border-radius:11px;
    background:#162e79;
    box-shadow:0 5px 14px rgba(0,0,0,.25);
  }

  .mobile-activity-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mobile-activity-image img[src*="web_img_lbhg"] {
    object-fit:contain;
  }

  .mobile-recharge {
    position:relative;
    display:block;
    width:100%;
    background:transparent;
  }

  .mobile-recharge img {
    display:block;
    width:100%;
    height:auto;
  }

  .mobile-news-card {
    overflow:hidden;
    padding:10px 13px 8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;
    background:linear-gradient(135deg,rgba(70,72,74,.96),rgba(45,47,49,.96));
    box-shadow:0 7px 18px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08);
  }

  .mobile-news-card header {
    height:28px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }

  .mobile-news-card h2 {
    margin:0;
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
  }

  .mobile-news-card header a {
    padding-top:1px;
    color:#dfdfdc;
    font-size:11px;
  }

  .mobile-news-list {
    display:flex;
    flex-direction:column;
  }

  .mobile-news-item {
    min-width:0;
    height:31px;
    display:flex;
    align-items:center;
    color:#f0f0ed;
    border-bottom:1px solid rgba(255,255,255,.2);
    font-size:12px;
    line-height:1;
  }

  .mobile-news-item:last-child {
    border-bottom:0;
  }

  .mobile-news-item span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .home-page footer {
    padding:15px 12px !important;
    color:#aaa;
    background:#080808;
    font-size:8px !important;
    line-height:1.65;
  }
}

@media (max-width:370px) {
  .home-page .brand img {
    width:108px !important;
  }

  .mobile-activity-item {
    grid-template-columns:minmax(0,1fr) 98px;
  }

  .mobile-activity-image {
    width:98px;
  }
}