/* FormyDog v57 · mobile finish: centered board, stable header icons, permanent dock */

@media (max-width:520px){
  /* Header controls share one optical grid. Emoji/glyph baselines no longer float. */
  html body .app>.topbar .fd-header-tools{
    align-items:center!important;
    justify-items:center!important;
  }
  html body .app>.topbar .fd-header-tools button{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:1!important;
  }
  html body .app>.topbar .fd-header-tools button::before{
    position:absolute!important;
    inset:0!important;
    margin:auto!important;
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    transform:none!important;
    translate:none!important;
    padding:0!important;
    line-height:26px!important;
    text-align:center!important;
    background:none!important;
    background-image:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
  html body .app>.topbar #fdHeaderInstructions::before{
    content:"?"!important;
    font:900 17px/26px Arial,sans-serif!important;
    color:#1972bc!important;
  }
  html body .app>.topbar #fdHeaderProfile::before{
    content:"🐾"!important;
    font:normal 18px/26px "Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  }
  html body .app>.topbar #fdHeaderCare::before{
    content:"♥"!important;
    font:900 19px/26px Arial,sans-serif!important;
    color:#3b9872!important;
  }
  html body .app>.topbar #fdHeaderEmergency::before{
    content:"+"!important;
    font:900 24px/24px Arial,sans-serif!important;
    color:#fff!important;
  }

  /* Coins and lives are a matched pair: same box, same icon box and baseline. */
  html body .app>.topbar .resources>.resource:nth-child(2),
  html body .app>.topbar .resources>.resource:nth-child(3){
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    align-items:center!important;
    justify-items:center!important;
    height:36px!important;
    min-height:36px!important;
    padding:3px 8px!important;
    gap:4px!important;
  }
  html body .app>.topbar .resources>.resource:nth-child(2) img,
  html body .app>.topbar .resources>.resource:nth-child(3) img{
    width:22px!important;
    height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
    display:block!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  html body .app>.topbar .resources>.resource:nth-child(2) b,
  html body .app>.topbar .resources>.resource:nth-child(3) b{
    width:100%!important;
    margin:0!important;
    text-align:center!important;
    font-size:11px!important;
    line-height:1!important;
  }

  /* Board: one centered square with exactly equal outer and inner margins. */
  html body .app>.game-layout>.center{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  html body .app>.game-layout>.center .board-shell{
    box-sizing:border-box!important;
    width:min(calc(100vw - 14px),500px)!important;
    max-width:calc(100vw - 14px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    margin:0 auto!important;
    padding:6px!important;
    border:1px solid rgba(184,237,255,.72)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 4px 0 #06407d,0 10px 23px rgba(0,18,48,.20),0 0 18px rgba(79,208,255,.08)!important;
  }
  html body .app>.game-layout>.center .board-mount{
    position:absolute!important;
    inset:6px!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }
  html body .app>.game-layout>.center .board-mount canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    transform-origin:center center!important;
  }

  /* Remove the bright animated stripe/halo that made the board look top-heavy. */
  html body .app>.game-layout>.center .board-shell::before{
    opacity:.22!important;
    animation:none!important;
    transform:none!important;
    background:linear-gradient(180deg,rgba(104,224,255,.22),rgba(104,224,255,.06) 18%,transparent 44%)!important;
  }
  html body .app>.game-layout>.center .board-shell::after{
    display:none!important;
    opacity:0!important;
    animation:none!important;
  }

  html body .app>.game-layout>.center .status{
    width:min(calc(100vw - 20px),494px)!important;
    margin:3px auto 0!important;
  }

  /* Seven controls are part of the first render. No geometry change when Store loads. */
  html body .app>.game-layout>.boosters{
    grid-template-columns:minmax(0,1.18fr) minmax(0,1.18fr) minmax(0,1.18fr) minmax(0,.96fr) minmax(0,.96fr) 42px 42px!important;
    gap:3px!important;
  }

  /* Inventory count is readable but no longer crowds the power artwork. */
  html body .app>.game-layout>.boosters .booster em{
    top:2px!important;
    right:3px!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 4px!important;
    border-width:1.5px!important;
    font-size:8.5px!important;
    box-shadow:0 2px 6px rgba(2,62,119,.22)!important;
  }
  html body .app>.game-layout>.boosters .booster img{
    margin-top:2px!important;
  }
  html body .app>.game-layout>.boosters .fd-menu-btn,
  html body .app>.game-layout>.boosters .fd-notify-btn{
    display:grid!important;
    place-items:center!important;
  }

  /* Native/game viewport: flexible spacer is before the dock, never below it. */
  html body .app{
    min-height:100dvh!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:520px) and (min-height:760px){
  html body .app{
    height:100dvh!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  html body .app>.game-layout{
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto minmax(6px,1fr) auto!important;
    align-content:stretch!important;
    gap:5px!important;
  }
  html body .app>.game-layout>.goals{grid-row:1!important}
  html body .app>.game-layout>.center{grid-row:2!important}
  html body .app>.game-layout>.fd-board-ad{grid-row:3!important}
  html body .app>.game-layout>.boosters{
    grid-row:5!important;
    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{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.92fr) minmax(0,.92fr) 38px 38px!important;
    gap:2px!important;
  }
  html body .app>.game-layout>.boosters .booster em{
    min-width:17px!important;
    height:17px!important;
    font-size:8px!important;
    right:2px!important;
  }
}

@media (max-height:759px) and (max-width:520px){
  html body .app{height:auto!important;overflow:visible!important}
  html body .app>.game-layout{
    display:grid!important;
    grid-template-rows:auto auto auto auto!important;
  }
  html body .app>.game-layout>.boosters{grid-row:4!important}
}