/* Pantalla completa en celular y tableta (pedido de Luis, 11/10 13:42): en el mundo y en el selector de personaje no hay barras.
 * Semillas en una pastilla flotante, sonido en un botón flotante, y Brotito / Misiones / Mi cuenta en botones redondos
 * junto al botón amarillo de Juegos. Respeta notch, barra de Safari y la app instalada (100dvh, safe-area). En computadora
 * (>= 1024 px) se queda el diseño con barra, paneles y pestañas. */
#flota { display: none; }
@media (max-width: 1023px) {
  html:has(body.en-mundo), body.en-mundo { background: #3F6B3A; }
  body.en-mundo #hud, body.en-mundo #tabs { display: none !important; }
  body.en-mundo #mundo-capa { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 100dvh; }
  #flota { display: contents; }
  .fl-arriba { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(76px + env(safe-area-inset-right)); z-index: 6;
    display: flex; align-items: center; gap: 8px; pointer-events: none; }
  .fl-arriba > * { pointer-events: auto; }
  .fl-semillas { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 6px; border-radius: 999px; border: 3px solid #5B3A24;
    background: #F1E9D5; color: #5B3A24; font: 800 17px/1 Quicksand, system-ui, sans-serif; box-shadow: 0 3px 0 #5B3A24; cursor: pointer; }
  .fl-semillas img { width: 30px; height: 30px; }
  .fl-sonido { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #5B3A24; background: #F1E9D5; font-size: 20px; line-height: 1; padding: 0;
    box-shadow: 0 3px 0 #5B3A24; cursor: pointer; }
  .fl-abajo { position: absolute; left: calc(96px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
    display: flex; align-items: flex-end; gap: 10px; }
  .fl-redondo { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 60px; padding: 0; border: 0; background: none; cursor: pointer;
    color: #fff; font: 800 12px/1 Quicksand, system-ui, sans-serif; text-shadow: 0 1px 0 #2c2350, 1px 0 0 #2c2350, -1px 0 0 #2c2350, 0 -1px 0 #2c2350, 0 2px 3px rgba(0,0,0,.4);
    text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .fl-redondo span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #5B3A24; background: #F1E9D5;
    box-shadow: 0 4px 0 #5B3A24; font-size: 26px; overflow: hidden; }
  .fl-redondo span img { width: 46px; height: 46px; object-fit: contain; }
  .fl-redondo:active span { transform: translateY(3px); box-shadow: 0 1px 0 #5B3A24; }
  .fl-redondo.cuenta span { background: #fbe3e8; }
  .fl-redondo.mision span { background: #dff1d0; }
  /* avisos que antes iban sobre las pestañas: suben arriba de los botones */
  body.en-mundo #mundo-capa #mundo-noche, body.en-mundo #mundo-capa:has(.mb-juegos) #mundo-noche { left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); max-width: 86%; }
  body.en-mundo .inst-aviso { bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* con una sala, el armario, el selector o el tutorial abiertos no se ven */
  #mundo-capa:has(.sala:not([hidden]), .eleccion, .mt-capa, .armario, .album, .anden, .rg-capa, .mision-intro) #flota { display: none; }
  /* pantallas muy angostas: botones un poco más chicos para que quepan junto a Juegos */
  @media (max-width: 359px) { .fl-redondo { width: 50px; } .fl-redondo span { width: 48px; height: 48px; font-size: 22px; } .fl-abajo { gap: 6px; left: calc(92px + env(safe-area-inset-left)); } }
}
/* otras pantallas con barra: en la app instalada (barra de estado translúcida) la barra baja lo del notch */
#hud { padding-top: max(8px, env(safe-area-inset-top)); }