/* FormyDog v54 · compact footer that remains stable when Menu/Avisos lazy-load */

@media (max-width:520px){
  /* Main dock: five controls initially, seven once economy adds Menu/Avisos. */
  html body .app>.game-layout>.boosters{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:2px 0 0!important;
    padding:5px 4px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:48px!important;
    gap:3px!important;
    align-items:stretch!important;
    overflow:visible!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
  }

  html body .app>.game-layout>.boosters:has(.fd-menu-btn),
  html body .app>.game-layout>.boosters:has(.fd-notify-btn){
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }

  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:0!important;
    padding:2px!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.boosters .booster{
    grid-template-rows:29px 10px!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    width:25px!important;
    height:25px!important;
    max-width:25px!important;
    max-height:25px!important;
    margin:0!important;
  }
  html body .app>.game-layout>.boosters .booster>span b{
    font-size:5.4px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }
  html body .app>.game-layout>.boosters .booster>span small{display:none!important}
  html body .app>.game-layout>.boosters .booster em{
    top:2px!important;
    right:2px!important;
    min-width:13px!important;
    height:13px!important;
    padding:0 2px!important;
    font-size:5.5px!important;
  }

  /* Menu/Avisos are created later by economy.js; give them dedicated compact icon states. */
  html body .app>.game-layout>.boosters .fd-menu-btn,
  html body .app>.game-layout>.boosters .fd-notify-btn{
    position:relative!important;
    display:grid!important;
    grid-template-rows:27px 10px!important;
    place-items:center!important;
    padding:2px!important;
    font-size:5px!important;
    line-height:1!important;
    white-space:normal!important;
    color:#0758ad!important;
    background:linear-gradient(180deg,#fbfeff,#eaf7ff)!important;
    border:1px solid rgba(83,180,224,.30)!important;
    box-shadow:0 2px 0 rgba(93,160,194,.28),inset 0 1px #fff!important;
  }
  html body .app>.game-layout>.boosters .fd-menu-btn::before,
  html body .app>.game-layout>.boosters .fd-notify-btn::before{
    grid-row:1!important;
    display:grid!important;
    place-items:center!important;
    width:24px!important;
    height:24px!important;
    border-radius:8px!important;
    font-size:17px!important;
    line-height:1!important;
    background:rgba(255,255,255,.72)!important;
    box-shadow:0 2px 6px rgba(5,76,127,.10)!important;
  }
  html body .app>.game-layout>.boosters .fd-menu-btn::before{content:"☰"!important}
  html body .app>.game-layout>.boosters .fd-notify-btn::before{content:"🔔"!important;font-size:14px!important}

  html body .app>.game-layout>.boosters .sound,
  html body .app>.game-layout>.boosters .store{
    font-size:5px!important;
    line-height:1!important;
    padding:2px!important;
  }

  html body .app>.game-layout>.boosters::before{
    top:-15px!important;
    right:7px!important;
    min-height:13px!important;
    padding:2px 7px!important;
    font-size:5.4px!important;
  }

  /* Prevent later modal/menu content from changing the game grid geometry. */
  html body .fd-modal,
  html body #fdMenu,
  html body #fdStore{
    box-sizing:border-box!important;
  }

  html body .app>.game-layout{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  html body .app>.game-layout>.boosters + *{
    margin-top:0!important;
  }
}

@media (max-width:390px){
  html body .app>.game-layout>.boosters{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    grid-template-rows:44px!important;
    gap:2px!important;
    padding:5px 3px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    border-radius:8px!important;
  }
  html body .app>.game-layout>.boosters .booster{grid-template-rows:26px 9px!important}
  html body .app>.game-layout>.boosters .booster img{
    width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important
  }
  html body .app>.game-layout>.boosters .booster>span b,
  html body .app>.game-layout>.boosters .mini-btn{font-size:4.6px!important}
  html body .app>.game-layout>.boosters .fd-menu-btn::before,
  html body .app>.game-layout>.boosters .fd-notify-btn::before{
    width:21px!important;height:21px!important;font-size:14px!important
  }
  html body .app>.game-layout>.boosters .fd-notify-btn::before{font-size:12px!important}
}

@media (max-width:350px){
  html body .app>.game-layout>.boosters:has(.fd-menu-btn),
  html body .app>.game-layout>.boosters:has(.fd-notify-btn){
    gap:1px!important;
  }
  html body .app>.game-layout>.boosters .booster em{
    min-width:11px!important;height:11px!important;font-size:4.7px!important
  }
  html body .app>.game-layout>.boosters .booster>span b,
  html body .app>.game-layout>.boosters .mini-btn{font-size:4.2px!important}
}

@media (max-height:760px) and (max-width:520px){
  html body .app>.game-layout>.boosters{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    grid-template-rows:42px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    height:42px!important;min-height:42px!important;max-height:42px!important
  }
  html body .app>.game-layout>.boosters .booster img{
    width:21px!important;height:21px!important;max-width:21px!important;max-height:21px!important
  }
}