/* Mobile simple layout refresh - 2026-07-01 */

.fcylMobileWalletActions,
.fcylMobileTopNav,
#fcylMobileTopNav,
.fcylBottomNav{display:none}

.gameCardCompact{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}
.gameCardInner{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.gameCardIcon{
  flex:0 0 auto;
  min-width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  padding:0 8px;
  color:#754a07;
  font-size:12px;
  font-weight:950;
  background:linear-gradient(180deg,#fff6d4,#f3c247);
  border:1px solid #dcb451;
  box-shadow:0 8px 16px rgba(171,112,18,.12);
}
.gameCardText{min-width:0;flex:1}
.gameCardTitle{font-size:16px;font-weight:950;color:#20242c}
.gameCardDesc{margin-top:5px;color:#717985;font-size:12px;line-height:1.45}
.gameCardAction{display:flex;justify-content:flex-end}
.gameCardAction .btn{min-width:76px;padding:8px 12px;border-radius:12px}

@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body{
    padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;
    background:#f7f7f5!important;
  }

  /* Header: brand left, app button right; username + balance on second row */
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 170px!important;
    grid-template-areas:
      "brand app"
      "user balance"!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:7px 8px!important;
    padding:8px 10px 9px!important;
    min-height:auto!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #eadfcb!important;
    box-shadow:0 7px 20px rgba(65,49,20,.07)!important;
    position:sticky!important;
    top:0!important;
    z-index:1100!important;
  }
  .topbar .brand{
    grid-area:brand!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:7px!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  .topbar .brand img{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
    flex:0 0 auto!important;
  }
  .topbar .brandName{
    font-size:16px!important;
    font-weight:950!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#20242c!important;
  }
  .topbar .brandSub{display:none!important}
  .topbar .nav{display:none!important}
  .topbar .userBadge{
    display:none!important;
    margin:0!important;
    min-width:0!important;
  }
  .topbar .pwaInstallBtn,
  .topbar #btnInstallApp{
    grid-area:app!important;
    justify-self:end!important;
    align-self:center!important;
    width:auto!important;
    min-width:62px!important;
    max-width:86px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    font-size:11px!important;
    line-height:30px!important;
    white-space:nowrap!important;
  }
  .topbar #userBadge{
    grid-area:user!important;
    justify-self:start!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .topbar #userBadge .badge{
    max-width:100%!important;
    min-width:0!important;
    height:28px!important;
    padding:0 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }
  .topbar #btnLogout{display:none!important}
  .topbar #balanceBadge{
    grid-area:balance!important;
    justify-self:end!important;
    width:auto!important;
    min-width:156px!important;
    max-width:none!important;
    height:30px!important;
    min-height:30px!important;
    padding:0 10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
    line-height:30px!important;
  }
  .topbar #balanceBadge b{
    font-size:11px!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #fcylLangSwitch,.fcylLangSwitch{display:none!important}
  #fcylMobileTopNav,.fcylMobileTopNav{display:none!important}

  .fcylMobileWalletActions{display:none!important}
  .fcylMobileWalletActions a{
    height:32px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#744a06;
    font-size:12px;
    font-weight:950;
    text-decoration:none;
    border:1px solid #d9ad3f;
    background:linear-gradient(180deg,#ffefaa,#efba2f);
    box-shadow:0 5px 12px rgba(174,111,10,.12);
  }

  .fcylBottomNav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr));
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(56px + env(safe-area-inset-bottom,0px));
    padding:4px 4px env(safe-area-inset-bottom,0px);
    z-index:1200;
    background:rgba(255,255,255,.97);
    border-top:1px solid #e7dfd3;
    box-shadow:0 -10px 28px rgba(55,42,20,.10);
    backdrop-filter:blur(12px);
  }
  .fcylBottomNav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#68717d;
    font-size:10px;
    font-weight:900;
    border-radius:14px;
    text-decoration:none;
  }
  .fcylBottomNav a span:first-child{font-size:18px;line-height:1}
  .fcylBottomNav a.active{
    color:#8a590d;
    background:linear-gradient(180deg,#fff8dd,#fff2bd);
  }

  .container{padding:10px 8px calc(76px + env(safe-area-inset-bottom,0px))!important}
  .homeAnnouncementBar{display:none}
  .homeGameCenter .panelTitle{
    align-items:flex-start!important;
    gap:8px!important;
  }
  .homeGameCenter .panelTitle > .row{display:none!important}
  .homeGameCenter .panelTitle > div:first-child{font-size:18px}
  .homeGameCenter .grid4,
  #gameGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .gameCardCompact{
    min-height:132px;
    padding:10px!important;
    border-radius:16px!important;
  }
  .gameCardInner{
    flex-direction:column;
    gap:8px;
  }
  .gameCardIcon{
    min-width:38px;
    height:28px;
    border-radius:999px;
    font-size:11px;
  }
  .gameCardTitle{font-size:15px}
  .gameCardDesc{font-size:11px;line-height:1.35}
  .gameCardAction .btn{
    width:100%;
    min-width:0;
    height:32px;
    padding:0 8px!important;
    font-size:12px!important;
  }
  main.container > section.panel.mt24:last-child{display:none}

  /* Profile: left vertical menu + right content, similar to desktop */
  body.fcylPageProfile main.container > section.panel:first-child{
    display:none!important;
  }
  .mTabsWrap{display:none!important}
  .profileGrid{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:start!important;
    margin-top:12px!important;
  }
  #sideMenuPanel{
    display:block!important;
    position:sticky;
    top:92px;
    z-index:5;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  #sideMenuPanel .panelTitle{display:none!important}
  #sideMenuPanel .panelBody{padding:7px!important}
  #sideMenuPanel .menu{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
  }
  #sideMenuPanel .menuItem{
    width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    padding:7px 3px!important;
    border-radius:11px!important;
    text-align:center!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  #contentPanel{min-width:0!important;border-radius:16px!important}
  #contentPanel .panelBody{padding:9px!important;font-size:12px!important}
  #contentPanel .panelTitle{font-size:15px!important;line-height:1.25!important}
  #contentPanel .noticeBox{padding:10px!important;border-radius:14px!important}
  #contentPanel .input,
  #contentPanel select,
  #contentPanel textarea{font-size:12px!important;min-height:34px!important;padding:8px 10px!important;border-radius:12px!important}
  #contentPanel .btn{min-height:32px!important;padding:7px 10px!important;font-size:12px!important;border-radius:12px!important}
  #contentPanel .table,
  #contentPanel table{width:100%!important;font-size:11px!important}
  #contentPanel th,
  #contentPanel td{padding:7px 6px!important;line-height:1.35!important}
  #contentPanel .metaCard{padding:8px!important;border-radius:12px!important}
  #contentPanel .metaLabel{font-size:10px!important}
  #contentPanel .metaValue{font-size:13px!important}
  #view_ledger .table{table-layout:auto!important}
  #view_ledger th:nth-child(4),
  #view_ledger td:nth-child(4){width:42%!important;white-space:normal!important}
  .fcylCompactForm{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .fcylCompactForm .input,
  .fcylCompactForm .btn{width:100%!important;max-width:none!important;min-width:0!important}
  .fcylMethodHint{font-size:11px!important;line-height:1.55!important}
  .fcylReportTools{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .fcylTeamRuleBox{font-size:11px!important;line-height:1.55!important}
  .profileGrid .view{min-width:0!important}
  .profileGrid .row > *{min-width:0!important}
  #view_payment .paymentBasicFields{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  #view_payment .paymentBasicFields .input{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .manualRechargeActions .btn{min-width:0!important;flex:1 1 120px!important}
  .heroMeta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .qrUploadBox{min-width:0!important}
  table{max-width:100%;overflow-x:auto}
}

@media (max-width:390px){
  .topbar{grid-template-columns:minmax(0,1fr) 166px!important}
  .topbar #balanceBadge{min-width:156px!important;max-width:none!important;font-size:10px!important;padding:0 8px!important}
  .profileGrid{grid-template-columns:62px minmax(0,1fr)!important}
  #sideMenuPanel .menuItem{font-size:10px!important;padding:6px 2px!important}
  .gameCardCompact{min-height:126px}
}

@media (max-width:768px){
  .extendedGamePage .extendedResult{gap:5px!important;max-width:100%!important;overflow:hidden!important}
  .extendedGamePage .extBall{width:30px!important;height:30px!important;font-size:12px!important;box-sizing:border-box!important}
  .extendedGamePage .mkBall{border-width:1px!important}
  .extendedGamePage .playGroup{padding:8px!important;margin-bottom:8px!important;border-radius:14px!important}
  .extendedGamePage .playGroupTitle{font-size:13px!important;margin-bottom:7px!important}
  .extendedGamePage .playGrid{gap:5px!important}
  .extendedGamePage .playGrid .pill{min-width:0!important;padding:6px 8px!important;font-size:11px!important;border-radius:999px!important;line-height:1.15!important}
  .extendedGamePage .playGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .extendedGamePage .playGrid .pill b,
  .extendedGamePage .playGrid .pill small{font-size:10px!important;line-height:1.15!important}
  .extendedGamePage .markSixBuildGrid .pill{width:30px!important;height:30px!important;padding:0!important;font-size:12px!important}
  .extendedGamePage .betSlipPanel{font-size:12px!important}
  .extendedGamePage .betSlipPanel table{width:100%!important;font-size:11px!important}
  .extendedGamePage .betSlipPanel th,
  .extendedGamePage .betSlipPanel td{padding:6px 5px!important;line-height:1.25!important}
  .extendedGamePage .recentRoundsPanel,
  .extendedGamePage .recentBetsPanel{max-width:100%!important;overflow:hidden!important}
  .gamePage .pickPanel,
  .gamePage .betSlipPanel{font-size:12px!important}
  .gamePage .pill,
  .gamePage .numBtn,
  .gamePage .quickBtn{font-size:11px!important;padding:6px 8px!important;min-width:0!important}
  .gamePage .ball,
  .gamePage .digitBall{width:32px!important;height:32px!important;font-size:12px!important}
  .gamePage table{font-size:11px!important}
  .gamePage .playTabs,
  .gamePage .betTabs{overflow:visible!important;white-space:normal!important;flex-wrap:wrap!important}
}