/* FormyDog v48 · restauración de estructura móvil
   Objetivo: recuperar la composición compacta tipo app sin tocar Phaser/escritorio. */

@media (max-width:900px){
  html,body{
    width:100%!important;
    min-height:100%!important;
    overflow-x:hidden!important;
  }

  body{
    overflow-y:auto!important;
  }

  html body .app{
    width:100%!important;
    min-height:100dvh!important;
    height:auto!important;
    box-sizing:border-box!important;
    padding:4px 5px calc(66px + env(safe-area-inset-bottom))!important;
    gap:4px!important;
    overflow:visible!important;
  }

  /* HEADER: vuelve a tres franjas estables.
     1 marca + nivel, 2 recursos, 3 accesos rápidos. */
  html body .app>.topbar{
    width:100%!important;
    min-height:92px!important;
    height:92px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px 6px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    grid-template-rows:31px 27px 24px!important;
    gap:3px 6px!important;
    align-items:center!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }

  html body .app>.topbar .brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    height:31px!important;
    margin:0!important;
    gap:6px!important;
    overflow:hidden!important;
  }

  html body .app>.topbar .brand-avatar{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    flex:0 0 29px!important;
    border-radius:9px!important;
  }

  html body .app>.topbar .brand-avatar img{
    width:27px!important;
    height:27px!important;
  }

  html body .app>.topbar .brand>div:last-child{
    min-width:0!important;
    overflow:hidden!important;
  }

  html body .app>.topbar .brand h1{
    max-width:145px!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .app>.topbar .brand p{
    margin:2px 0 0!important;
    font-size:5.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  html body .app>.topbar #fdLevelChip,
  html body .app>.topbar .fd-level-chip{
    grid-column:2!important;
    grid-row:1!important;
    width:72px!important;
    min-width:72px!important;
    height:29px!important;
    min-height:29px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:2px 5px!important;
    border-radius:9px!important;
    display:grid!important;
    grid-template-columns:auto auto!important;
    grid-template-rows:14px 9px!important;
    align-items:center!important;
    justify-content:center!important;
    column-gap:4px!important;
  }

  html body .app>.topbar .fd-level-chip span{grid-column:1!important;grid-row:1!important;font-size:5px!important}
  html body .app>.topbar .fd-level-chip b{grid-column:2!important;grid-row:1!important;font-size:12px!important;line-height:1!important}
  html body .app>.topbar .fd-level-chip small{grid-column:1/-1!important;grid-row:2!important;font-size:4.8px!important;line-height:1!important}

  html body .app>.topbar .resources{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    height:27px!important;
    min-width:0!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
  }

  html body .app>.topbar .resource{
    width:100%!important;
    min-width:0!important;
    height:27px!important;
    min-height:27px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:2px 6px!important;
    border-radius:9px!important;
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:4px!important;
    align-items:center!important;
    overflow:hidden!important;
  }

  html body .app>.topbar .resource img{
    grid-column:1!important;
    grid-row:1!important;
    width:19px!important;
    height:19px!important;
    max-width:19px!important;
    max-height:19px!important;
    margin:auto!important;
    object-fit:contain!important;
  }

  html body .app>.topbar .resource b{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    font-size:9px!important;
    line-height:1!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .app>.topbar .resource span{display:none!important}

  html body .app>.topbar .fd-header-tools{
    grid-column:1/-1!important;
    grid-row:3!important;
    width:100%!important;
    height:24px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,32px)!important;
    justify-content:center!important;
    align-items:center!important;
    gap:7px!important;
  }

  html body .app>.topbar .fd-header-tools button{
    width:32px!important;
    min-width:32px!important;
    height:24px!important;
    min-height:24px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding: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 #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:15px!important}

  /* LAYOUT PRINCIPAL: cada bloque toma sólo la altura necesaria. */
  html body .app>.game-layout{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    align-items:start!important;
    align-content:start!important;
    gap:4px!important;
    overflow:visible!important;
  }

  /* Objetivo en una sola franja: se elimina el gran bloque vacío. */
  html body .app>.game-layout>.goals{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px 6px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
    grid-template-rows:1fr!important;
    gap:5px!important;
    align-items:stretch!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.goals>.side-title,
  html body .app>.game-layout>.goals>.progress-row,
  html body .app>.game-layout>.goals>.how{
    display:none!important;
  }

  html body .app>.game-layout>.goals .goal-box{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px 7px!important;
    border-radius:9px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    align-items:center!important;
    gap:6px!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.goals .goal-box img{
    width:27px!important;
    height:27px!important;
    margin:0!important;
  }
  html body .app>.game-layout>.goals .goal-box strong{font-size:13px!important;line-height:1!important}
  html body .app>.game-layout>.goals .goal-box span{font-size:5.6px!important;line-height:1.1!important}

  html body .app>.game-layout>.goals .moves-box{
    grid-column:2!important;
    grid-row:1!important;
    width:76px!important;
    height:44px!important;
    min-height:44px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:3px 4px!important;
    border-radius:9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
  html body .app>.game-layout>.goals .moves-box strong{font-size:14px!important;line-height:1!important}
  html body .app>.game-layout>.goals .moves-box span{font-size:5.6px!important;line-height:1!important}

  /* TABLERO: protagonista, centrado y sin huecos artificiales. */
  html body .app>.game-layout>.center{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:3px!important;
  }

  html body .app>.game-layout>.center .board-shell{
    width:min(calc(100vw - 10px),52dvh,520px)!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    box-sizing:border-box!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  html body .app>.game-layout>.center .board-mount,
  html body .app>.game-layout>.center .board-mount canvas{
    max-width:100%!important;
  }

  html body .app>.game-layout>.center .status{
    width:min(calc(100vw - 16px),500px)!important;
    min-height:20px!important;
    height:20px!important;
    max-height:20px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:3px 7px!important;
    border-radius:9px!important;
    font-size:6.5px!important;
    line-height:1!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.center .fd-game-share,
  html body .app>.game-layout>.center .fd-pet-tools{
    display:none!important;
  }

  /* El chip de nivel deja de parecer una tarjeta enorme flotante. */
  html body .app>.game-layout>.fd-board-ad{
    grid-column:1!important;
    grid-row:3!important;
    width:max-content!important;
    max-width:90vw!important;
    min-width:0!important;
    min-height:18px!important;
    height:18px!important;
    box-sizing:border-box!important;
    margin:0 auto!important;
    padding:3px 9px!important;
    border-radius:999px!important;
    font-size:5.8px!important;
    line-height:1!important;
  }

  /* FOOTER DE JUEGO: exactamente los cinco controles reales. */
  html body .app>.game-layout>.boosters{
    position:fixed!important;
    left:4px!important;
    right:4px!important;
    bottom:max(4px,env(safe-area-inset-bottom))!important;
    z-index:1800!important;
    width:auto!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px!important;
    border-radius:15px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:46px!important;
    gap:3px!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.boosters>.side-title,
  html body .app>.game-layout>.boosters>.fd47-booster-health,
  html body .app>.game-layout>.boosters>.fd47-power-preview{
    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:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:3px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  html body .app>.game-layout>.boosters .booster{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:29px 10px!important;
    place-items:center!important;
  }

  html body .app>.game-layout>.boosters .booster img{
    grid-row:1!important;
    width:28px!important;
    height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
    margin:0!important;
  }

  html body .app>.game-layout>.boosters .booster>span{
    grid-row:2!important;
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    line-height:1!important;
  }
  html body .app>.game-layout>.boosters .booster>span b{
    display:block!important;
    max-width:100%!important;
    font-size:5.3px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .app>.game-layout>.boosters .booster>span small{display:none!important}

  html body .app>.game-layout>.boosters .booster em{
    position:absolute!important;
    top:2px!important;
    right:3px!important;
    min-width:14px!important;
    height:14px!important;
    padding:0 2px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    font-size:6.5px!important;
    line-height:1!important;
  }

  html body .app>.game-layout>.boosters .mini-btn{
    display:grid!important;
    place-items:center!important;
    font-size:5.4px!important;
    line-height:1!important;
    white-space:normal!important;
  }

  /* En móvil las decoraciones no deben competir con el tablero. */
  .fd47-scene-decor{display:none!important}
  .fd47-light{opacity:.16!important;filter:blur(34px)!important}
  html.fd46-bg-ready body::before,
  html.fd47-bg-ready body::before{opacity:.10!important}
}

@media (max-width:430px){
  html body .app{padding-inline:4px!important}

  html body .app>.topbar{
    grid-template-columns:minmax(0,1fr) 66px!important;
    padding-inline:5px!important;
  }
  html body .app>.topbar #fdLevelChip,
  html body .app>.topbar .fd-level-chip{width:66px!important;min-width:66px!important}
  html body .app>.topbar .brand h1{max-width:115px!important;font-size:9px!important}
  html body .app>.topbar .fd-header-tools{grid-template-columns:repeat(4,31px)!important;gap:6px!important}
  html body .app>.topbar .fd-header-tools button{width:31px!important;min-width:31px!important}

  html body .app>.game-layout>.goals{
    grid-template-columns:minmax(0,1fr) 72px!important;
    padding-inline:5px!important;
  }
  html body .app>.game-layout>.goals .moves-box{width:72px!important}

  html body .app>.game-layout>.center .board-shell{
    width:min(calc(100vw - 8px),52dvh)!important;
    border-radius:17px!important;
  }

  html body .app>.game-layout>.boosters{
    left:3px!important;
    right:3px!important;
    padding:3px!important;
    gap:2px!important;
  }
  html body .app>.game-layout>.boosters .booster,
  html body .app>.game-layout>.boosters .mini-btn{border-radius:9px!important}
  html body .app>.game-layout>.boosters .booster img{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important}
  html body .app>.game-layout>.boosters .booster>span b{font-size:4.9px!important}
  html body .app>.game-layout>.boosters .mini-btn{font-size:4.9px!important}
}

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