/* FormyDog v55 · tall-phone composition + clearer booster inventory
   Visual-only pass: keeps Phaser, purchases and v52 booster behavior untouched. */

@media (max-width:520px){
  /* Give the board a little breathing room instead of touching both edges. */
  html body .app>.game-layout>.center{
    gap:3px!important;
  }
  html body .app>.game-layout>.center .board-shell{
    width:min(calc(100vw - 16px),500px)!important;
    max-width:calc(100vw - 16px)!important;
    padding:4px!important;
    border-radius:18px!important;
    border-width:1px!important;
    box-shadow:0 4px 0 #06407d,0 11px 24px rgba(0,18,48,.22),0 0 22px rgba(79,208,255,.10)!important;
  }
  html body .app>.game-layout>.center .board-mount{
    inset:5px!important;
    border-radius:14px!important;
  }
  html body .app>.game-layout>.center .status{
    width:min(calc(100vw - 20px),496px)!important;
    margin-top:1px!important;
  }

  /* The level chip reads as part of the game, not as a detached floating pill. */
  html body .app>.game-layout>.fd-board-ad{
    margin-top:1px!important;
    min-height:21px!important;
    height:21px!important;
    padding:4px 13px!important;
    font-size:6.4px!important;
    letter-spacing:.08em!important;
    box-shadow:0 2px 8px rgba(3,39,75,.10)!important;
  }

  /* Five primary controls stay roomy. Menu/Avisos are narrower utility controls. */
  html body .app>.game-layout>.boosters{
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    grid-template-rows:56px!important;
    padding:5px!important;
    gap:4px!important;
    border-radius:15px!important;
  }
  html body .app>.game-layout>.boosters:has(.fd-menu-btn),
  html body .app>.game-layout>.boosters:has(.fd-notify-btn){
    grid-template-columns:minmax(0,1.16fr) minmax(0,1.16fr) minmax(0,1.16fr) minmax(0,1fr) minmax(0,1fr) 43px 43px!important;
  }

  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:3px!important;
    border-radius:10px!important;
  }

  html body .app>.game-layout>.boosters .booster{
    grid-template-rows:34px 11px!important;
    overflow:visible!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
  }
  html body .app>.game-layout>.boosters .booster>span b{
    font-size:5.8px!important;
    line-height:1!important;
    letter-spacing:.025em!important;
  }

  /* Inventory badge: one large readable number, no cramped multiplication mark. */
  html body .app>.game-layout>.boosters .booster em{
    top:-4px!important;
    right:-2px!important;
    min-width:19px!important;
    width:auto!important;
    height:19px!important;
    padding:0 5px!important;
    display:grid!important;
    place-items:center!important;
    border:2px solid rgba(255,255,255,.96)!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#178bec,#0863c2)!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:1000!important;
    line-height:1!important;
    letter-spacing:0!important;
    font-style:normal!important;
    box-shadow:0 3px 8px rgba(2,62,119,.28)!important;
    z-index:6!important;
  }
  html body .app>.game-layout>.boosters .booster em i{
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    font:inherit!important;
    font-style:normal!important;
    line-height:1!important;
  }
  html body .app>.game-layout>.boosters .booster:disabled em{
    background:linear-gradient(180deg,#b7c7d4,#91a8b9)!important;
    box-shadow:0 2px 5px rgba(21,55,78,.14)!important;
  }

  html body .app>.game-layout>.boosters .fd-menu-btn,
  html body .app>.game-layout>.boosters .fd-notify-btn{
    grid-template-rows:31px 11px!important;
    padding:3px 1px!important;
    font-size:5px!important;
    letter-spacing:0!important;
  }
  html body .app>.game-layout>.boosters .fd-menu-btn::before,
  html body .app>.game-layout>.boosters .fd-notify-btn::before{
    width:26px!important;
    height:26px!important;
    border-radius:9px!important;
  }
  html body .app>.game-layout>.boosters .fd-menu-btn::before{font-size:17px!important}
  html body .app>.game-layout>.boosters .fd-notify-btn::before{font-size:14px!important}

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

  html body .app>.game-layout>.boosters::before{
    top:-14px!important;
    right:8px!important;
    min-height:13px!important;
    padding:2px 7px!important;
    font-size:5px!important;
    letter-spacing:.045em!important;
  }
}

/* Tall phones: use the whole viewport deliberately.
   The action dock sits on the safe bottom edge instead of leaving a dead block below it. */
@media (max-width:520px) and (min-height:760px){
  html body .app{
    min-height:100dvh!important;
    height:100dvh!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    align-content:stretch!important;
    overflow:hidden!important;
    gap:6px!important;
  }

  html body .app>.game-layout{
    min-height:0!important;
    height:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto minmax(66px,1fr)!important;
    align-content:stretch!important;
    gap:5px!important;
    padding-bottom:0!important;
    background:radial-gradient(ellipse at 50% 100%,rgba(66,198,255,.10),transparent 36%)!important;
  }

  html body .app>.game-layout>.boosters{
    align-self:end!important;
    margin:0!important;
    margin-bottom:max(0px,env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  html body .app>.game-layout>.boosters:has(.fd-menu-btn),
  html body .app>.game-layout>.boosters:has(.fd-notify-btn){
    grid-template-columns:minmax(0,1.18fr) minmax(0,1.18fr) minmax(0,1.18fr) minmax(0,.96fr) minmax(0,.96fr) 39px 39px!important;
    gap:3px!important;
  }
  html body .app>.game-layout>.boosters .booster em{
    min-width:18px!important;
    height:18px!important;
    padding:0 4px!important;
    font-size:8.5px!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    width:27px!important;height:27px!important;max-width:27px!important;max-height:27px!important;
  }
  html body .app>.game-layout>.boosters .booster>span b{font-size:5.3px!important}
  html body .app>.game-layout>.boosters .fd-menu-btn,
  html body .app>.game-layout>.boosters .fd-notify-btn{font-size:4.6px!important}
}

@media (max-height:759px) and (max-width:520px){
  /* Short screens stay compact and scroll-safe. */
  html body .app{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  html body .app>.game-layout>.boosters{
    height:58px!important;min-height:58px!important;max-height:58px!important;
    grid-template-rows:48px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    height:48px!important;min-height:48px!important;max-height:48px!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;
  }
}