/* CardFlip - Mobile Overrides */

@media (max-width:820px){
  body:not(.prestart) .gameHeader.isGameHeader .gameHeaderContext{
    display:flex;
    position:fixed;
    top:52px;
    left:8px;
    right:8px;
    height:48px;
    justify-content:center;
    margin:0;
    padding:6px;
    border-radius:8px;
    background:var(--siteHeaderBar);
    overflow:visible;
  }
  .gameHeaderContext .gameContextGroup{gap:8px;width:100%;}
  .gameHeaderContext .gameContextTitle{display:none;}
  body:not(.prestart) #cardflip-area-wrapper{top:108px;}
  #timer{font-size:20px!important;}
}
@media (max-width:360px){
  .gameHeaderContext .gameContextGroup{gap:4px;}
  .gameHeaderContext .iconBtn{width:28px;min-width:28px;}
}

@media (max-width:700px){
  #modal.game-mode-modal .gamemode-grid,
  #modal.challenge-mode-modal .gamemode-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  #modal.settings-modal-wrapper .modal-body.settings-layout{
    flex-direction:column;
  }

  #modal.settings-modal-wrapper .modal-settingsidebar{
    width:100%;
    flex-basis:auto;
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.15);
  }

  #modal.settings-modal-wrapper .modal-settingsidebar ul{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #modal.settings-modal-wrapper .modal-settingsidebar li{
    text-align:center;
    text-indent:0;
  }

  .account-row,
  .reset-buttons{
    flex-direction:column;
  }

  .level-bests-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:480px){
  :root{
    --cardflip-modal-bottom:32.4px;
  }

  .footer-button{
    min-width:64px;
    padding:8px 10px;
    font-size:13px;
  }

  .modal-content,
  #cardflip-welcome-modal .cardflip-welcome-shell,
  #cardflip-welcome-modal .modal-content{
    width:calc(100% - 24px);
  }
}