/* FormyDog v31 · móvil compacto, recursos visibles y geometría estable */

@media(max-width:900px){
  html body .app{
    gap:6px!important;
    padding:5px 6px calc(7px + env(safe-area-inset-bottom))!important;
  }

  /* Header en tres franjas claras: marca/nivel, recursos, acciones. */
  html body .app>.topbar{
    width:100%!important;
    min-height:98px!important;
    height:auto!important;
    padding:5px 6px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:34px 27px 25px!important;
    align-items:center!important;
    gap:3px 6px!important;
    border-radius:15px!important;
  }

  html body .app>.topbar .brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  html body .app>.topbar .brand-avatar{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
    border-radius:9px!important;
  }
  html body .app>.topbar .brand-avatar img{
    width:28px!important;
    height:28px!important;
  }
  html body .app>.topbar .brand>div:last-child{
    min-width:0!important;
  }
  html body .app>.topbar .brand h1{
    max-width:150px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:1.05!important;
  }
  html body .app>.topbar .brand p{
    margin-top:1px!important;
    font-size:4.8px!important;
    line-height:1!important;
  }

  html body .app>.topbar .fd-level-chip{
    grid-column:2!important;
    grid-row:1!important;
    min-width:74px!important;
    width:auto!important;
    height:29px!important;
    min-height:29px!important;
    padding:2px 7px!important;
    gap:4px!important;
    border-radius:9px!important;
    justify-content:center!important;
  }
  html body .app>.topbar .fd-level-chip b{font-size:13px!important}
  html body .app>.topbar .fd-level-chip span,
  html body .app>.topbar .fd-level-chip small{font-size:5px!important}

  /* Regresan croquetas, monedas y VIDAS. Sólo icono + cantidad para ahorrar espacio. */
  html body .app>.topbar .resources{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    margin:0!important;
    gap:5px!important;
    min-width:0!important;
  }
  html body .app>.topbar .resource{
    min-width:0!important;
    width:100%!important;
    height:27px!important;
    padding:2px 7px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    gap:4px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  html body .app>.topbar .resource img{
    grid-row:1!important;
    grid-column:1!important;
    width:20px!important;
    height:20px!important;
    max-width:20px!important;
    max-height:20px!important;
    margin:0 auto!important;
  }
  html body .app>.topbar .resource b{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    font-size:10px!important;
    line-height:1!important;
    text-align:left!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .app>.topbar .resource span{display:none!important}

  /* Acciones del header sólo con iconos en móvil. */
  html body .app>.topbar .fd-header-tools{
    grid-column:1/-1!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:repeat(4,34px)!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    gap:8px!important;
  }
  html body .app>.topbar .fd-header-tools button{
    width:34px!important;
    min-width:34px!important;
    height:24px!important;
    min-height:24px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:8px!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:1!important;
  }
  html body .app>.topbar .fd-header-tools button::before{
    margin:0!important;
    line-height:1!important;
  }
  html body .app>.topbar #fdHeaderInstructions::before{
    content:'?'!important;
    display:grid!important;
    place-items:center!important;
    width:16px!important;
    height:16px!important;
    border-radius:50%!important;
    background:#e1f1ff!important;
    color:#0757b8!important;
    font:1000 11px/1 Arial,sans-serif!important;
  }
  html body .app>.topbar #fdHeaderProfile::before{content:'🐾'!important;font-size:13px!important}
  html body .app>.topbar #fdHeaderCare::before{content:'♥'!important;font-size:13px!important}
  html body .app>.topbar #fdHeaderEmergency::before{content:'+'!important;font-size:14px!important}

  /* Centro y tablero ocupan el ancho disponible sin deformarse. */
  html body .app>.game-layout{
    width:100%!important;
    min-width:0!important;
    gap:6px!important;
  }
  html body .app>.game-layout>.center,
  html body .app>.game-layout>.center .board-shell,
  html body .app>.game-layout>.center .status,
  html body .app>.game-layout>.center .fd-game-share,
  html body .app>.game-layout>.center .fd-pet-tools{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Barra inferior determinista: 7 controles, todos del mismo tamaño. */
  html body .app>.game-layout>.boosters{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-rows:40px!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:4px!important;
    overflow:visible!important;
    align-items:stretch!important;
  }
  html body .app>.game-layout>.boosters>.side-title{display:none!important}
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:3px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  html body .app>.game-layout>.boosters .booster{
    display:grid!important;
    grid-template-columns:1fr!important;
    place-items:center!important;
  }
  html body .app>.game-layout>.boosters .booster>span{display:none!important}
  html body .app>.game-layout>.boosters .booster img{
    width:29px!important;
    height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
    margin:auto!important;
  }
  html body .app>.game-layout>.boosters .mini-btn{
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
  }
  html body .app>.game-layout>.boosters .mini-btn::before{
    width:27px!important;
    height:27px!important;
    flex-basis:27px!important;
    margin:0!important;
  }

  /* Popups centrados y sin anchuras imposibles. */
  html body .fd-modal .fd-card,
  html body #fdMenu .fd-card,
  html body #fdStore .fd-card,
  html body #fdProfile .fd-card,
  html body #fdCareCenter .fd-card{
    max-width:calc(100vw - 16px)!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:520px){
  html body .app>.topbar{
    min-height:96px!important;
    grid-template-rows:33px 27px 24px!important;
  }
  html body .app>.topbar .brand h1{max-width:118px!important;font-size:10px!important}
  html body .app>.topbar .fd-level-chip{min-width:67px!important;padding-inline:5px!important}
  html body .app>.topbar .resources{gap:4px!important}
  html body .app>.topbar .resource{padding-inline:5px!important}
  html body .app>.topbar .resource b{font-size:9px!important}
  html body .app>.topbar .fd-header-tools{gap:6px!important}

  html body .app>.game-layout>.boosters{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:3px!important;
    padding:3px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{
    height:38px!important;
    min-height:38px!important;
    border-radius:8px!important;
  }
  html body .app>.game-layout>.boosters .booster img,
  html body .app>.game-layout>.boosters .mini-btn::before{
    width:25px!important;
    height:25px!important;
    max-width:25px!important;
    max-height:25px!important;
  }

  #fdMenu .fd-menu{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:360px){
  html body .app>.topbar .brand h1{max-width:95px!important;font-size:9px!important}
  html body .app>.topbar .resource{grid-template-columns:19px minmax(0,1fr)!important;padding-inline:4px!important}
  html body .app>.topbar .resource img{width:18px!important;height:18px!important}
  html body .app>.topbar .resource b{font-size:8px!important}
  html body .app>.topbar .fd-header-tools{grid-template-columns:repeat(4,31px)!important;gap:5px!important}
  html body .app>.topbar .fd-header-tools button{width:31px!important;min-width:31px!important}
}